使用Hammer.js缩放SVG [英] Zooming SVG with Hammer.js
问题描述
我正在编写一个使用SVG显示信息的跨平台Web应用程序。我需要一个多点触控界面来平移和缩放SVG图形。根据我的研究，似乎Hammer.js是我最好的方法，我使用的是jQuery库版本。
I am writing a cross platform web application that displays information using SVG. I need to have a multi-touch interface to pan and zoom the SVG graphic. From my research, it appears that Hammer.js is my best approach, and I am using the jQuery library version.
我可以使用以下内容平移和缩放图像SVG的viewBox属性。我遇到的问题是在缩放缩放期间使用中心点信息（相对于左上角的缩放）。无论在我的图像中的哪个中心点，都应保持在夹点的中心位置。显然，解决方案是修改viewBox的前两部分，但我无法确定正确的值。中心点（event.gesture.center）似乎在浏览器页面坐标中，因此我需要弄清楚如何可靠地缩放它，然后计算viewBox x和y坐标。我找了一些例子，但找不到任何相关的东西。
I am able to pan and zoom the image using the viewBox property of the SVG. The problem I'm having is using the center point information during the pinch zoom (vs. scaling from the top left corner). That center point, wherever it is in my image, should remain in the center of the pinch. Clearly, the solution is to modify the first two parts of the viewBox, but I'm having trouble determining the correct values. The center point (event.gesture.center) appears to be in browser page coordinates, so I need to figure out how to reliably scale this and then calculate the viewBox x and y coordinates. I've looked for examples, but couldn't find anything that quite related.
使用viewBox属性是扩展SVG图像的最佳方法吗？还有更好的选择吗？有没有人有从缩放中心缩放SVG图像的示例代码？
Is using the viewBox attribute the best way to scale SVG images? Are there better alternatives? Does anyone have sample code of zooming an SVG image from the pinch center?
另外，我注意到即使我将事件处理绑定到SVG元素，捏手势似乎可以在页面的任何位置工作。它不是pinch的默认浏览器处理，因为它只使用我的代码缩放SVG图像。这是我用来绑定pinch事件的代码：
Also, I'm noticing that even though I'm binding the event handling to the SVG element, the pinch gesture seems to work from anywhere on the page. It isn't the default browser handling of the pinch because it is only zooming the SVG image using my code. Here's the code I'm using for binding the pinch event:
$(window.demoData.svgElement).hammer().on("pinch", function (event) {
event.preventDefault();
...
});
感谢您对这两个问题的任何帮助。
Thanks for any help on these two issues.
推荐答案
我很高兴其他人一直在寻求解决这些问题。看来SVG到目前为止还没有得到足够的重视。
I'm glad that some one else has been looking to solve these problems. It seems that SVG hasn't so far had enough attention.
我一直在寻找和研究解决方案已有好几个月了。
首先，你有三个移动SVG的选项。
I have been looking and working on solutions for several months. Firstly, you have three options for moving an SVG.
- 如你所说使用viewBox。如果您想将图像视为单个项目，我认为这是最佳解决方案。
- 您可以使用SVG元素的CSS转换。缺点是这会导致像素化，但意味着您可以使用其他类型元素存在的解决方案
- 您可以对SVG中的元素或元素组使用svg转换。
要回答代码问题，可以如下描述居中夹点。
首先，您需要使用screenCTM（坐标变换矩阵）将夹点事件中心点从屏幕坐标转换为SVG坐标。如果point有坐标（x，y），那么你的viewbox的原点需要进行相当于
To answer the question of code a centered pinch can be described as follows. First you need to translate the pinch event center point from screen coordinate to SVG coordinates using the screenCTM (coordinate transform matrix). if point has coordinates (x,y) then the origin of you viewbox needs to undergo a transformation equivalent to
- translation（-x， - y）
- scale（scalefactor）
- translation（x，y）
我已经把这项工作主要放在我称之为 hammerhead 的库中。在hammerjs上运行。这是一个示例的实际操作。我不会给你代码来准确解决你的问题，因为有太多的代码去你放的地方'...'我最后写了一个viewBox对象来操纵。仅供参考，这是我用来操作它的代码。
I have made this work 'mostly' in a library I have called hammerhead which runs on top of hammerjs. Here is an example of it in action.I won't give you code to exactly solve your problem as there is too much code to go where you have put '...' I ended up writing a viewBox object to manipulate. Just for reference here is the code I use to manipulate that.
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是非常计算密集的我不会在手机上进行愉快的滚动体验，除了具有很少元素的图像。如果您在响应操作时更改视图一次，它将很好地工作。例如，向左键向上键。
我已经在这些回购中探讨了我上面提到的一些其他选项
This method is not without problems. Change the viewBox is very computationally intensive I will not make for a pleasant scrolling experience on a phone except for an image with very few elements. It will work nicely if you change the view once in response to an action. for example left right up down keys. I have explored some of other options I mentioned above in these repos
- svg maneuver
- svg agile
- svgViewer
正如我之前提到的那样尝试。这些都是单独使用其中一种方法。为了获得平滑滚动和没有像素化，我认为需要两者的结合。我正在为另一个图书馆工作。
As I mentioned trying for quite sometime. These all use one of the approaches individually. To get both smooth scrolling and no pixilation I think will require a combination of both. For which I am working on yet another library.
这篇关于使用Hammer.js缩放SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
