KineticJs: головоломка не отображает целое изображение?

Question

В настоящее время у меня есть проблема с отображением всего изображения с помощью моей головоломки, и при повороте "щелчка" возникла ошибка, которая, когда я щелкаю один кусок, поворачивает другой кусок, почему? Может ли кто-нибудь помочь мне увидеть мою скрипку и помочь мне с этим? Спасибо большое

    fillPatternImage:imageObj,
                    x:-pieceWidth*i,
                    y:-pieceHeight*j,
                    stroke: "#000000",
                    strokeWidth: 4,
                    lineCap: "round",
                    rotation : Math.PI * 0.5 * Math.floor(Math.random() * 4),
                    draggable: true,
                    offset: [pieceWidth/2,pieceHeight/2],
                x: pieceWidth*i+pieceWidth/2 + (Math.random()*2)*((stage.getWidth()+pieceWidth)/20),
                y: pieceHeight*j+pieceHeight/2 + (Math.random()*2)*((stage.getHeight()+pieceHeight)/20),
            });
            piecesArray[i][j].shape.on("mousedown", function(){
                this.moveToTop();
                });
            piecesArray[i][j].shape.on("click", function(){
                this.moveToTop();
                this.rotateDeg(90)
                });   

Мой JsFiddle: http://jsfiddle.net/e70n2693/

Спасибо

Answer 1

piecesArray[i][j].shape.on("click", function(){
    this.moveToTop();
    this.rotateDeg(90)
    layer.draw();
});

http://jsfiddle.net/e70n2693/2/