HTML5 Canvas：旋转时计算x，y点 [英] HTML5 Canvas: Calculating a x,y point when rotated

问题描述

我开发了一个HTML5 Canvas应用程序，它涉及读取一个xml文件，该文件描述了我需要在画布上绘制的箭头，矩形和其他形状的位置。

I developing a HTML5 Canvas App and it involves reading a xml file that describes the position of arrows, rectanges and other shapes I need to to draw on the canvas.

XML布局示例：

<arrow left="10" top="20" width="100" height="200" rotation="-40" background-color="red"/> 
<rect left="10" top="20" width="100" height="200" rotation="300" background-color="red"/> 

如果对象被旋转，则涉及计算一个点的位置（称为P的新位置）旋转后的物体）绕另一个点（左，上）旋转时。我试图想出一个通用函数/公式，我可以用来计算这个点P，但我的数学有点弱&我不能确定我打算使用什么弧/正切公式。

If the object is rotated it involves calculating the position of a point(called P the new position of the object after rotation) when rotated around another point(left,top). I am attempting to come up with a general function/formula I can use to calculate this point P but my Maths is a little weak & I cannot identify what arc/tangent formula I am meant to use.

你能帮我提出一个我可以用来计算点P的公式吗？旋转既可以是积极的，也可以是否定？

在上面的例子中：point（14,446）是左，顶点和&点（226,496）是未旋转时物体的中点，因此点=（左+宽度/ 2，顶部+高度/ 2），蓝点是旋转时的中点。我知道如何计算点之间的线长（14,446）& （226,496）但不是如何计算蓝点x，y位置 - BTW：该线的长度与蓝点和蓝线之间的线相同。 （14,446）

In the above example: point(14,446) is the left,top point & point(226,496) is the mid point of the object when NOT rotated so the point=(left+width/2,top+height/2) and the blue dot is the mid point when rotated. I know how to calulate the length of the line between points (14,446) & (226,496) but not how to calculate the blue point x,y position - BTW: the length of this line is the same as the line between the blue point & (14,446)

len = sqrt( (496-446)^2 + (226-14)^2 );
    = 227.56;

推荐答案

这很简单。围绕坐标系原点旋转角度Theta坐标（x，y）正在变化为

It is quite simple. In rotation around the origin of the coordinate system for angle Theta coordinates (x,y) are changing as

x' = x * cos(Theta) - y * sin(Theta);
y' = x * sin(Theta) + y * cos(Theta); 

因此，您需要的只是将旋转点转换为您拥有的其中一个点。让我们以更简化的方式写它：（x1，y1）=（14,446）和（x2，y2）=（226,496）。你试图围绕（x1，y1）旋转（x2，y2）。在新坐标系中计算（dx2，dy2），原点为（x1，y1）。

So, all that you need is to translate point of rotation to one of the points that you have. Lets write it in a more simplified way: (x1,y1) = (14,446) and (x2,y2) = (226,496). You are trying to "rotate" (x2,y2) around (x1,y1). Calculate (dx2,dy2) in a new coordinate system with the origin at (x1,y1).

(dx2,dy2) = (x2-x1,y2-y1);

现在旋转（正角度是逆时针）：

Now rotate (positive angles are counterclockwise):

dx2' = dx2 * cos(165 Degrees) - dy2 * sin(165 Degrees);
dy2' = dx2 * sin(165 Degrees) + dy2 * cos(165 Degrees);

最后一步是将点的坐标从（x1，y1）处的原点转换回原始（0,0）;

The last step is to translate coordinates of the point from the origin at (x1,y1) back to the original (0,0);

x2' = dx2' + x1;
y2' = dy2' + y1;

ps：也读这个:) http://en.wikipedia.org/wiki/Rotation_matrix 并且不要忘记不同编程语言中的大多数三角函数主要处理弧度..

ps: read also this :) http://en.wikipedia.org/wiki/Rotation_matrix and do not forget that most trigonometric functions in different programming languages deal mostly with radians..

pps：我希望我没有害怕你 - 问你是否有任何问题。

pps: and I hope that I did not scared you - ask if you have any questions.

这篇关于HTML5 Canvas：旋转时计算x，y点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！