Question

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

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

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

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

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

Answer 1

我使用hammer.js库和paperJS完成了这个。

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

当您使用Paperscript标签的 out 时，必须安装paperJS。 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);
}

最后，添加与每次触摸相对应的每条路径的点。

警告：如上所示，此示例使用触摸模拟器。事件对象＆＃34; ev＆＃34;触摸模拟器，与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();

    }


});

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

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

1 个答案: