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

Question

我正在尝试合并 jquery.zoomPanTouchSVG和 hammer.js创建 svg 缩放+捏合缩放手势。问题是我无法理解 jquery.zoompantouchSVG 库 javascript 的代码结构。我发现函数“zoom(direction)”可用于缩放，并且我可以通过单击按钮来绑定(bind)它。

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

当我尝试将此函数与 Hammer.js 库的“pinchin”和“pinchout”触摸手势绑定(bind)时，出现了问题。我无法通过 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;