將Hammer.js觸摸手勢與jQuery集成SVG縮放庫

Question

我正在嘗試合併jquery.zoomPanTouchSVG和hammer.js以創建一個縮放+縮放以縮放手勢。問題是我無法理解jquery.zoompantouchSVG庫javascript的代碼結構。我發現「縮放（方向）」功能可用於縮放，並且可以通過單擊按鈕將其綁定。

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

的問題出現了，當我嘗試這個功能綁定了「pinchin」和「尖滅」摸Hammer.js庫的手勢。我無法通過我的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的。

請建議如何在庫JS外部調用「縮放」功能，以便通過hammer.js觸摸手勢實現縮放。

Answer 1

如果你想那樣做，那麼這應該工作：

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

其中zoomInBtnID是「放大」按鈕，引用的ID - 根據源 - 在格式'tZPSVGZoomIn'+ tzpIndex;