使用Hammer.js缩放SVG
我正在编写一个跨平台的Web应用程序，它使用SVG显示信息。 我需要一个多点触控界面来平移和缩放SVG图形。 根据我的研究，似乎Hammer.js是我最好的方法，我使用的是jQuery库版本。
我可以使用SVG的viewBox属性平移和缩放图像。 我遇到的问题是在缩放缩放期间使用中心点信息（相对于左上角的缩放）。 无论在我的图像中的哪个中心点，都应保持在夹点的中心位置。 显然，解决方案是修改viewBox的前两部分，但我无法确定正确的值。 中心点（event.gesture.center）似乎在浏览器页面坐标中，因此我需要弄清楚如何可靠地缩放它，然后计算viewBox x和y坐标。 我找了一些例子，但找不到任何相关的东西。
使用viewBox属性是扩展SVG图像的最佳方法吗？ 还有更好的选择吗？ 有没有人有从缩放中心缩放SVG图像的示例代码？
另外，我注意到即使我将事件处理绑定到SVG元素，捏合手势似乎也可以在页面的任何位置工作。 它不是pinch的默认浏览器处理，因为它只使用我的代码缩放SVG图像。 这是我用来绑定pinch事件的代码：
$(window.demoData.svgElement).hammer().on("pinch", function (event) { event.preventDefault(); ... }); 感谢您对这两个问题的任何帮助。
我很高兴其他人一直在寻求解决这些问题。 看来SVG到目前为止还没有得到足够的重视。
几个月来，我一直在寻找和研究解决方案。 首先，您有三个移动SVG的选项。
- 像你说的那样使用viewBox。 如果您想将图像视为单个项目，我认为这是最佳解决方案。
- 您可以使用SVG元素的css转换。 缺点是这会导致像素化，但意味着您可以使用其他类型元素存在的解决方案
- 您可以对SVG中的元素或元素组使用svg转换。
为了回答代码问题，可以如下描述中心夹点。 首先，您需要使用screenCTM（坐标变换矩阵）将夹点事件中心点从屏幕坐标转换为SVG坐标。 如果point有坐标（x，y），那么你的viewbox的原点需要进行相当于的转换
- 翻译（-x，-y）
- 规模（比例因子）
- 翻译（x，y）
我已经把这项工作“主要”放在一个我称之为锤头的图书馆里，这个图书馆运行在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; }
这种方法并非没有问题。 更改viewBox是非常计算密集的我不会在手机上进行愉快的滚动体验，除了具有非常少的元素的图像。 如果您在响应操作时更改视图一次，它将很好地工作。 例如，向左键向上键。 我已经在这些回购中探讨了我上面提到的一些其他选项
- svg机动
- svg敏捷
- svgViewer
正如我上次提到的那样。 这些都是单独使用其中一种方法。 为了获得平滑滚动和没有像素化，我认为需要两者的结合。 我正在为另一个图书馆工作。
最好的方法是使用svg变换，结合平移和缩放，你可以以你的收缩为中心执行缩放。 你只需要找出公式。 这个例子可以帮助你（它使用css转换，但你明白了）： https ： //github.com/EightMedia/hammer.js/blob/1.0.x/examples/pinchzoom.html
还有另一个专门为此任务设计的库，名为PanZoom。 不幸的是，它与Hammer并不相称。 我用它来放大/缩小SVG文件非常成功。