Question

首先，这是我的问题的小提琴：

基本上我在一个容器中有一个图像，它本身位于另一个容器内。放大图像后，使用滑块可能无法放入其父容器中。然后我使用CSS translate来平移图像。这将设置两个变量translateX和translateY（请参阅makeImageDraggable方法）。平移到某个位置后，我希望能够：

放大时，从此点放大。在向下缩放时，从此点缩小到中心

Windows Photo Viewer就是这样做的，在小提琴中使用照片作为例子，你可以缩放图像，平移到女人的头发并再次缩放，它会扩大头发。缩小时，它从头发开始到中心，同时保持图像在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。无论如何，小提琴更好地解释了。

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

将图像从转换点缩放到中心

2 个答案: