缩放后如何调整平移？答案

【问题标题】：How do I adjust panning after zoom?缩放后如何调整平移？
【发布时间】：2018-10-17 07:07:39
【问题描述】：

我有一个内置在 React 中的视图。简化后，它由一个相对于视口绝对定位的工作区组成。视口与浏览器窗口的大小相同。通常（但不总是）工作区会比视口大，如下图所示。

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

用户还可以放大和缩小。缩放以固定的步长完成，在本例中，系数为 0.25，即 +0.25 用于放大，-0.25 用于缩小。这会影响规模，进而影响工作空间的大小。在下面的图 2 中，用户放大了一级（比例 +0.25）。

工作区中的每个对象都与工作区成比例地缩放。在本例中，绿色三角形代表工作区中的一个对象。所以放大后，三角形会变大。当对象变大时，它在视口中的偏移量会发生变化。在本例中，它看起来像是向下向右生长。

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

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

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

提前谢谢你！

【问题讨论】：

【解决方案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和一个稍微不同的转换系统，但基本上是一样的。

【讨论】：