I am trying to get the height of the actionbar in pixels or DIPS.
I can only ever return 0;
<Page class="page"
navigatingFrom="onNavigatingFrom"
navigatingTo="onNavigatingTo"
xmlns="http://schemas.nativescript.org/tns.xsd">
<ActionBar id="actionBar" class="action-bar theme-action-bar">
function onNavigatingTo(args) {
var actionBar = page.getViewById("actionBar");
var height = actionBar.getActualSize().height;
//or
var height = actionBar.height;
}
Try adding a timeout,
function onNavigatingTo(args) {
var actionBar = page.getViewById("actionBar");
setTimeout(()=>{
var height = actionBar.getActualSize().height;
}, 100);
}
Related
I wanted to display the labels just like how it is done here, within chartjs documentation samples.
However, along with one label, I want to display another label beside the first label. Both the labels have different font colors. Something like this:
Is that possible? If yes, kindly let me know how can that be achieved.
Currently I am able to display one label using following code:
Chart.plugins.register({
afterDatasetsDraw: function(chart, easing) {
// To only draw at the end of animation, check for easing === 1
var ctx = chart.ctx;
chart.data.datasets.forEach(function (dataset, i) {
var meta = chart.getDatasetMeta(i);
if (!meta.hidden) {
meta.data.forEach(function(element, index) {
// Draw the text in black, with the specified font
ctx.fillStyle = 'rgb(0, 0, 0)';
var fontSize = 16;
var fontStyle = 'normal';
var fontFamily = 'Helvetica Neue';
ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
// Just naively convert to string for now
var dataString = dataset.data[index].toString();
// Make sure alignment settings are correct
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
var padding = 5;
var position = element.tooltipPosition();
ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
});
}
});
}
});
Yes, that is possible. You can achieve that using the following chart plugin :
Chart.plugins.register({
afterDatasetsDraw: function(chart, ease) {
var barLabels = chart.options.barLabels;
if (!barLabels) return;
var ctx = chart.ctx;
chart.data.datasets.forEach(function(dataset, index) {
var meta = chart.getDatasetMeta(index);
if (!meta.hidden) {
meta.data.forEach(function(segment, index) {
var model = segment._model,
position = segment.tooltipPosition(),
x = position.x,
y = position.y,
height = model.height,
padding = height / 4;
ctx.save();
ctx.textBaseline = 'middle';
ctx.font = 'bold ' + height / 2 + 'px Arial';
ctx.fillStyle = '#777'; //first label's font color
var text1 = barLabels.first[index],
text2 = barLabels.second[index],
textWidth = ctx.measureText(text1).width + padding;
ctx.fillText(text1, x + padding, y);
ctx.fillStyle = '#000'; //second label's font color
ctx.fillText(text2, x + padding + textWidth, y);
ctx.restore();
});
}
});
}
});
To utilize the plugin, define the following properties in your chart options :
barLabels: {
first: ['0.4M', '1.6M', '0.6M', '0.7M', '1.5M'],
second: ['19.3%', '19.1%', '14.1%', '9.0%', '8.9%']
}
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
Chart.plugins.register({
afterDatasetsDraw: function(chart, ease) {
var barLabels = chart.options.barLabels;
if (!barLabels) return;
var ctx = chart.ctx;
chart.data.datasets.forEach(function(dataset, index) {
var meta = chart.getDatasetMeta(index);
if (!meta.hidden) {
meta.data.forEach(function(segment, index) {
var model = segment._model,
position = segment.tooltipPosition(),
x = position.x,
y = position.y,
height = model.height,
padding = height / 4;
ctx.save();
ctx.textBaseline = 'middle';
ctx.font = 'bold ' + height / 2 + 'px Arial';
ctx.fillStyle = '#777'; //first label's font color
var text1 = barLabels.first[index],
text2 = barLabels.second[index],
textWidth = ctx.measureText(text1).width + padding;
ctx.fillText(text1, x + padding, y);
ctx.fillStyle = '#000'; //second label's font color
ctx.fillText(text2, x + padding + textWidth, y);
ctx.restore();
});
}
});
}
});
var chart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: 'Statistics',
data: [1, 4, 2, 3, 4],
backgroundColor: ['#fd625e', '#01b8aa', '#01b8aa', '#01b8aa', '#fd625e'],
}]
},
options: {
scales: {
xAxes: [{
ticks: {
beginAtZero: true,
stepSize: 1,
max: 6
}
}]
},
barLabels: {
first: ['0.4M', '1.6M', '0.6M', '0.7M', '1.5M'],
second: ['19.3%', '19.1%', '14.1%', '9.0%', '8.9%']
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>
I try to integrate a plugin
Demo here: http://makg10.github.io/jquery-meme-generator/
The js code and read.me here:
https://jsfiddle.net/t6xu4pyf/1/
(function($){
var i18n = {
topTextPlaceholder: "TEXTE HAUT",
bottomTextPlaceholder: "TEXT BAS",
Server side and client, it works for me if I put directly the url of an image in my html.
If I use
It also works except that the image does not resize to upload.
I'm very very bad with the canvas and I do not know at all if I can work on the size of the image directly in the plugin code or if I have to resize the image "before" with other function? ()
Thank you very much for your help
Finally, solution was client side.
It is about the image resize before upload ... no more.
The answer already existed in many topic above. Sorry.
Anyway, here's the code:
function readURL(input) {
if (input.files && input.files[0]) {
var current_file = input.files[0];
var reader = new FileReader();
reader.onload = function (event) {
var image = new Image();
image.src = event.target.result;
image.onload = function () {
var maxWidth = 500,
maxHeight = 500,
imageWidth = image.width,
imageHeight = image.height;
if (imageWidth > imageHeight) {
if (imageWidth > maxWidth) {
imageHeight *= maxWidth / imageWidth;
imageWidth = maxWidth;
}
}
else {
if (imageHeight > maxHeight) {
imageWidth *= maxHeight / imageHeight;
imageHeight = maxHeight;
}
}
var canvas = document.createElement('canvas');
canvas.width = imageWidth;
canvas.height = imageHeight;
image.width = imageWidth;
image.height = imageHeight;
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0, imageWidth, imageHeight);
$('#example').attr('src', canvas.toDataURL(current_file.type));
}
}
reader.readAsDataURL(input.files[0]);
}
}
$("#inputfiles").change(function(){
readURL(this);
});
i am trying to add add text (water mark) in canvas generated image
here is my code.
html2canvas($("#frame"), {
onrendered: function (canvas) {
$("#outputImage").html(canvas);
}
what i should add in this code to add watermark mark in generated image
Inside the handler do the following:
html2canvas($("#frame"), {
onrendered: function (canvas) {
var ctx = canvas.getContext("2d"); // get 2D context of canvas
ctx.textBaseline = "top"; // start with drawing text from top
ctx.font = "20px sans-serif"; // set a font and size
ctx.fillStyle = "red"; // set a color for the text
ctx.fillText("WATERMARK", 20, 20); // draw the text at some position (x, y)
$("#outputImage").html(canvas);
}
}
There is also alignment modes using:
ctx.textAlign = "center"; // default: "start" = left-to-right/right-to-left
// depending on language, override with "left" or "right"
Check out Canvas.globalCompositeOperation. If you set it to the string 'lighter', it will lighten the pixels drawn by the next drawing command (such as fillText()). Here's a sample
<canvas id='canvas'></canvas>
<script>
var img = new Image();
img.src = 'http://www.javascripture.com/pic.jpg';
img.onload = function() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0, canvas.width, canvas.height);
// Draw the Watermark
context.font = '48px sans-serif';
context.globalCompositeOperation = 'lighter';
context.fillStyle = '#444';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillText('watermark', canvas.width / 2, canvas.height / 2);
};
</script>
I'm trying to make a canvas which can be operated via the mouse (dragging, drawing, clicking...), which would seem to be a simple task. Currently I have it drawing a line from where the mouse was pressed to where ever it is now, until it is released. But all the old versions of the line continue to be drawn regardless of whether I clear the canvas. I've tried using beginPath/closePath and fill instead of stroke; both approaches caused the line to never appear. Is there some... "delimiter" of draw operations that I haven't been able to find?
The source may be viewed and tested here, and I've also included it below.
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
</head>
<body>
<canvas id="test" width="640" height="480"></canvas>
<script type="text/javascript">
(function (){
// http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
function getMousePos(obj, evt){
// get canvas position
var top = 0;
var left = 0;
while (obj && obj.tagName != 'BODY') {
top += obj.offsetTop;
left += obj.offsetLeft;
obj = obj.offsetParent;
}
// return relative mouse position
var mouseX = evt.clientX - left + window.pageXOffset;
var mouseY = evt.clientY - top + window.pageYOffset;
return {
x: mouseX,
y: mouseY
};
}
var canvasElement = document.getElementById('test');
if(canvasElement.getContext){
var canvas = canvasElement.getContext('2d');
var start = null;
var end = null;
var drawing = false;
canvasElement.addEventListener('mousedown', function (event){
var mousePos = getMousePos(canvasElement, event);
start = mousePos;
end = mousePos;
drawing = true;
}, false);
canvasElement.addEventListener('mousemove', function (event){
if(drawing){
end = getMousePos(canvasElement, event);
}
}, false);
function release(event){
drawing = false;
}
canvasElement.addEventListener('mouseup', release, true);
var FPS = 30;
setInterval(function() {
canvas.clearRect(0, 0, canvasElement.width, canvasElement.height);
if(drawing && start != null){
canvas.moveTo(start.x, start.y);
canvas.lineTo(end.x, end.y);
canvas.stroke();
}
}, 1000/FPS);
}
})();
</script>
</body>
</html>
You need to create a path with beginPath and closePath, like so:
canvas.clearRect(0, 0, canvasElement.width, canvasElement.height);
if(drawing && start != null){
canvas.beginPath();
canvas.moveTo(start.x, start.y);
canvas.lineTo(end.x, end.y);
canvas.closePath();
canvas.stroke();
}
Otherwise you'll just keep adding lines to the existing path.
Know issue tumblr restricts width of videos to max500, i want them 700.
I've tried all the hacks and scripts listed, they won't work on my theme. Any suggestions?
This code was a useful starting point, but it didn't resize the embed tag, too, which means it won't work for all browsers.
<script type="text/javascript">
$(document).ready(function() {
var embedTag;
$('.video').each(function(index) {
$( this ).contents().each( function ( index ) {
if ($(this).is('object') || $(this).is('embed') || $(this).is('iframe')) {
var orgWidth = $(this).attr('width');
var orgHeight = $(this).attr('height');
var scale = orgHeight/orgWidth;
var targetWidth = 474;
var targetHeight = targetWidth * scale;
$(this).attr('width', targetWidth);
$(this).attr('height', targetHeight);
$(this).find('embed').attr('width', targetWidth);
$(this).find('embed').attr('height', targetHeight);
}
});
});
});
</script>
EDIT: A further revision, just in case your videos/media, whatever are embedded within other elements:
<script type="text/javascript">
$(document).ready(function() {
var embedTag;
$('.video, .media').each(function(index) {
$( this ).find('object, embed, iframe').each( function ( index ) {
var orgWidth = $(this).attr('width');
var orgHeight = $(this).attr('height');
var scale = orgHeight/orgWidth;
var targetWidth = 474;
var targetHeight = targetWidth * scale;
$(this).attr('width', targetWidth);
$(this).attr('height', targetHeight);
$(this).find('embed').attr('width', targetWidth);
$(this).find('embed').attr('height', targetHeight);
});
});
});
</script>
I had to do the same thing with the theme that I designed/developed for my Tumblr (ridiculouslyawesome.com). In order to get around the 500px max width that Tumblr seems to impose, I came up with a little javascript hack that finds all object/embed/iframe tags in the page and resizes them properly for the theme. This example uses jQuery, but you can alter it to whatever JS framework you prefer to use.
$(document).ready(function() {
var embedTag;
$('div.video_container').each(function(index) {
$( this ).contents().each( function ( index ) {
if ($(this).is('object') || $(this).is('embed') || $(this).is('iframe')) {
var orgWidth = $(this).attr('width');
var orgHeight = $(this).attr('height');
var scale = orgHeight/orgWidth;
var targetWidth = 960;
var targetHeight = targetWidth * scale;
$(this).attr('width', targetWidth);
$(this).attr('height', targetHeight);
}
});
});
});
So far this has worked pretty good for my theme in all the browsers that I have tested it on. Hopefully it will work for you too. Let me know if you run into any issues with it.
Ryan