首先,这是我的问题的 fiddle :
https://jsfiddle.net/0u74faz6/1/
基本上我在一个容器中有一个图像,它本身在另一个容器中。图像按比例放大后,使用 slider 可能不适合它的父容器。然后我使用 CSS translate 来平移图像。这会设置两个变量 translateX 和 translateY(请参阅 makeImageDraggable 方法)。平移到某个位置后,我希望能够:
放大时,从这一点开始缩放。 并且在向下缩放的同时,从这个点向中心缩小</p>
Windows 照片查看器正是这样做的,以 fiddle 中的照片为例,您可以缩放图像,平移到女人的头发并再次缩放,它会放大头发。缩小时,它从头发开始向中心移动,同时保持图像在 div 中的中心位置。
我为此使用的主要代码在方法 scaleImage 中,此处:
translateX = translateX/scale, translateY = translateY/scale;
img.style.transform = 'scale3d(' + currentScale + ',' + currentScale + ', 1) ' + 'rotate(' + (currentRotation -90) + 'deg)';
parent.style['-webkit-transform'] = 'translate(' + translateX + 'px, ' + translateY + 'px)';
有人可以帮忙吗?
最佳答案
您是否尝试过使用 transform-origin
?
关于javascript - 从平移点到中心缩放图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42508923/