HTML5 画布 - 旋转对象而不移动坐标-前端问题

HTML5 canvas - rotate object without moving coordinates(HTML5 画布 - 旋转对象而不移动坐标)

本文介绍了HTML5 画布 - 旋转对象而不移动坐标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我拥有的是:

我想要的是旋转 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>

这篇关于HTML5 画布 - 旋转对象而不移动坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！