javascript – 使用Hammer.js缩放SVG

我正在编写一个使用SVG显示信息的跨平台Web应用程序.我需要一个多点触控界面来平移和缩放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)
>比例(scalefactor)
>翻译(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;
}

这种方法并非没有问题.更改viewBox是非常计算密集的我不会在手机上进行愉快的滚动体验,除了具有很少元素的图像.如果您在响应操作时更改视图一次,它将很好地工作.例如,向左键向上键.
我已经在这些回购中探讨了我上面提到的一些其他选项

> svg maneuver
> svg agile
> svgViewer

正如我上次提到的那样.这些都是单独使用其中一种方法.为了获得平滑滚动和没有像素化,我认为需要两者的结合.我正在为另一个图书馆工作.

标签：jquery,javascript,svg,hammer-js
来源： https://codeday.me/bug/20190624/1282811.html