放大/缩小图像，不时光标位置相同的地方

Question

我一直在挣扎与具有与地图一个组件的角度应用了一段时间。为了能够排除我已经做了在纯JavaScript重写测试功能，但我无法弄清楚如何解决这个任何其他问题。

我想要做的是同一种功能的，例如谷歌地图，如果你有光标移到某个特定的城市和鼠标滚轮放大，则地图将放大，但光标下保持城市在同一个地方。

我有这样的代码，它的功能“zoomImage”是给我的问题.. https://codepen.io/m-rten-sw-rd/pen/BMZvZX

任何人都可以指导我的权利在这？

function zoomImage(scale, mousePosInCointainer, mousePosInImage) {
  var imgElement = document.getElementById("img");
  imgElement.width = imgElement.width * scale;
  imgElement.height = imgElement.height * scale;

  /* TODO: Determine how I'm going to center the image over cursor */
}

Answer 1

我相信，以下是做你所需要的。

1. 确定转换原点（应该是中心）的图像。
2. 确定鼠标光标和该点之间的差异。
3. 缩放你的比例因子的差异。
4. 通过这种差异转换图像。