如何讓fabricJS使用觸摸事件？

我有一個用phonegap開發的應用程序，我正在測試fabricJS的觸摸支持，但不知何故它不適用於我。如何讓fabricJS使用觸摸事件？

我試着創建一個自定義版本here但它不適用於它。

我有this jsfiddle我在那裏使用另一個名爲fabric_events.js的版本，但它似乎不工作。（順便說一句，你如何將你自己的版本上傳到jsfiddle？）

所以我試了FabricJS touch events demo，它工作！

自演示工作以來，我試圖從http://fabricjs.com/lib/fabric_with_gestures.js下載它自己的版本，但仍然沒有運氣。

這是我的代碼：

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="initial-scale=1, width=device-width, user-scalable=true" /> 
    <script src="js/jquery-1.9.1.min.js"></script> 
    <script type="text/javascript" src="js/fabric_with_gestures.js"></script> 
    <script type="text/javascript" > 


     $(document).ready 

     (
      function() { 

       var canvas = new fabric.Canvas('c'); 


       // Do some initializing stuff 
       fabric.Object.prototype.set({ 
        transparentCorners: false, 
        cornerColor: 'rgba(102,153,255,0.5)', 
        cornerSize: 12, 
        padding: 5 
       }); 

       alert('fabric.isTouchSupported=' + fabric.isTouchSupported); 
       var info = document.getElementById('info'); 
       canvas.on({ 
        'touch:gesture': function() { 
         var text = document.createTextNode(' Gesture '); 
         info.insertBefore(text, info.firstChild); 
        }, 
        'touch:drag': function() { 
         var text = document.createTextNode(' Dragging '); 
         info.insertBefore(text, info.firstChild); 
        }, 
        'touch:orientation': function() { 
         var text = document.createTextNode(' Orientation '); 
         info.insertBefore(text, info.firstChild); 
        }, 
        'touch:shake': function() { 
         var text = document.createTextNode(' Shaking '); 
         info.insertBefore(text, info.firstChild); 
        }, 
        'touch:longpress': function() { 
         var text = document.createTextNode(' Longpress '); 
         info.insertBefore(text, info.firstChild); 
        } 
       }); 


       fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function (img) { 
        img.scale(0.5).set({ 
         left: 150, 
         top: 150, 
         angle: -15 
        }); 
        canvas.add(img); 
       }); 

       canvas.add(new fabric.Rect({ 
        left: 50, 
        top: 50, 
        fill: '#269926', 
        width: 100, 
        height: 100, 
        originX: 'left', 
        originY: 'top', 
        hasControls: true, 
        hasBorders: true, 
        selectable: true 
       })); 

       var obj = new fabric.Rect({ 
        left: 20, 
        top: 20, 
        fill: '#555555', 
        width: 100, 
        height: 100, 
        originX: 'left', 
        originY: 'top', 
        hasControls: true, 
        hasBorders: true, 
        selectable: true 
       }); 
       canvas.add(obj).renderAll(); 
       canvas.setActiveObject(obj) 
       //canvas.sendToBack(obj) 
      } 

     ); 
    </script> 
    <title></title> 
    <style> 
     canvas { 
    border: 1px solid #999; 
} 

    </style> 
</head> 
<body> 
    <canvas id="c" width="200" height="200" style='z-index:-1'></canvas> 
    <p id='info' style='background: #eef; width: 583px; padding: 10px; overflow: scroll; height: 80px'></p> 
</body> 
</html>

來源

2015-09-09 user2299401

對不起，我遲到的答案。目前我正在使用Fabric.js，並且我沒有任何手勢問題。我已經試過你的代碼，它通常工作，如果你關心三件事情：

1.）非常重要：請從畫布本身刪除style='z-index:-1'。 z-index屬性指定元素的堆棧順序，負數不允許您在示例中與畫布進行交互。更多信息：CSS z-index Property。
2.）你確定你已經創建了一個「互動」和「手勢」的自定義生成？「手勢」取決於「互動」。如果您不確定，請創建除「節點」之外的所有模塊的自定義生成（除非您稍後想使用Node.js）。
3.）Fabric.js和jQuery必須位於您的代碼的子文件夾'js'中。但我會認爲它已經是這樣了。

然後，它也應該爲你工作。

來源

2015-11-25 09:18:51

如何讓fabricJS使用觸摸事件？

回答

相關問題