2010-05-23 16 views
6

Duplicar posibles:
Zoom in on a point (using scale and translate)zoom sobre un punto fijo, Javascript/lienzo

Quiero aplicar el zoom en el puntero del ratón con la rueda del ratón. Eso es escalar la imagen mientras el punto debajo del puntero del mouse permanece fijo.

Aquí está mi código, que no funciona muy bien

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 
+0

no hace nada, o no se comporta correctamente – Eric

+0

no se comporta correctamente, mouse.x está en coordenadas de la ventana, mientras que traducir utiliza las coordenadas de escala, eso es donde creo que es el problema – csiz

+0

también si uso escala (1.3,1.3); escala (0.7,0.7); el objeto vuelve a la posición original pero 1 * 1.3 * 0.7! = 1 – csiz

Respuesta

0

Mi conjetura es que usted tiene que hacer un canvas.context.restore() después de cada redibujado, si va a guardar el nivel de zoom.

1

Sin mirar nada más, necesitará 2 traduce: una antes para mover el punto del mouse a (0,0), y una después para mover (0,0) (ahora con la imagen ampliada) a donde el mouse fue

Cuestiones relacionadas