javascript - 如何更改图像缩放的原点？

Question

我有一个可以使用四个方向按钮移动的<img>内部<div>，例如：

图像显然比它的容器大，因此方向按钮可以将其移动到不同的方向。

还有一个缩放控件，您可以在其中放大和缩小。我只需将缩放因子作为百分比应用于基本宽度和高度，即可轻松设置缩放方法：

scale: function(zoom)
{
    image.width = baseWidth * zoom;
    image.height = baseHeight * zoom;
}


// Zoom in 50%.
Scene.scale(1.5);

这很好，但是图像从左上角缩放，这意味着图像看起来在放大期间被吸向左上角，而在缩小时又吐出。

我正在尝试从容器的中心应用缩放效果，如下所示：

但是我发现很难理解在缩放应用后移动图像所需的数学以产生这种效果。

我得到的最接近的是根据当前缩放和新缩放级别之间的差异移动图像，但它仍然略微偏离并在缩放时产生“弯曲”效果。

是否有用于重新定位图像的通用公式，以便它围绕不同的原点缩放（即不是左上角（0,0））。

这就是它目前的样子。

Answer 1

您必须获取原始坐标并计算原始图像的中心，即 x_center = x_orig + width_orig / 2; 然后您可以计算缩放图像的新 x 坐标：x_new = x_center - width_new / 2。同样适用于 y。然后将您的缩放图像移动到这些新坐标。如果您在每次缩放图像后执行此操作，它看起来好像是围绕其中心缩放的。