如何使用Javascript和处理创建谷歌地图风格的缩放

我已经为我的地图程序准备了平移和缩放，以及标记，但是我现在的缩放代码偶尔工作，感觉不自然。似乎离地图中心越远，情况就越糟。我一直在尝试实现类似谷歌地图的缩放效果，但运气不佳

这是当前的缩放代码：

//Zoom function
function mouseWheel(event) {
  var e = event.deltaY;

  //Zoom in
  if (e < 0) {
    if (scale < maxScale) {
      scale++;
      imgW = (int)(imgOGW / (1 + (zoomFactor * abs(scale))));
      imgH = (int)(imgOGH / (1 + (zoomFactor * abs(scale))));

      centerX = centerX - (int)(zoomFactor * (mouseX - centerX));
      centerY = centerY - (int)(zoomFactor * (mouseY - centerY));
    }
  }

  //Zoom out
  if (e > 0) {
    if (scale > minScale && !(windowWidth > 1840 && scale == -3)) {
      scale--;
      imgH = (int)(imgOGH / (1 + (zoomFactor * abs(scale))));
      imgW = (int)(imgOGW / (1 + (zoomFactor * abs(scale)))):

      centerX = centerX + (int)((mouseX - centerX)
        * (zoomFactor / (zoomFactor + 1)));
      centerY = centerY + (int)((mouseY - centerY)
        * (zoomFactor / (zoomFactor + 1)));

      if (centerX - imgW / 2 > 0) {
        centerX = imgW / 2;
      }

      if (centerX + imgW / 2 < width) {
        centerX = width - imgW / 2;
      }

      if (centerY - imgH / 2 > 0) {
        centerY = imgH / 2;
      }

      if (centerY + imgH / 2 < height) {
        centerY = height - imgH / 2;
      }               
    }
  }

//缩放功能
功能鼠标滚轮（事件）{
var e=event.deltaY；
//放大
if（e<0）{
if（比例<最大比例）{
scale++；
imgW=（int）（imgOGW/（1+（动物因子*abs（比例））；
imgH=（int）（imgOGH/（1+（动物因子*abs（比例））；
centerX=centerX-（int）（zoomFactor*（mouseX-centerX））；
centerY=centerY-（int）（zoomFactor*（mouseY-centerY））；
}
}
//缩小
如果（e>0）{
如果（比例>最小比例&&！（窗口宽度>1840&&比例==-3））{
比例--；
imgH=（int）（imgOGH/（1+（动物因子*abs（比例））；
imgW=（int）（imgOGW/（1+（缩放因子*abs（比例）））：
centerX=centerX+（int）（（鼠标-centerX）
*（zoomFactor/（zoomFactor+1））；
centerY=centerY+（int）（（鼠标-centerY）
*（zoomFactor/（zoomFactor+1））；
如果（centerX-imgW/2>0）{
centerX=imgW/2；
}
如果（中心X+imgW/2<宽度）{
centerX=宽度-imgW/2；
}
如果（中心-imgH/2>0）{
centerY=imgH/2；
}
if（中心+imgH/2<高度）{
centerY=高度-imgH/2；
}               
}
}

下面是它在绘制循环中的显示方式：

function draw() {
  var zoomModifier = (1 + (zoomFactor * abs(scale)));

  background(0);
  imageMode(CENTER);
  image(map, centerX, centerY, imgW, imgH);

  for (var m of markers) {
    if (m.x/zoomModifier > viewX - (width/2) && m.x/zoomModifier < viewX + (width/2) && m.y/zoomModifier > viewY - (height/2) && m.y/zoomModifier < viewY + (height/2)) m.display();
  }
}

函数绘图（）{
var zoomModifier=（1+（zoomFactor*abs（比例））；
背景（0）；
图像模式（中心）；
图像（地图、centerX、centerY、imgW、imgH）；
for（标记的var m）{
如果（m.x/zoomModifier>viewX-（宽度/2）和&m.x/zoomModifierviewY-（高度/2）和&m.y/zoomModifier

CenterX最初设置为整个地图宽度的一半（CenterY设置为高度的一半）

可以查看完整的代码，也可以看到项目的运行情况

---

任何帮助都将不胜感激。

每当我做一些涉及交互式缩放的事情时，我发现自己不得不考虑这个问题。我总是惊讶于MS Paint等程序中的缩放功能是多么糟糕

实际上，您离得很近，我认为您的想法是正确的：找到光标和图像中心之间的距离并适当地缩放。下面是我的想法：缩放是将值

（centerX-mouseX）

缩放一定量（与

Y

相同）。在模拟代码中，这看起来类似于

(centerX - mouseX) = zoom * (centerX - mouseX);

在实际代码中，你只需要做一些代数：

centerX = mouseX + (zoom * (centerX - mouseX));

顺便说一句，这和你的缩放有一个关键区别。你使用的是一个倒数函数，而这个版本是一个指数。我认为谷歌使用的可能更接近指数

以下是我的全部改动（基于猜测您如何定义

zoomFactor

）：

function mouseWheel(event) {
  zoom = pow(1 + zoomFactor, event.deltaY/125);
  imgW *= zoom;
  imgH *= zoom;
  centerX = mouseX + (zoom * (centerX - mouseX));
  centerY = mouseY + (zoom * (centerY - mouseY));
}