javascript HTML5 Canvas：旋转时计算 ax,y 点

HTML5 Canvas: Calculating a x,y point when rotated

提问by sazr

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.

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

Example of the XML layout:

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"/> 

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 旋转后对象的新位置）。我试图想出一个通用函数/公式，我可以用它来计算这个点 P，但我的数学有点弱，我无法确定我打算使用什么弧/切线公式。

Can you assist me to come up with a formula I can use to calculate point P for rotations that can be both positive & negative?

你能帮我想出一个公式，我可以用它来计算点 P 的旋转可以是正负吗？

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)

在上面的例子中：point(14,446) 是左边，top point & point(226,496) 是不旋转时对象的中点，所以 point=(left+width/2,top+height/2) 和蓝色dot 是旋转时的中点。我知道如何计算点 (14,446) 和 (226,496) 之间的线的长度，但不知道如何计算蓝点 x,y 位置 - 顺便说一句：这条线的长度与蓝点 & 之间的线相同(14,446)

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

回答by Cheery

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

这很简单。在围绕角坐标系原点旋转时，Theta 坐标 (x,y) 变化为

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

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).

因此，您所需要的只是将旋转点转换为您拥有的点之一。让我们用更简单的方式来写：(x1,y1) = (14,446) 和 (x2,y2) = (226,496)。您正在尝试围绕（x1，y1）“旋转”（x2，y2）。在原点在 (x1,y1) 的新坐标系中计算 (dx2,dy2)。

(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);

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

最后一步是将点的坐标从原点 (x1,y1) 转换回原点 (0,0)；

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

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

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

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

pps：我希望我没有吓到你——如果你有任何问题，尽管问。

回答by dfsq

I think in your case you should be able to calculate this rotation position with the following system of equations:

我认为在您的情况下，您应该能够使用以下方程组计算此旋转位置：

x = R * Math.cos(angle - angle0);
y = R * Math.sin(angle - angle0);
angle  = deg * Math.PI / 180;
angle0 = Math.atan(y0/x0);

Rthe length of yor radius vector (lenin your example).
degangle in degrees you are rotating to, i.g 120°
xand ythe coordinates of the final position your are looking for.
angleis the actual rotation angle (in rad, not grads).
angle0is the initial angle point was rotated to relativly to the X-axis. We need to precalculate it using Math.atan.

R你的半径向量的长度（len在你的例子中）。
deg您旋转到的角度（以度为单位），ig 120°
x以及y您正在寻找的最终位置的坐标。
angle是实际的旋转角度（以弧度为单位，而不是梯度）。
angle0是相对于 X 轴旋转的初始角度点。我们需要使用 预先计算它Math.atan。

Haven't tested. So give it a try. But the idea is like that same - make use of trigonometric functions.

没测试过 所以试试吧。但这个想法是一样的 - 使用三角函数。

回答by Julien de Prabère

An example of coordinates calculation : Dice roll

坐标计算示例：掷骰子