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

How do I implement multi-touch interaction with paper.js?

本文关键字：多点 触摸 交互 实现 js 何使用 paper      更新时间：2023-09-26

所以paper.js是一个很棒的库。我目前正试图利用它来构建一个多点触摸白板/绘图网络应用程序，该应用程序最终将在服务器上进行协作。

不过，我该如何使用纸张实现多点触摸？

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

到目前为止，我已经通过谷歌做了很多研究，尽管我的研究可能有缺陷，但我曾尝试将浏览器触摸事件与paper.js一起使用，并试图通过创建一个新的画布来分隔它们来处理每个事件。

如果这里有人成功地用paper.js实现了多点触摸，或者对这个应用程序有比paper更好的推荐，我会非常高兴听到。

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

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

我可以给你举一个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>

触摸模拟器是对多点触摸的模拟。当您按下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');

在Paperscript标签的out中使用paperJS时，需要安装它。文档在这里我初始化我的路径。

侦听模拟器的事件

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

});

我尽我所能写出正确的英语，我希望它能被理解。

相关文章：