Javascript 如何使用paper.js实现多点触摸交互？

因此paper.js是一个很棒的库。我目前正试图利用它来构建一个多点触摸白板/绘图webapp，它最终将通过服务器进行协作

但是，我如何使用纸张实现多点触摸

我的路障就在这里。我一直无法找到允许paper.js为每次触摸创建多个路径的方法

到目前为止，我已经通过谷歌做了很多研究，虽然我的研究可能有缺陷，但我尝试将浏览器touchevents与paper.js结合使用，并尝试通过创建一个新的画布将它们分开来处理每个事件

---

如果这里有人成功地使用paper.js实现了multi-touch，或者有比paper更好的应用推荐，我会非常高兴地听到。

我已经使用hammer.js library和paperJS实现了这一点

我为每个可能的手指创建一条路径。 当触发触摸事件时，我枚举所有触摸，并为每个对应路径添加点。然而，我在Javascript中使用paperJS，而不是在Paperscript的标记中使用，而且我在浏览器中使用Hammer.js的touch emulator进行测试

我可以举一个HammerJS的例子：

看这里

导入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>

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

//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);
}

var-touch=false；
函数touchStart（）
{
触摸=真实；
}
函数touchEnd（）
{
触摸=假；
//完成所有路径
mypath=[]；
对于（变量i=0；i<12；i++）
{
myPath=新纸张。路径（）；
myPath.strokeColor='#00ff00'；
myPath.strokeWidth=2；
myPath.push（myPath）；
}
}
功能触摸移动（ev）{
如果（！触摸）
返回；
//为每次触摸绘制路径
对于（变量i=0；i

最后，添加每个触摸对应的每个路径的点

警告： 如上所述，此示例使用触摸仿真器。touch emulator的事件对象“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();

    }


});

$（'#myCanvas'）.hammer（）.on（“拖动”，函数（ev）{
对于（变量i=0；i

---

我正在尽我最大的努力来写一篇正确的英语，我希望它是可以理解的。

我已经使用hammer.js库和paperJS完成了这项工作

我为每个可能的手指创建一条路径。 当触发触摸事件时，我枚举所有触摸，并为每个对应路径添加点。然而，我在Javascript中使用paperJS，而不是在Paperscript的标记中使用，而且我在浏览器中使用Hammer.js的touch emulator进行测试

我可以举一个HammerJS的例子：

看这里

导入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>

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

//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);
}

var-touch=false；
函数touchStart（）
{
触摸=真实；
}
函数touchEnd（）
{
触摸=假；
//完成所有路径
mypath=[]；
对于（变量i=0；i<12；i++）
{
myPath=新纸张。路径（）；
myPath.strokeColor='#00ff00'；
myPath.strokeWidth=2；
myPath.push（myPath）；
}
}
功能触摸移动（ev）{
如果（！触摸）
返回；
//为每次触摸绘制路径
对于（变量i=0；i

最后，添加每个触摸对应的每个路径的点

警告： 如上所述，此示例使用触摸仿真器。touch emulator的事件对象“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();

    }


});

$（'#myCanvas'）.hammer（）.on（“拖动”，函数（ev）{
对于（变量i=0；i

---

我尽我所能写一篇正确的英语，我希望它是可以理解的。

谢谢。这正是我要找的！非常感谢。这正是我要找的！