将图像从平移点缩放到中心答案

【问题标题】：scale an image from a translated point to center将图像从平移点缩放到中心
【发布时间】：2017-02-28 12:35:14
【问题描述】：

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

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

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

Windows 照片查看器正是这样做的，以小提琴中的照片为例，您可以缩放图像，平移到女人的头发并再次缩放，它会放大头发。当你缩小时，它从头发开始到中心，同时保持图像在 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)';

有人可以帮忙吗？

【问题讨论】：

我写了一个函数，可以获取图像的变换原点（如“左上”等），它似乎工作正常。我现在的问题是知道每次缩小图像时要翻译多少我的父 div。实际上，缩小时图像有时会有边距

标签： javascript css scale css-transforms translate

【解决方案1】：

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

【讨论】：

我试过了，但我想我是在我头上。我尝试了 transform-origin = translateXpx translateYpx。但这似乎不起作用。是否应该基于上一次鼠标位置？
我做了一些事情，得到了正确的变换原点，如左上角 e.t.c

【解决方案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)';

【讨论】：