FabricJS輕觸平移/縮放整個畫布

Question

我需要在FabricJS畫布上啓用觸控縮放/平移。有一些庫允許在圖像上發生這種行爲（請參閱pinch-zoom-canvas）或通過鼠標點擊事件（請參閱this Fiddle），但我似乎無法正確連接「touch：gesture」事件。

我已經建立了手勢庫啓用（所以this FabricJS演示在我本地工作），但我不知道從哪裏開始將手勢與工作小提琴結合起來。

我想這樣的代碼變化：

canvas.on({ 
     'touch:gesture': function() { 
      var text = document.createTextNode(' Gesture '); 
      info.insertBefore(text, info.firstChild); 
      // Handle zoom only if 2 fingers are touching the screen 
      if (event.e.touches && event.e.touches.length == 2) { 
       // Get event point 
       var point = new fabric.Point(event.self.x, event.self.y); 
       // Remember canvas scale at gesture start 
       if (event.self.state == "start") { 
        zoomStartScale = self.canvas.getZoom(); 
       } 
       // Calculate delta from start scale 
       var delta = zoomStartScale * event.self.scale; 
       // Zoom to pinch point 
       self.canvas.zoomToPoint(point, delta); 
      } 

     }, 
     'touch:drag': function(e) { 
      panning = true; 
      var text = document.createTextNode(' Dragging '); 
      info.insertBefore(text, info.firstChild); 
      if (panning && e && e.e) { 
       debugger; 
       var units = 10; 
       var delta = new fabric.Point(e.e.movementX, e.e.movementY); 
       canvas.relativePan(delta); 
      } 
      panning = false; 
     }, 
     'touch:longpress': function() { 
      var text = document.createTextNode(' Longpress '); 
      info.insertBefore(text, info.firstChild); 
     } 
    }); 

但是，當我用iPhone/iPad測試沒有任何反應。

Answer 1

捏縮放是一個愚蠢的錯誤，我沒有將事件包含在函數參數中。下面的代碼適用於捏/縮放和點擊/拖動。

canvas.on({ 
     'touch:gesture': function(e) { 
      if (e.e.touches && e.e.touches.length == 2) { 
       pausePanning = true; 
       var point = new fabric.Point(e.self.x, e.self.y); 
       if (e.self.state == "start") { 
        zoomStartScale = self.canvas.getZoom(); 
       } 
       var delta = zoomStartScale * e.self.scale; 
       self.canvas.zoomToPoint(point, delta); 
       pausePanning = false; 
      } 
     }, 
     'object:selected': function() { 
      pausePanning = true; 
     }, 
     'selection:cleared': function() { 
      pausePanning = false; 
     }, 
     'touch:drag': function(e) { 
      if (pausePanning == false && undefined != e.e.layerX && undefined != e.e.layerY) { 
       currentX = e.e.layerX; 
       currentY = e.e.layerY; 
       xChange = currentX - lastX; 
       yChange = currentY - lastY; 

       if((Math.abs(currentX - lastX) <= 50) && (Math.abs(currentY - lastY) <= 50)) { 
        var delta = new fabric.Point(xChange, yChange); 
        canvas.relativePan(delta); 
       } 

       lastX = e.e.layerX; 
       lastY = e.e.layerY; 
      } 
     } 
    }); 

if/then語句的絕對〜50px是爲了避免拖拽遠離導致畫布跳轉的最後一個點。還暫停了平移，以便能夠獨立移動對象。在github issues thread中發現夾點/縮放代碼。