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

Question

So paper.js is a fantastic library. I'm currently attempting to utilize it in order to build a multi-touch whiteboard/drawing webapp that will eventually be collaborative over a server.

How do I implement multi-touch with paper though?

My roadblock lies here. I have been unable to find a way to allow paper.js to create multiple paths for each touch.

So far I have done quite a bit of research through Google, although my research could be faulty, I have attempted to use browser touchevents with paper.js, and I have attempted to handle each event by creating a new canvas to separate them.

If there is anyone here that has successfully implemented multi-touch with paper.js, or has a better recommendation than paper for this app, I would be more than happy to hear.

Answer 1

I've done this using hammer.js library with paperJS.

I create one path for each possible fingers. When the touch event is raised, I enumerate all touches and I add points for each path corresponding. However I use paperJS with Javascript and not in Paperscript's tag, moreover I use touch-emulator of Hammer.js for testing in my browser.

I can give you an example with HammerJS :

SEE LIVE EXAMPLE HERE

Import javascript files

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

Touch-emulator is an emulation of multitouch. It emulate two finger's touch when you press Shift . This emulator is provided by Hammer.js. ( Important : You must execute TouchEmulator() function after import).

Canvas

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

PaperJS Installation

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');

The installation of paperJS is necessary when you use it out of Paperscript's tag. Documentation Here I initialize my paths.

Listen emulator's events

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

Listening the events of touch-emulator

Trace each paths for each fingers touch

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

Finally, adding points of each path corresponding to each touch.

Warning : See above, this example use touch-emulator. The event object "ev" of touch-emulator, is bit different to the event object of hammer.js.

For hammer.js, is something like :

$('#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();

    }


});

I doing my best for writing a correct english, I hope that it's understandable.