javascript - 缩放后如何调整平移？

Question

我有一个用 React 构建的 View 。简化后，它由一个相对于视口(viewport)绝对定位的工作区组成。视口(viewport)与浏览器窗口的大小相同。通常(但不总是)工作区会比视口(viewport)大，如下图所示。

用户可以平移工作区，在视口(viewport)中显示它的不同区域。平移设置工作区相对于以像素表示的视口(viewport)(PanX 和 PanY)的负偏移。

用户还可以放大和缩小。缩放以固定步长完成，在此示例中，缩放系数为 0.25，即 +0.25 用于放大，-0.25 用于缩小。这会影响比例，进而影响工作区的大小。在下面的图 2 中，用户放大了一步(比例 +0.25)。

工作区中的每个对象都按比例缩放到工作区。在此示例中，绿色三 Angular 形表示工作区中的对象。所以放大之后，三 Angular 形会变大。当对象变大时，它在视口(viewport)中的偏移量将发生变化。在此示例中，它看起来像是向下和向右增长。

我想要完成的是，在用户放大或缩小后，视口(viewport)的中心仍应居中。为实现这一点，我需要调整 PanX 和 PanY，使视口(viewport)保持在缩放前它在工作区中居中的点的中心。

所以我的问题是:如何在放大和缩小时使视口(viewport)居中于工作区中的同一点？

计算应该会产生新值，我可以为以视口(viewport)为中心的工作空间设置 PanX 和 PanY。请记住，视口(viewport)可以放置在任何位置，只要它的任何边缘都不在工作区之外(如下图所示)。

提前致谢!

Answer 1

如果你想保留屏幕中央的任何东西，那么定义:

const centerX = screen.width / 2;
const centerY = screen.height / 2;

然后，当您按值scale(例如 0.25 或 -0.25)缩放时，您需要调整 PanX 和 PanY:

PanX -= scale * centerX;
PanY -= scale * centerY;

我写了一个教程here ，它使用 SVG 和稍微不同的转换系统，但基本上是同一件事。