How js zooms the picture around the mouse.

I currently use transform"s translate to pan the picture and use scale to zoom the picture.
then want to implement the function that the center point of zooming depends on the mouse position, but find that if you have already zoomed, modifying the transform-origin will cause the image to flash.
before zooming, move the target to the center and then zoom in on whether the sensory interaction is good. Ask the gods who have achieved similar functions to give some advice on how to think about it.

Mar.01,2021

the increased distance of the translateX = (0.5-the ratio of the mouse position on the x axis) * (the width after scaling-the width before scaling), the increased distance of
translateY = (0.5-the ratio of the mouse position on the y axis) * (the height after scaling-the height before scaling).


directly set the mouse center to transform-origin


is similar to Taobao commodity picture magnification of the kind of bar, there are a lot of other people's code under the search can refer to.
I haven't written about this feature, but if you want to do it, you usually have a mature plug-in implementation.
Link description


1. Use left and top instead of translate translation.
2, translate child element, scale parent element.
now you can think of two


transform-origin. Don't move, just calculate the new scale and translate based on the mouse position and the current scale and translate.


iviewer.js


blink should be due to the fact that the deformation origin is based on the unscaled image and will not follow the zoomed image, so it will be moved to the position relative to the original image deformation origin to zoom


how does the landlord achieve it?


how does the landlord realize it? I also need to use the translate scale zoom problem, the position is always offset, boss can pay to help me solve, really very urgent, please

Menu