当我争夺Kineticjs时旋转

Question

我已经捣乱了我的谜题，现在我需要在我争抢的时候让它旋转？有人可以帮忙吗？谢谢:)

    fillPatternImage:imageObj,
                    x:-pieceWidth*i/2,
                    y:-pieceHeight*j/2,
                    stroke: "#000000",
                    strokeWidth: 4,
                    lineCap: "round",
                    draggable: true,
                x: i+pieceWidth/4 + (Math.random()*4)*((stage.getWidth()+pieceWidth)/12),
                y: j+pieceHeight/4 + (Math.random()*2)*((stage.getHeight()+pieceHeight)/12),
            });

JsFiddle：http://jsfiddle.net/vFez6/25/

Answer 1

旋转画布图的一般方法是：

• 保存上下文状态：context.save()
• 转换为对象的所需中心：context.translate(centerX,centerY)
• 按所需的弧度角旋转：context.rotate(Math.PI/4)
• 将对象偏移1/2宽度＆amp;高度：＆＃39; context.fillRect（-width / 2，-height / 2,50,30）＆＃39;
• 将上下文状态恢复为未旋转状态：＆＃39; context.restore（）＆＃39;

示例代码和演示：http://jsfiddle.net/m1erickson/7aqwjddt/

rotateRectangle(150,150,75,50,45*Math.PI/180);

function rotateRectangle(centerX,centerY,width,height,radianAngle){
    ctx.save();
    ctx.translate(centerX,centerY);
    ctx.rotate(radianAngle);
    ctx.fillRect(-width/2,-height/2,width,height);
    ctx.restore();
}