如何在缩放后调整声像定位？

Question

我有一个用React构建的视图。简化来说，它包括一个工作区，该工作区相对于视口绝对定位。视口与浏览器窗口大小相同。通常（但不总是），工作区将大于视口，如下图所示。 用户可以平移工作区，以在视口中显示不同的区域。平移设置了工作区相对于视口的负偏移量（PanX和PanY），以像素为单位。

用户还可以缩放。缩放是按固定步长进行的，在此示例中，缩放因子为0.25，即缩小-0.25，放大+0.25。这会影响比例尺，从而影响工作空间的大小。在下面的图2中，用户已经缩小了一步（比例尺+0.25）。

工作区中的每个对象都按比例缩放。在这个例子中，绿色三角形代表工作区中的一个对象。因此，在放大后，三角形会变大。当对象变大时，其在视口中的偏移量也会改变。在这个例子中，它看起来像是向下和向右增长。

我想要实现的是，用户缩放后，视口的中心仍然保持居中。为了实现这一点，我需要调整 PanX 和 PanY，使视口保持在缩放前在工作区中心点上方。

所以我的问题是：当缩放时，如何使视口始终围绕工作区的同一点居中？

计算应该得出新值，我可以将其设置为PanX和PanY的工作区，从而使视口居中。请记住，只要视口的任何边缘都不在工作区之外（就像下图所示），视口可以放置在任何位置。

提前感谢您！

- tkahn

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;

我在这里写了一个教程（链接），它使用了SVG和略微不同的变换系统，但基本上是相同的东西。

- Peter Collingridge