放大/缩小图像，将光标下方的位置保持在同一位置

Question

我一直在努力使用带有一个组件和地图的Angular应用程序。为了排除其他任何问题，我已经用纯JavaScript进行了重写以测试功能，但我不知道如何解决此问题。

我要执行的功能与例如Google Maps中的功能相同，如果您将光标放在特定城市上并使用鼠标滚动进行放大，则地图会放大但将城市保持在同一位置在光标下方。

我有这段代码，正是函数“ zoomImage ”给我带来了问题。 https://codepen.io/m-rten-sw-rd/pen/BMZvZX

有人可以在这方面指导我吗？

spring.profiles.active=dev

Answer 1

我相信以下是您需要做的。

1. 确定图像的变换原点（应位于中心）。
2. 确定鼠标光标和该点之间的差异。
3. 根据您的比例因子缩放差异。
4. 通过这种差异翻译图像。