FabricJSタッチパン/ズーム全体キャンバス

Question

FabricJSキャンバスでタッチズーム/パンニングを有効にする必要があります。画像（参照）またはマウスクリックイベント（this Fiddle参照）でこの動作を許可するライブラリがありますが、「touch：ジェスチャ」イベントが正しく接続されていないようです。

ジェスチャーを有効にしてライブラリを構築しました（したがって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; 
      } 
     } 
    }); 

絶対~50px if/thenステートメントは、最後のポイントからドラッグを避けて、キャンバスをジャンプさせます。また、パンを個別にオブジェクトを移動できるように一時停止しました。ピンチ/ズームコードはgithub issues threadにありました。