HTML5 画布 - 旋转对象而不移动坐标

2022-01-17 00:00:00 javascript html5-canvas

我拥有的是:

我想要的是旋转 red 矩形，例如20度，但这就是我最终的结果:

What I want is to rotate the red rectangle e.g. 20 degrees, but this is what I end up with:

如您所见，矩形已完美旋转，但已移动，不再匹配黑色对象.

As you can see, the rectangle is rotated perfectly, but it's moved and doesn't match the black object anymore.

我的代码是:

context.save();
context.rotate(angle * Math.PI / 180); // in the screenshot I used angle = 20
context.translate(angle * 4, 2);
context.fillStyle = "red";
context.fillRect(x + 14, y - 16, 5, 16);
context.restore();

我想让矩形在不从其位置移动的情况下转动.

I want to make the rectangle turn without moving from its position.

谢谢.

推荐答案

听起来你想围绕它的中心点旋转矩形.

红色矩形是原始矩形，黄色矩形围绕中心点旋转.

Red rectangle is original, Yellow rectangle is rotated around the centerpoint.

为此，您需要先context.translate 到矩形的中心点，然后再旋转.

To do that you need to first context.translate to the rect's centerpoint before rotating.

// move the rotation point to the center of the rect

    ctx.translate( x+width/2, y+height/2 );

// rotate the rect

    ctx.rotate(degrees*Math.PI/180);

请注意，上下文现在处于旋转状态.

Note that the context is now in its rotated state.

这意味着绘图位置 [0,0] 在视觉上位于 [ x+width/2, y+height/2 ].

That means drawing position [0,0] is visually at [ x+width/2, y+height/2 ].

因此，您必须在 [ -width/2, -height/2 ] 处绘制旋转的矩形(而不是在原始未旋转的 x/y 处).

So you must draw the rotated rect at [ -width/2, -height/2 ] (not at the original unrotated x/y).

// draw the rect on the transformed context
// Note: after transforming [0,0] is visually [-width/2, -height/2]
//       so the rect needs to be offset accordingly when drawn

    ctx.rect( -width/2, -height/2, width,height);

这是代码和小提琴:http://jsfiddle.net/m1erickson/z4p3n/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var startX=50;
    var startY=80;

    // draw an unrotated reference rect
    ctx.beginPath();
    ctx.rect(startX,startY,100,20);
    ctx.fillStyle="blue";
    ctx.fill();

    // draw a rotated rect
    drawRotatedRect(startX,startY,100,20,45);

    function drawRotatedRect(x,y,width,height,degrees){

        // first save the untranslated/unrotated context
        ctx.save();

        ctx.beginPath();
        // move the rotation point to the center of the rect
        ctx.translate( x+width/2, y+height/2 );
        // rotate the rect
        ctx.rotate(degrees*Math.PI/180);

        // draw the rect on the transformed context
        // Note: after transforming [0,0] is visually [x,y]
        //       so the rect needs to be offset accordingly when drawn
        ctx.rect( -width/2, -height/2, width,height);

        ctx.fillStyle="gold";
        ctx.fill();

        // restore the context to its untranslated/unrotated state
        ctx.restore();

    }

}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

相关文章