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

Question

我正在尝试合并 jquery.zoomPanTouchSVG 和 hammer.js 来创建 svg zoom+pinch 来缩放手势。问题是我无法理解 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;