I'm adding an image to the lower right hand corner of a chart in the chart loading event using the chartWidth and chartHeight properties to calculate the left / top offsets.
chart.renderer.image('img.png', left, top, 30, 30).add();
When the browser window resizes the chart also resizes, but the image remains fixed at the position set above. When the chart shrinks in width, I'd like to re-position the image based on the new chart width.
Is it possible to move the element using some javascript or do I have to remove it and make the above call again with the new position?
Why not on resize remove the image, then once the chart is done being resized, recalculate the position and add the image back?
I ended up storing a reference to the original width of the chart and the image. Then on resize, I'm shifting the image by the offset of the two widths -
var img, originalWidth;
function chartLoad(chart) {
var top = 100, left = 100;
originalWidth = chart.chartWidth;
img = chart.renderer.image('img.png', left, top, 30, 30).add();
}
function chartResize(e) {
var offset = e.target.chartWidth - originalWidth;
img.translate(offset, 0);
}
Related
I am trying to get x and y co-ordinate on mouse move event of image
Now there are 2 scenarios which i think is utmost important for getting exact co-ordinates
Note : also i need to put zoomer on image hover
If you want to apply zoomer then image must be displayed in less
height and width div than original width and height
In first scenario, i will display the image as it is without any height and width limitations
But in this scenario i won't be able to apply zoomer as per mentioned in above note
Suppose i have image of pixel 2000x1500 then below code works very smoothly
var mouseMove = function(e) {
var X = Math.round((e.pageX - img.offset().left);
var Y = Math.round((e.pageY - img.offset().top));
};
In second scenario, i will display image in fix width and height div which will be smaller than image width and height
Suppose div width and height is 850x750 and you are displaying image of dimension 2000x1500 in that div
Now to get exact x and y co-ordinate code is
$(document).ready(function() {
$('#competition').on('load', function(e) {
naturalWidth = e.target.naturalWidth;
});
});
var mouseMove = function(e) {
var img = $('#competition'); // div in which image is loaded
// naturalWidth is origional width of image
// img.width() is width of div
ratio = (naturalWidth / img.width());
var X = Math.round((e.pageX - img.offset().left) * ratio);
var Y = Math.round((e.pageY - img.offset().top) * ratio);
};
Now what happens in second scenario is, when i move mouse horizontally, it gives 3 pixel difference after each mouse move event for x co-ordinate like 1 4 7 10 13
But i want to catch every single pixel of image
Any help would be greatly accepted...
So I have a bunch of divs that are absolute to an overlay. The user creates a square div by dragging on the overlay. If you were to create a div and then zoom in and out, the div stays positioned in the same spot since it is absolute to the overlay as mentioned before.
However here's where the problem is. You are able to save the div location (top, left, height, width) to a .json and load the .json to show all of your previously saved divs. This works fine.... if you save and load on the same browser zoom percentage.
If you were to draw divs on 150% zoom, for example, and try to load the div's position on 100% zoom, the position is altered (as to make up for the zoom I presume).
I tried forcing the window zoom to 100% on save, but that didn't work, and I am kind of stuck now. Does anyone have any suggestions?
Following Alex's advice to use percentages, I was able to come up with a solution that works perfectly.
In the method that sets the top and left of the div - I changed that from pixels relative to the parent to percentage relative to the parent.
So this
{
width = endX - startX;
left = startX;
height = endY - startY;
top = startY;
}
Became this
{
width = endX - startX;
var percentageLeft = startX / parent.offsetWidth * 100;
left = percentageLeft;
height = endY - startY;
var percentageTop = startY / parent.offsetHeight * 100;
top = percentageTop;
}
and then by changing the saving/loading to look for percentages instead of pixels, I was able to make this work!
I have a canvas element in which I have drawn a circle. How do I give the responsiveness to the canvas element?
If the width of the browser changes I need to change the radius by some amount, if the height of the browser changes I need to change the radius by some amount.
For that how do I need to calculate the changing ratio?
var canvasWidthRatio = currentDivWidth / initialDivWidth;
var canvasHeightRatio = currentHeight / initialDivHeight;
radius = (I need something here)
It appears you're letting the canvas resize based on its div container. That can introduce a problem.
If you resize the canvas's CSS using different percentages for width & height then the canvas content will distort--it will stretch.
To avoid distortion you must resize the canvas width & height proportionally (by the same percentage). The proportionally resized canvas will not necessarily fill the new div size as it did before.
An alternative:
Resize the canvas element itself & use the scaling transformation to redraw your content
This way you won't need to recalculate your circle's radius or position. You can use the exact same drawing commands that were originally used to draw your circle. The canvas's built-in scaling will do all the recalculations for you!
Get a reference to your canvas & your div container and save the original div size
var divcontainer=document.getElementById('mydiv');
var canvas=document.getElementById('mycanvas');
var context=canvas.getContext('2d');
var originalWidth=divcontainer.width;
var originalHeight=divcontainer.height;
Resize the canvas element to the new div size.
var newWidth=divcontainer.width;
var newHeight=divcontainer.height;
// Notes:
// Resizing the canvas element will clear its content
// This alternative allows the canvas to resize disproportionately
canvas.width=newWidth;
canvas.height=newHeight;
Use context scaling to automatically resize the canvas. Any redrawn content will scale automatically using the same original drawing commands.
// calculate the scaling percentage necessary such that
// new content will fit on the canvas
var scaleFactor=Math.min((newWidth/originalWidth),(newHeight/originalHeight));
// scale the canvas
context.scale(scaleFactor);
// now redraw all content (your circle) using their original sizes & coordinates
// unscale the canvas
// (scaling is cumulative, so this cleans up for the next resizing)
context.scale(-scaleFactor);
try this
var radius = 10; // set default radius to start with
var radiusX = Math.min(currentDivWidth , radius); // set horizontal radius to be atleast as wide as width of div
var radiusY = Math.min(currentDivHeight , radius); // set vertical radius to be atleast as high as height of div
radius = Math.min(radiusX, radiusY); // now set the radius of the circle equal to the minimum of the two values so that it is a perfect circle
context.arc(0, 0, radius, 0, 2*Math.PI, false); // use new radius to draw a brand new circle
try using like this:
radius = Math.min(radiusX, radiusY);// here radiusX and radiusY will be currentDivWidth,currentDivHeight resp.
context.arc(0, 0, radius, 0, 2*Math.PI);
see a better description here:http://www.w3schools.com/tags/canvas_arc.asp
I'm trying to create a zoom able image upon click of a button, however the image should be zoomed centered on the view able area, as the image may be bigger than the container.
I've created a fiddle here to illustrate what I want, I'd obviously usually hide the image outside the container, I'm not bothered about that part just now, also put in a border overlay to show the bounds of the container.
I've done the zoom part based on the image ratio, I just need to work out the new top and left css values and apply it to the image after the zoom. Also the image is draggable, so once you move the image it must take into account the position of the image.
Basically, the centrol point of the image within the red container must remain the same after the zoom, so you are effectly zooming in on whatever is at the middle of the container.
http://jsfiddle.net/wFaFg/1/
why do you we need code to link to jsfiddle?
Thanks
edit:
http://jsfiddle.net/FU55w/
getting close with the above fiddle, but still not zooming completely on central point
So I found the solution,
It is slightly more complex than just finding out how much the image increased in size.
I work out the x & y value of the center point of the image within the container, by taking the left and top value, turning it positive then adding half the container width and height.
var x = Math.abs(image.position().left) + container.width() / 2
var y = Math.abs(image.position().top) + container.height() / 2
I work out the ratio of the image scale by dividing the new width by the old width, then I can multiply the x & y value by the ratio.
Then take the difference between the new x and y away from the current left and top.
image.position().left - (newX - x)
image.position().top - (newY - y)
Complete fiddle:
http://jsfiddle.net/fbd2mk5q/
Try the new fiddle based on your comment:
http://jsfiddle.net/wFaFg/6/
$("#zoom").on("click", function(e)
{
var container = $("#container");
var image = $("#container img");
var curLeft = image.position().left;
var curTop = image.position().top;
var ratio = image.height() / image.width();
image.css({
height: image.height() + (20 * ratio),
width: image.width() + (20 * ratio),
left: curLeft - ((20 * ratio)/2),
top: curTop - ((20 * ratio)/2)
});
});
I need to grab the following coordinates topX, topY, bottomX, bottomY, as they represent a box around a source image. They are equal to:
topX = X coordinate at top left corner on source image
topY = Y Coordinate at top left corner on source image
bottomX = X coordinate at bottom right corner on source image
bottomY = Y coordinate at bottom right corner on source image
Here is a sample plugin that calculates these values. The source image width = 1024px and the height = 750px:
http://thindery.com/jsfiddle/crop_move.html
However, I have a new plugin that does more functionality than the above plugin, but I can't figure out how to get these 4 variables I need.
here is the jsfiddle http://jsfiddle.net/thindery/cv96e/
i tried to create my own boxedCoords(), based on how the original plugin calculated the values. However i'm still new to jQuery and I can't get it to work.
anybody have an idea how I can get these 4 variables?
This was solved. For the solution: jsfiddle