如何使用 Javascript 和 Processing 创建 Google Maps 样式的缩放

如何解决如何使用 Javascript 和 Processing 创建 Google Maps 样式的缩放

我的地图程序以及标记已经有了平移和缩放功能，但是我目前拥有的缩放代码偶尔会起作用，并且感觉不自然。似乎离地图中心越远，情况就会变得越糟。我一直在尝试实现类似于 Google 地图中看到的缩放，但运气不佳。

这是当前的缩放代码：

//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;
      }               
    }
  }

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

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();
  }
}

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

可以查看完整代码 here，可以查看项目中的操作 here。

任何帮助将不胜感激。

解决方法

这是一个我发现自己每次做涉及交互式缩放的事情时都必须考虑的问题。我总是惊讶于 MS Paint 等程序中的缩放功能有多糟糕。

您实际上非常接近，我认为您的想法是正确的：找到光标和图像中心之间的距离并正确缩放。这是我喜欢的想法：缩放是将值 (centerX - mouseX) 缩放一定量（与 Y 相同）。在模拟代码中，这看起来像

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

在实际代码中，结果证明你只是在做一些代数：

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

顺便说一句，这与您拥有的缩放比例之间存在关键区别。您使用的是倒数函数，而此版本是指数函数。我认为 Google 使用的可能更多地是指数型的。

这是我的完整改动（基于猜测您如何定义 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));
}