KineticJS rotation issue for puzzle pieces

Question

currently i have KineticJS v5.1 and bind with hammerJS for my multi-touch, i am doing a puzzle game for my project, right now my puzzle pieces only can rotate at the edge of my puzzle pieces when i do my 2-finger rotation, how can i do my rotation of my puzzle pieces so that the rotation is in the middle of the puzzle pieces but not the edge of the puzzle pieces?

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

This is my JSfiddle : http://jsfiddle.net/e70n2693/39/

Answer 1

I think your offset might be wrong, it works when I make it an object with x and y properties instead of an array (fiddle):

offset: { x: pieceWidth / 2, y: pieceHeight / 2 },