从平移点到中心缩放图像

Question

首先，fiddle 我的问题是：

基本上我在一个容器中有一个图像，它本身在另一个容器中。图像按比例放大后，使用滑块可能不适合它的父容器。然后我使用 CSS translate 平移图像。这会设置两个变量 translateX 和 translateY（请参阅 makeImageDraggable 方法）。平移到某个位置后，我希望能够：

放大时，从这一点开始放大。并且在向下缩放的同时，从这个点向中心缩小

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 吗？

Answer 2

这是我想到的。它并不完美，但它确实从受影响的区域缩放，同时将图像放入容器中

https://jsfiddle.net/daibatzu/0u74faz6/6/

它计算用户将图像转换到的区域的中点，并检查它是 y 轴的上下或中心，还是 x 轴的左中右。然后使用它，确定从哪个区域移动父 div。无论如何，fiddle 解释得更好。

   // set transformOrigin and translate parent div
    parent.style.transformOrigin = transformOriginX  + 'px ' + transformOriginY + 'px';
    parent.style.transform = 'translate(' + moveX + 'px, ' + moveY + 'px)';

从平移点到中心缩放图像

scale an image from a translated point to center

javascript

css

translate

scale

css-transforms