javascript HTML5 画布 - 旋转对象而不移动坐标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17125632/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 canvas - rotate object without moving coordinates
提问by user2479365
What I have is this:
我有的是这样的：
What I want is to rotate the redrectangle e.g. 20 degrees, but this is what I end up with:
我想要的是旋转红色矩形，例如 20 度，但这就是我最终得到的：
As you can see, the rectangle is rotated perfectly, but it's moved and doesn't match the black object anymore.
如您所见，矩形已完美旋转，但它已移动且不再与黑色对象匹配。
My code is:
我的代码是：
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.
我想让矩形转动而不从其位置移动。
Thanks.
谢谢。
回答by markE
Sounds like you want to rotate the rect around its centerpoint.
听起来您想围绕其中心点旋转矩形。
Red rectangle is original, Yellow rectangle is rotated around the centerpoint.
红色矩形是原始的，黄色矩形围绕中心点旋转。
To do that you need to first context.translateto the rect's centerpoint before rotating.
为此，您需要context.translate在旋转之前首先到达矩形的中心点。
// 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.
请注意，上下文现在处于旋转状态。
That means drawing position [0,0] is visually at [ x+width/2, y+height/2 ].
这意味着绘图位置 [0,0] 在视觉上位于 [ x+width/2, y+height/2 ]。
So you must draw the rotated rect at [ -width/2, -height/2 ] (not at the original unrotated x/y).
因此，您必须在 [ -width/2, -height/2 ] 处（而不是在原始未旋转的 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);
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/z4p3n/
这是代码和小提琴：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>
回答by user2479365
You can use a simple function to do this as an alternative to translate and rotate:
您可以使用一个简单的函数来执行此操作作为平移和旋转的替代方法：
This function will let you draw a line starting at x and y, and end at length at angle:
这个函数会让你画一条线，从 x 和 y 开始，以一定的角度结束：
function lineToAngle(ctx, x1, y1, length, angle) {
angle *= Math.PI / 180;
var x2 = x1 + length * Math.cos(angle),
y2 = y1 + length * Math.sin(angle);
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
return {x: x2, y: y2};
}
Usage:
用法：
lineToAngle(ctx, x, y, length, angle);
Demo
演示
var canvas = document.querySelector('canvas'),
ctx = canvas.getContext('2d'),
x = 100, y =50, length = 40, angle = 0, dlt = -2;
(function animate() {
//clear
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
lineToAngle(ctx, x, y, length, angle);
ctx.lineWidth = 10;
ctx.stroke();
angle += dlt;
if (angle < -90 || angle > 0) dlt = -dlt;
requestAnimationFrame(animate);
})();
function lineToAngle(ctx, x1, y1, length, angle) {
angle *= Math.PI / 180;
var x2 = x1 + length * Math.cos(angle),
y2 = y1 + length * Math.sin(angle);
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
return {x: x2, y: y2};
}body {background-color:#555557}
canvas {background:#ddd;border:1px solid #000}<canvas></canvas>
