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

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.