javascript - 使用 Javascript，如何相对于视口的中心缩放元素？

Question

我本质上是在尝试制作一个非常简单的 Google Maps 克隆。

我有一个布局相当复杂的 div，我想对其进行缩放和拖动。我使用Pep库进行拖放，并使用 CSStransform: scale()进行缩放。

我的问题是该transform-origin点应该始终是视口的中心。当比例为默认级别 1 时很好，但当它有所不同时，它似乎不起作用。

我在 codepen 中有一个简化的测试用例，我在其中设置了一个小框作为该transform-origin点的可视化表示。理想情况下，这应该始终保持在视口的中间。

Answer 1

如果这仍然是悬而未决的问题：您必须计算从视口点到左上角的偏移，缩放并向后移动，或者换句话说，缩放视口。否则，您将从旧视口或原点缩放。如果你喜欢我可以在没有视口的情况下重写它。