javascript - 从平移点到中心缩放图像

Question

首先，这是我的问题的 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)';

有人可以帮忙吗？

Answer 1

您是否尝试过使用 transform-origin？