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中发现夹点/缩放代码。