4

我正在编写一个使用 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();
    ...
});

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

4

3 回答 3

3

我很高兴有人一直在寻求解决这些问题。到目前为止，SVG 似乎还没有得到足够的关注。

几个月来，我一直在寻找和研究解决方案。首先，您有三个用于移动 SVG 的选项。

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

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

  • 翻译（-x，-y）
  • 比例（比例因子）
  • 平移（x，y）

我在一个名为hammerhead的库中“主要”完成了这项工作，该库运行在hammerjs 之上。这是它的一个示例。我不会给你代码来完全解决你的问题，因为有太多的代码可以去你放置“......”的地方我最终编写了一个 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 中提到的其他一些选项

  1. svg 机动
  2. svg 敏捷
  3. SVG查看器

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

于 2014-06-28T08:45:21.310 回答
1

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

于 2014-02-27T10:57:46.453 回答
1

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

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

于 2016-01-21T14:52:28.737 回答