Implementing zoom on a fixed point, javascript/canvas
Posted
by csiz
on Stack Overflow
See other posts from Stack Overflow
or by csiz
Published on 2010-05-23T16:10:14Z
Indexed on
2010/05/23
16:31 UTC
Read the original article
Hit count: 197
I want to implement zooming on the mouse pointer with the mouse wheel. That is scaling the image while the point under the mouse pointer stays fixed.
Here is my code, which doesn't work very well
var scala = 1 + event.wheelDelta / 1000;
canvas.context.translate(-canvas.mouse.x * ( scala - 1 ) / canvas.scale,-canvas.mouse.y * ( scala - 1 ) / canvas.scale);
canvas.context.scale(scala,scala);
canvas.scale *= scala;
//canvas.scale is my variable that is initially set to 1.
//canvas.mouse is my variable that represents the mouse position relative to the canvas
© Stack Overflow or respective owner