Zoom de imagen centrado en la posición del mouse

3 minutos de lectura

Zoom de imagen centrado en la posicion del mouse
Gaurav_soni

Estoy escribiendo un script con Fabric.js para ampliar una imagen en la posición actual del mouse. He hecho algunos progresos, pero hay un error en alguna parte.

Caso 1: Mantenga el mouse en un punto y haga zoom con la rueda del mouse.

Resultado: funciona perfectamente, la imagen se amplía en ese píxel en particular.

Caso 2: Acérquese un poco en una posición (3-5 veces con la rueda del mouse), luego mueva el mouse a una nueva posición y acérquese allí.

Resultado: funciona bien para el primer punto, pero después de moverse a otro punto y hacer zoom, la posición de la imagen es incorrecta.

Mi código está en este violín:

https://jsfiddle.net/gauravsoni/y3w0yx2m/1/

Sospecho que hay algo mal con la lógica de posicionamiento de la imagen:

imgInstance.set({top:imgInstance.getTop()-newMousY,left:imgInstance.getLeft()-newMousX});

¿Qué está yendo mal?

  • ¿Por qué no utilizar la función de zoom y panorámica del lienzo? ¿O necesita hacer zoom solo en el objeto de la imagen y nada más? Mira esto: fabricjs.com/kitchensink/#zoom (utilice el desplazamiento para hacer zoom) El uso del zoom del lienzo le permitirá ampliar más objetos en el lienzo si es necesario sin hacer cálculos. Puedo hacer un violín si quieres explorar esta posibilidad.

    – Andrea Bogazzi

    05 may. 15 en 09:10


  • @AndreaBogazzi necesito hacer zoom en esa posición particular donde se coloca el mouse, la función de escala del lienzo solo escala la imagen

    – Gaurav_soni

    05 may. 15 en 12:39

  • Sí, estoy hablando de la función de panorámica a punto y zoom a punto de FABRICJS. No uno de lona. Veo que estás usando fabricjs para eso.

    – Andrea Bogazzi

    05 mayo 2015 en 13:09

  • @AndreaBogazzi ah, ya veo. Se perdió esta parte de la documentación. Déjame darle una oportunidad a esto

    – Gaurav_soni

    05 mayo 2015 en 14:15

Zoom de imagen centrado en la posicion del mouse
Michael Laszló

La clave para resolver este rompecabezas es comprender cómo se amplía la imagen. Si usamos un factor de zoom de 1,2, la imagen se vuelve un 20% más grande. Le asignamos 1.2 a la variable factor y haz lo siguiente:

image.setScaleX(image.getScaleX() * factor);
image.setScaleY(image.getScaleY() * factor);

La esquina superior izquierda de la imagen permanece en el mismo lugar mientras se amplía la imagen. Ahora considere el punto debajo del cursor del mouse. Cada píxel arriba ya la izquierda del cursor se ha vuelto un 20 % más grande. Esto desplaza el punto debajo del cursor un 20% hacia abajo y hacia la derecha. Mientras tanto, el cursor está en la misma posición.

Para compensar el desplazamiento del punto bajo el cursor, movemos la imagen para que el punto vuelva a estar bajo el cursor. El punto se movió hacia abajo y hacia la derecha; movemos la imagen hacia arriba y hacia la izquierda la misma distancia.

Tenga en cuenta que es posible que la imagen se haya movido en el lienzo antes de la operación de zoom, por lo que la posición horizontal del cursor en la imagen es currentMouseX - image.getLeft() antes de hacer zoom, y lo mismo para la posición vertical.

Así es como calculamos el desplazamiento después de hacer zoom:

var dx = (currentMouseX - image.getLeft()) * (factor - 1),
    dy = (currentMouseY - image.getTop()) * (factor - 1);

Finalmente, compensamos el desplazamiento moviendo el punto hacia atrás debajo del cursor:

image.setLeft(image.getLeft() - dx);
image.setTop(image.getTop() - dy);

Integré este cálculo en su demostración e hice el siguiente violín:

https://jsfiddle.net/fgLmyxw4/

También implementé la operación de alejamiento.

  • Muchas gracias !! He estado atascado durante 2 días en esto. puede otorgar una recompensa después de 8 horas

    – Gaurav_soni

    05 may. 15 en 06:41

  • ¿Alguien puede implementar lo mismo usando solo lienzo? sin ninguna biblioteca?

    – Krunal Panchal

    01 jul.


  • ¿Cómo se usa esto si el origen de la imagen está en el centro, no en la esquina superior izquierda?

    – JokerMartini

    17 oct.

  • Oh Dios, gracias @Michael Laszlo.

    – mattis

    13 dic. 21 en 14:14

.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad