Question

我正在尝试合并jquery.zoomPanTouchSVG和hammer.js来创建svg缩放+缩放来缩放手势。问题是我无法理解jquery.zoompantouchSVG库javascript的代码结构。我发现“缩放（方向）”功能适用于缩放，我可以通过单击按钮将其绑定。

$('#' + zoomInBtnID).click(function() {
            zoom('in');
        });
        $('#' + zoomOutBtnID).click(function() {
            zoom('out');

当我尝试将此函数与Hammer.js库的“pinchin”和“pinchout”触摸手势绑定时，问题就出现了。我无法通过custom.js文件中的javascript代码调用“缩放”功能。

var element = document.getElementById("mySVG");
  var hammertime = Hammer(element).on("pinchin", function(event) {
          console.log("pinch in event");
          zoom('out');
      });
  var hammertime = Hammer(element).on("pinchout", function(event) {
          console.log("pinch out event");
          zoom('in');
      });

我在上面的代码中收到了控制台消息，但是当我将上面的代码放在zoompantouchSVG库JS之外时，“zoom”在日志中显示为未定义。

请建议如何在库JS之外调用“缩放”功能，以便我可以通过hammer.js触摸手势实现缩放。

Answer 1

如果你想这样做，那么这应该有效：

$(element).hammer().on("pinchin", function(evt) {
  $('#' + zoomInBtnID).trigger("click");
});

其中zoomInBtnID是对“放大”按钮ID的引用 - 根据来源 - 格式为'tZPSVGZoomIn'+ tzpIndex;

将Hammer.js触摸手势与jQuery SVG缩放库集成

1 个答案: