How to drag multiple shape on canvas? [kineticjs]

Question

For example: one tap is moving a shape. Another tap is moving another shape at same time.

Answer 1

You can set up a Kinetic Group like this:

http://www.html5canvastutorials.com/kineticjs/html5-canvas-complex-shapes-using-groups-with-kineticjs/

Here's how to declare an empty group and make it draggable:

  var group = new Kinetic.Group({
    x: 220,
    y: 40,
    draggable:true
  });

So in the tap handler of a shape, you can add the tapped object to the group.

  circle.on('tap', function() {
    group.add(circle);
  });

Then you can drag the assembled group as necessary.

And if you need multiple groups, you can move individual shapes between the different groups like this:

http://www.html5canvastutorials.com/kineticjs/html5-canvas-move-shape-to-another-container-with-kineticjs/

    circle.moveTo(someOtherGroup);

Answer 2

In the case of dragging two shapes at the same time, you will have to grab the touch event from the browser and read it as

touches[0] and touches[1] events

This is how you differentiate between separate touch events occurring simultaneously

official kineticjs example:
http://www.html5canvastutorials.com/labs/html5-canvas-multi-touch-scale-stage-with-kineticjs/

Answer 3

I have shared a small experiment I did on Kinetic + Multi Touch here . Have a look - perhaps it can help until "real" multitouch becomes available in Kinetic