I have a simple zoom feature which lets the user zoom in and out. I'm having an issue how ever when i zoom out the object gets smaller to the point that the boundaries become broken.
The idea is the red dot stays inside the circle but the red dot never moves, its stationary in position and size.
This for example is correct because the red dot is inside the circle:
Now if i zoom out and make the circle smaller the red dot ends up outside the circle like so:
The problem i have, is i don't know how to offset the circle to keep the red dot inside of the circle regardless of zooming scale. I have a working example here: http://jsfiddle.net/3wr885so/ if you zoom out you'll find the circle doesn't fix its offset to keep everything in the right place.
The two relevant functions I used for zooming and drawing are below:
Zoom function
function zoomObj(e){
var delta = e.wheelDelta,
mousePos = {};
mousePos.x = e.pagex;
mousePos.y = e.pageY;
var range = zoom.percentVal * zoom.modifier;
if(delta == 120){ //scroll in
var endVal = zoom.position + range;
} else { //scroll out
var endVal = zoom.position - range;
}
zoom.position = endVal;
zoom.percent = (zoom.position/zoom.range) * 100;
//need to set offsets to correct for new zoom here
}
Game Loop
function start(){
var radius = obj.radius/100*zoom.percent;
if(radius < 0){ radius = 0; }
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.beginPath();
ctx.arc(camera.offsetX, camera.offsetY, radius ,0,2*Math.PI, false);
ctx.restore();
ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
ctx.stroke();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.beginPath();
ctx.fillStyle = 'red';
ctx.fillRect(canvas.width/2-5,canvas.height/2-5,10,10);
ctx.stroke();
}
Any suggestions how i fix this problem :) ?