javascript - 用数学旋转矩形

Question

我想像这样旋转矩形:

我不想使用 save()、translate()、rotate() 和 restore()。我想用简单的数学来做到这一点。这是我已经做过的示例:

demo

如何实现这一目标？

Answer 1

因此，您基本上需要计算每个 Angular 并使用 .lineTo() 而不是 .fillRect() 绘制矩形。

要将点绕原点旋转一定 Angular ，您需要:

var rotate = function( point, origin, angle) {
    angle = angle * Math.PI / 180.0;
    return {
        x: Math.cos(angle) * (point.x-origin.x) - Math.sin(angle) * (point.y -origin.y) + origin.x,
        y: Math.sin(angle) * (point.x-origin.x) + Math.cos(angle) * (point.y-origin.y) + origin.y
    };
}

然后定义矩形 Angular :

 var corners = [
        { x: 100, y: 0 },
        { x: 150, y: 0 },
        { x: 150, y: 50 },
        { x: 100, y: 50 }
    ];

并像这样渲染它:

    // for example: 
    // origin = { x: 125, y: 175 }, angle = 30;
    ctx.beginPath();
    corners.forEach( function( point ){
        var rotated = rotate( point, origin, angle );
        ctx.lineTo( rotated.x, rotated.y );
    });
    ctx.closePath();
    ctx.fill();

http://jsfiddle.net/grcbab4h/3/