kineticJs shape with hammerjs multitouch rotation

Question

Trying to binb hammerJs multi-touch into my current kineticJs 5.1 codes, found tips, but my puzzle pieces does not rotate at all, and my pieces are kinetic shape, why?

            var startRotate = 0;
            var hammertime = Hammer(piecesArray[i][j].shape);
            hammertime.on("transformstart", function(e) {
            startRotate = piecesArray[i][j].shape.rotation();
            }).on("transformstart", function(e) {
               piecesArray[i][j].shape.rotation(startRotate + e.gesture.rotation);
               layer.draw();
            }); 

my fiddle : http://jsfiddle.net/e70n2693/20/

Answer 1

use the latest version of hammer.js v2.0.

check out the getting started guide . "The pinch and rotate gestures are disabled by default, enable it by"

hammertime.get('pinch').set({ enable: true });
hammertime.get('rotate').set({ enable: true });

Here's an updated jsfiddle . I couldn't test it though, i can't make a rotate gesture, hope it works.

Edit :

The problem is, Hammer(imageObj, options); api expects imageObj to be an html element, in your case it's a kinetic shape. I don't know if you can get the html elements for each kinetic shapes. If not, you can listen to rotation on the .kinetic-container canvas element. So the rotation gesture is performed on the whole canvas, and you have to keep track of the last touched kinetic shape so you can rotate it.

I've setup a refactored jsfiddle , showing the ideas i mentioned, however i couldn't manage to rotate the shape using kinetic, i hope this will fix your problem, again i couldn't test it for rotate but it works for tap .

Answer 2

This example is for KineticJS v5.1.0 and HammerJS v1.0.7

You have to apply Hammer instance on Kinetic.Node instance, not on Image object.

var hammertime = Hammer(piecesArray[i][j].shape);
hammertime.on("transformstart", function(e) {
    this.startRatation = this.rotation();
}).on("transform", function(e) {
    this.rotation((this.startRatation || 0) + e.gesture.rotation);
    this.getLayer().draw();
});

http://jsfiddle.net/e70n2693/30/

Note: I think it is better to set another center for shape via offset .