如何实现与paper.js的多点触控交互？

Question

所以paper.js是一个很棒的图书馆.我目前正在尝试利用它来构建一个多点触控白板/绘图webapp,最终将通过服务器进行协作.

如何使用纸张实现多点触控？

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

到目前为止,我已经通过谷歌进行了相当多的研究,虽然我的研究可能有问题,但我试图在paper.js上使用浏览器touchevents,并且我试图通过创建一个新的画布来分隔它们来处理每个事件.

如果这里有人已经成功实现了paper.js的多点触控,或者对于这个应用程序有更好的推荐而不是纸张,我会非常高兴听到.

Answer 1

我使用带有paperJS的hammer.js库完成了这个.

我为每个可能的手指创建一条路径.当触摸事件被引发时,我枚举所有触摸并且我为每个相应的路径添加点.但是我使用带有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');

当您使用它paperJS的安装是必要的了 Paperscript的标签.文档 在这里我初始化我的路径.

听模拟器的事件

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

    }


});

我尽力写出正确的英语,我希望这是可以理解的.