使用 Hammer.js 缩放 SVG答案

【问题标题】：Zooming SVG with Hammer.js使用 Hammer.js 缩放 SVG
【发布时间】：2013-08-19 00:07:35
【问题描述】：

我正在编写一个使用 SVG 显示信息的跨平台 Web 应用程序。我需要一个多点触控界面来平移和缩放 SVG 图形。根据我的研究，Hammer.js 似乎是我最好的方法，并且我使用的是 jQuery 库版本。

我可以使用 SVG 的 viewBox 属性来平移和缩放图像。我遇到的问题是在捏缩放期间使用中心点信息（而不是从左上角缩放）。那个中心点，无论它在我的图像中的什么位置，都应该保持在捏的中心。显然，解决方案是修改 viewBox 的前两部分，但我无法确定正确的值。中心点（event.gesture.center）似乎在浏览器页面坐标中，所以我需要弄清楚如何可靠地缩放它，然后计算 viewBox x 和 y 坐标。我找了一些例子，但找不到任何相关的东西。

使用 viewBox 属性是缩放 SVG 图像的最佳方式吗？有更好的选择吗？有人有从捏合中心缩放 SVG 图像的示例代码吗？

另外，我注意到即使我将事件处理绑定到 SVG 元素，捏合手势似乎在页面上的任何位置都有效。它不是默认的浏览器处理夹点，因为它只是使用我的代码缩放 SVG 图像。这是我用来绑定捏事件的代码：

$(window.demoData.svgElement).hammer().on("pinch", function (event) {
    event.preventDefault();
    ...
});

感谢您对这两个问题的任何帮助。

【问题讨论】：

我知道这不能回答你的问题，所以把它作为评论，但我很幸运 jQuery PanZoom 做的事情与你所问的类似。 github.com/timmywil/jquery.panzoom。您可能想尝试一下。
非常感谢您的评论。我已经确定了我的问题的答案，并计划将其写下来并发布。我现在怀疑你提到的图书馆从长远来看可能对我更好。他们的演示在我的手机上运行良好，但我需要在平板电脑上将它与我的其他解决方案进行比较，看看哪个效果最好。正如你所说，它似乎完全符合我的要求（在约束元素内缩放和平移 SVG）。

标签： javascript jquery svg hammer.js

【解决方案1】：

我很高兴有人一直在寻求解决这些问题。看来SVG到目前为止还没有得到足够的重视。

几个月来，我一直在寻找和研究解决方案。首先，您可以通过三个选项来移动 SVG。

如您所说，使用 viewBox。如果您想将图像视为单个项目，我认为这是最好的解决方案。
您可以使用 SVG 元素的 css 转换。缺点是这会导致像素化，但意味着您可以使用针对其他类型元素的解决方案
您可以对 SVG 中的元素或元素组使用 svg 转换。

为了回答代码问题，可以如下描述居中捏合。首先，您需要使用 screenCTM（坐标变换矩阵）将捏事件中心点从屏幕坐标转换为 SVG 坐标。如果 point 有坐标 (x,y) 那么你的 viewbox 的原点需要经历一个相当于

的变换

翻译(-x, -y)
比例（比例因子）
平移(x, y)

我“主要”在一个名为hammerhead 的库中完成了这项工作，该库在hammerjs 之上运行。这是一个example 的实际操作。我不会给你代码来完全解决你的问题，因为有太多的代码可以去你放置'...'的地方我最终写了一个viewBox 对象来操作。仅供参考，这里是我用来操作它的代码。

scale: function(scale, center){
  var boxScale = 1.0/scale;
  center = center || this.center();
  var newMinimal = this.getMinimal().subtract(center).multiply(boxScale).add(center);
  var newMaximal = this.getMaximal().subtract(center).multiply(boxScale).add(center);
  var newViewBox = viewBox(newMinimal, newMaximal, this.getValidator());
  return newViewBox.valid()? newViewBox : null;
}

这种方法并非没有问题。更改视图框的计算量非常大，除了元素很少的图像外，我不会在手机上提供愉快的滚动体验。如果您更改视图一次以响应操作，它将很好地工作。例如左右上下键。我已经探索了我在这些 repos 中提到的其他一些选项

正如我提到的尝试了一段时间。这些都单独使用其中一种方法。为了获得平滑滚动和无像素化，我认为需要将两者结合起来。我正在为此开发另一个库。

【讨论】：

不幸的是，它被搁置了。这是我得到的最远的github.com/CrowdHailer/Hammerhead2

【解决方案2】：

最好的方法是使用 svg 变换，结合平移和缩放，您可以执行以捏合为中心的缩放。你只需要弄清楚公式。这个例子可以帮助你（它使用 css 转换，但你明白了）：https://github.com/EightMedia/hammer.js/blob/1.0.x/examples/pinchzoom.html

【讨论】：

他们删除了示例文件夹，我修复了链接。

【解决方案3】：

还有另一个专门为此任务设计的库，称为 PanZoom。不幸的是，它不能很好地与 Hammer 配合使用。我用它来放大/缩小 SVG 文件并取得了巨大的成功。

https://github.com/timmywil/jquery.panzoom

【讨论】：