如何實現與paper.js的多點觸控交互？

Question

所以paper.js是一個很棒的圖書館。我目前正試圖利用它來構建一個多點觸控白板/繪圖web應用程序，最終將通過服務器進行協作。

儘管如何實現紙張多點觸控？

我的路障就在這裏。我一直無法找到允許paper.js爲每次觸摸創建多個路徑的方法。

到目前爲止，我已經通過Google做了相當多的研究，儘管我的研究可能存在問題，但我試圖在paper.js中使用瀏覽器touchevents，並試圖通過創建一個新畫布來處理每個事件將它們分開。

如果有人在這裏已經成功地使用paper.js實現多點觸摸，或者比這個應用程序有更好的推薦，我會非常樂意聽到。

Answer 1

我已經使用paperJS的hammer.js庫完成了這項工作。

我爲每個可能的手指創建一條路徑。 觸摸事件發生時，我列舉所有觸摸，併爲每個相應的路徑添加點。不過，我使用Javascript，而不是Paperscript的標籤，而且我使用Hammer.js的觸摸模擬器在我的瀏覽器中進行測試。

我可以給你一個例子與HammerJS：

查閱LIVE EXAMPLE這裏

導入javascript文件

<script src="js/libs/jquery/jquery.js"></script> 

    <script src="js/libs/hammer.js/touch-emulator.js"></script> 
    <script> TouchEmulator(); </script> 

    <script src="js/libs/hammer.js/hammer.js"></script> 
    <script src="js/libs/hammer.js/jquery.hammer.js"></script> 
    <script src="js/libs/paper/paper-full.js"></script> 

觸摸仿真器是多點觸控的仿真。當您按Shift時，它模擬兩根手指的觸摸。這個模擬器由Hammer.js提供。 （重要：導入後必須執行TouchEmulator（）函數）。

帆布

<canvas id="myCanvas" width="1500" height="1500" style="background-color: #000;"> 

PaperJS安裝

var canvas; 
var myPaths = []; 

//PaperJS Installation 
paper.install(window); 

window.onload = function() { 

    //Setup PaperJS 
    canvas = document.getElementById('myCanvas'); 
    paper.setup(this.canvas); 

    //Define array of paths (I've choose 12 because my multitouch table accept 12 touch max) 
    for (var i = 0; i < 12; i++) 
    { 
     myPath = new paper.Path(); 
     myPath.strokeColor = '#00ff00'; 
     myPath.strokeWidth = 2; 
     myPaths.push(myPath); 
    } 

}; 

var myCanvas = document.getElementById('myCanvas'); 

paperJS的安裝是必要的，當你使用它出Paperscript的標籤。 Documentation 這裏我初始化我的路徑。

聽模擬器的事件

//Listen multitouch event for simultation 
document.body.addEventListener('touchstart', touchStart, false); 
document.body.addEventListener('touchmove', touchmove, false); 
document.body.addEventListener('touchend', touchEnd, false); 

聽觸摸仿真器的事件

跟蹤每個手指的每個路徑觸摸

var touch = false; 
function touchStart() 
{ 
    touch = true; 
} 

function touchEnd() 
{ 
    touch = false; 

    //Finish all paths 
    myPaths = []; 
    for (var i = 0; i < 12; i++) 
    { 
     myPath = new paper.Path(); 
     myPath.strokeColor = '#00ff00'; 
     myPath.strokeWidth = 2; 
     myPaths.push(myPath); 
    } 

} 

function touchmove(ev) { 

    if (!touch) 
     return; 

    //Draw path for each touch 
    for (var i = 0; i < ev.changedTouches.length; i++) 
    { 
     var x1, y1; 
     x1 = ev.changedTouches[i].pageX; 
     y1 = ev.changedTouches[i].pageY; 

     myPaths[i].add(new Point(x1, y1)); 
     paper.view.draw(); 
    } 

    console.log(ev); 
} 

最後，將每個路徑點對應於每次觸摸。

警告： 參見上面的例子，使用觸摸模擬器。觸摸模擬器的事件對象「ev」與hammer.js的事件對象有點​​不同。

對於hammer.js，是這樣的：

$('#myCanvas').hammer().on("drag", function(ev) { 

    for (var i = 0; i < ev.gesture.touches.length; i++) 
    { 
     var x1, y1; 
     x1 = ev.gesture.touches[i].pageX; 
     y1 = ev.gesture.touches[i].pageY; 

     myPaths[i].add(new Point(x1, y1)); 
     paper.view.draw(); 

    } 


}); 

我盡我所能寫一個正確的英語，我希望這是可以理解的。