Question

我有一个内置于React中的视图。简化后，它包含一个相对于视口绝对定位的工作空间。视口的大小与浏览器窗口的大小相同。正常情况下（但并非总是如此），工作空间将大于视口，如下图所示。

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

用户还可以放大和缩小。缩放以固定的步骤进行，在此示例中，因子为0.25，即+0.25用于放大，-0.25用于缩小。这会影响比例，进而会影响工作区的大小。在下面的图2中，用户放大了一个步骤（比例为+0.25）。

工作空间中的每个对象都与工作空间成比例地缩放。在此示例中，绿色三角形表示工作空间中的对象。因此，放大后，三角形将变大。当对象变大时，其在视口中的偏移将发生变化。在此示例中，它看起来像向下和向右生长。

我要完成的是在用户放大或缩小后，视口的中心仍应居中。为此，我需要调整PanX和PanY，以使视口保持在工作区中缩放之前居中的点居中。

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

计算将产生新值，我可以为以视口为中心的工作区为PanX和PanY设置新值。请记住，视口可以放置在任何地方，只要其边缘都没有在工作空间之外（如下图所示）即可。

提前谢谢！

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和稍微不同的转换系统，但是基本上是同一回事。