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

Question

我实际上是在尝试制作一个非常简单的 Google map 克隆版。

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

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

我有一个简化的测试用例 in a codepen ，我在其中设置了一个小框作为 transform-origin 点的可视化表示。理想情况下，它应该始终位于视口(viewport)的中间。

Answer 1

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