javascript – 使用Hammer.js缩放SVG

2019-06-24 23:20:41 阅读：255 来源： 互联网

我正在编写一个使用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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 使用Hammer.js缩放SVG