Question

我需要在画布中按中心点绘制一个旋转的矩形，但我想为它设置一个x和y。我实际上是将矩形移动到$b.width / 2和$b.height / 2。我不知道该怎么做。

这是我的班级代码。注意：$b是我的矩形。

do {
    switch($b.t) {
        case 0: { // draw rectangle
            context.fillStyle = $b.tint;
            if($b.rotate) {
                context.save();
                context.translate($b.width, $b.height);
                context.rotate(($b.rotate * Math.PI) / 180);
                context.fillRect(-$b.width / 2, -$b.height / 2, $b.width, $b.height);
                context.restore();
            }else{
                context.fillRect($b.width / 2, $b.height / 2, $b.width, $b.height);
            }
            break;
        }
    }
} while($b = queue[$i ++]);

Answer 1

所以你想要设置一个围绕它自己的中心点旋转的矩形的中心点？

只需将您想要的x，y添加到初始翻译中：

注意：由于您正在进行简单的非嵌套转换，因此请按相反的顺序撤消转换。上下文save & restore将起作用，但您正在保存/恢复所有其他上下文属性，因此效率不高。

// translate (including the desired centerX & center)
context.translate(x+b.width/2,y+b.height/2);

// rotate
context.rotate(($b.rotate * Math.PI) / 180);

// fill the rect offset by half its size
context.fillRect(-$b.width / 2, -$b.height / 2, $b.width, $b.height);

// unrotate
context.rotate((-$b.rotate * Math.PI) / 180);

// untranslate
context.translate(-x-b.width/2,-y-b.height/2);

通过位置设置的中心点在画布中旋转rect

1 个答案: