javascript - SVG 放大鼠标 - 数学模型

Question

在你思考“为什么这个人就这个问题寻求帮助之前，这肯定已经实现了 1000 倍”——虽然你基本上是正确的，但我已经尝试用几个开源库来解决这个问题，但我现在在这里。

我正在尝试从头开始实现基于 SVG 的“放大鼠标滚轮，聚焦鼠标”。

我知道有很多库可以实现这一点，d3 和 svg-pan-zoom 仅举几例。不幸的是，我使用这些库的实现没有达到我的预期。我希望我能从社区获得一些关于此类 UI 功能的底层数学模型的帮助。

基本上，所需的行为就像谷歌地图，用户将鼠标悬停在某个位置上，他们滚动鼠标滚轮(向内)， map 图像的比例增加，而悬停的位置变为水平和视口(viewport)的垂直中心。

当然，我可以访问视口(viewport)的宽度/高度和鼠标的 x/y。

在这个例子中，我只关注 x 轴，视口(viewport)是 900 个单位宽，正方形是 100 个单位宽，它的 x 偏移是 400 个单位，比例是 1:1

<g transform="translate(0 0) scale(1)">

假设鼠标 x 位置处于或接近 450 个单位，如果用户滚动直到比例达到 2:1，我预计 x 偏移量将达到 -450 个单位，像这样将焦点居中。

<g transform="translate(-450 0) scale(2)">

x 和 y 偏移量需要根据当前比例/鼠标偏移量在滚轮滚动的每个增量上重新计算。

我的所有尝试都完全达不到预期的行为，欢迎任何建议。

虽然我很感激任何帮助，但请不要回答对第 3 方库、jQuery 插件和类似性质的东西的建议。我的目的是从一般意义上理解这个问题背后的数学模型，我对 SVG 的使用主要是为了说明。

Answer 1

我通常做的是维护三个变量 offset x offset y 和 scale。它们将作为容器组的转换应用，例如您的元素 <g transform="translate(0 0) scale(1)"> .

如果鼠标悬停在原点上，则新的平移计算起来很简单。您只需将偏移量 x 和 y 乘以比例差:

offsetX = offsetX * newScale/scale
offsetY = offsetY * newScale/scale

您可以做的是平移偏移量，使鼠标位于原点。然后你缩放然后你把所有的东西都翻译回去。看看这个 typescript 类，它有一个 scaleRelativeTo 方法来做你想做的事:

export class Point implements Interfaces.IPoint {
    x: number;
    y: number;

    public constructor(x: number, y: number) {
      this.x = x;
      this.y = y;
    }

    add(p: Interfaces.IPoint): Point {
      return new Point(this.x + p.x, this.y + p.y);
    }

    snapTo(gridX: number, gridY: number): Point {
      var x = Math.round(this.x / gridX) * gridX;
      var y = Math.round(this.y / gridY) * gridY;
      return new Point(x, y);
    }

    scale(factor: number): Point {
      return new Point(this.x * factor, this.y * factor);
    }

    scaleRelativeTo(point: Interfaces.IPoint, factor: number): Point {

      return this.subtract(point).scale(factor).add(point);
    }

    subtract(p: Interfaces.IPoint): Point {
      return new Point(this.x - p.x, this.y - p.y);
    }

  }

因此，如果您给出了 translate(offsetX,offsetY) scale(scale) 给出的变换滚动事件发生在 (mouseX, mouseY)通往新天平newScale您将通过以下方式计算新变换:

offsetX = (offsetX - mouseX) * newScale/scale + mouseX
offsetY = (offsetY - mouseY) * newScale/scale + mouseY