HTML5画布：旋转后计算x，y点

Question

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

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，但我的数学知识有些薄弱，我无法确定应该使用哪个弧/切线公式。

你能帮助我想出一个公式，以便计算旋转可以是正数和负数的点P吗？

在上面的例子中，点（14,446）是左上角的点，点（226,496）是对象未旋转时的中点，因此点=（left+width/2，top+height/2），而蓝色点是旋转后的中点。我知道如何计算点（14,446）和点（226,496）之间的线段长度，但不知道如何计算蓝色点的x、y位置 - 顺便说一下，这条线段的长度与蓝色点与（14,446）之间的线段长度相同。

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

- sazr

Answer 1

这很简单。在以坐标系原点为中心旋转角度 Theta 时，坐标 (x,y) 会发生变化。

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）。在以（x1，y1）为原点的新坐标系统中计算（dx2，dy2）。

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

现在旋转（正角度为逆时针方向）：

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

最后一步是将点的坐标从原点(x1,y1)翻译回原点(0,0)。

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

附注：请也阅读此链接 :) http://en.wikipedia.org/wiki/Rotation_matrix，并且不要忘记在大多数编程语言中，三角函数主要使用弧度表示..

另外希望我没有吓到你——如果你有任何问题，请随时问。

- Cheery

Answer 2

我认为在你的情况下，你应该能够通过以下方程组计算出旋转位置：

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

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

尚未测试。所以试一试吧。但是思路是相同的 - 利用三角函数。

- dfsq

---

当你处理反正切时，有一件事情需要提及... 当 (x,y) 在第一或第三象限时，它将给出相同的角度；当 (x,y) 在第二或第四象限时，正确的角度应基于 x 和 y 的符号而定。 - Cheery

Answer 3

坐标计算的一个例子：掷骰子

- Julien de Prabère

---

请注意，仅链接答案不被鼓励，Stack Overflow（SO）的答案应该是对解决方案搜索的终点（而不是引用过时的参考资料）。请考虑在此处添加一个独立的摘要，保留链接作为参考。 - kleopatra