7

Possible Duplicate:
Zoom in on a point (using scale and translate)

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
Community
  • 1
  • 1
csiz
  • 4,742
  • 9
  • 33
  • 46
  • Doesn't do anything, or doesn't behave correctly – Eric May 23 '10 at 16:20
  • doesn't behave correctly, mouse.x is in window coordinates while translate uses the scaled coordinates, that's where I think is the problem. – csiz May 23 '10 at 16:24
  • also if I use scale(1.3,1.3);scale(0.7,0.7); the object returns to the original position but 1*1.3*0.7!=1 – csiz May 23 '10 at 16:26
  • mouse.x is in canvas coordinates, or screen coordinates? – Eric May 23 '10 at 16:34
  • 1.3*0.7 is nearly 1 (0.91). Can you put the full code on http://www.jsfiddle.net/? – Eric May 23 '10 at 16:50

3 Answers3

1

Without looking at anything else, you'll need 2 translates: one before to move the mouse point to (0,0), and one after to move (0,0) (now with the zoomed picture) to where the mouse was.

Claudiu
  • 224,032
  • 165
  • 485
  • 680
1

Solved it and the answer is here: same question

Community
  • 1
  • 1
csiz
  • 4,742
  • 9
  • 33
  • 46
0

My guess is that you need to do a canvas.context.restore() after each redraw, if you are saving the zoom level.

Eric
  • 95,302
  • 53
  • 242
  • 374