关于javascript：如何与paper.js进行多点触控互动？


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

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

但是，如何实现纸张多点触摸？

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

到目前为止，尽管我的研究可能有误，但我已经通过Google进行了很多研究，我尝试将浏览器touchevents与paper.js一起使用，并且尝试通过创建新的画布将它们分开来处理每个事件。

如果这里有人成功地通过paper.js实现了多点触控，或者对此应用程序的建议比纸张更好，我将非常高兴听到。

我已经使用了带有paperJS的Hammer.js库来完成此操作。

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

我可以举一个HammerJS的例子：

观看现场示例

导入JavaScript文件

1
2
3
4
5
6
7
8
    <script src="js/libs/jquery/jquery.js">

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

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

触摸仿真器是多点触摸的仿真。当您按Shift时，它会模仿两个手指的触摸。该模拟器由Hammer.js提供。 (重要：导入后必须执行TouchEmulator()函数)。

帆布

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

PaperJS安装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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标签之外使用paperJS，则必须安装paperJS。文献资料
在这里，我初始化我的路径。

收听模拟器的事件

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

聆听触摸模拟器的事件

跟踪每个手指触摸的每个路径

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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，类似于：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('#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();

    }


});

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

相关讨论