Javascript 缩放后如何调整平移？

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

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

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

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

我想实现的是，在用户放大或缩小后，视口的中心仍应居中。要完成此操作，我需要调整“平移”和“平移”，以便视口在缩放之前居中的工作空间点上保持居中

因此，我的问题是：放大和缩小时，如何使视口居中于工作区中的同一点上？

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

---

提前谢谢你

如果要将屏幕中心的内容保留在屏幕中心，请定义：

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

然后，当您按值

scale

（例如0.25或-0.25）进行缩放时，您需要调整

PanX

和

PanY

：

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

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