如何在HTML5画布中旋转后计算点的位置？

Question

在看了这段代码后，我无法理解公式x * sina + y * cosa的来源。

每个时间间隔后，一个点绕轴线旋转了一个角度a。

我需要在旋转后获得该点的x和z位置。

在上述文章中使用了公式x * sina + y * cosa，但我不明白它是从哪里推导出来的。

我已经查阅了三角函数，但还是一无所获。

有人能帮忙吗？基本思路和一些参考资料。

- Radu

---

请返回翻译后的文本。 - Kos

Answer 1

首先，他的代码是在三维空间中的投影，但问题是关于绕Z轴旋转，这与二维旋转相同，且Z值保持不变。

当你有任何给定点（x，y）时，你形成一个直角三角形。看一下这张图片：

现在假设a是15度。

那个圆被称为单位圆，其半径为1。

• 沿着Y轴的绿线长度是该角度的正弦值。
• 沿着X轴的绿线长度是该角度的余弦值。

请注意，由点坐标形成的三角形的大小并不重要。只要保持相同的角度，正弦和余弦的值将保持不变，因为这里仅涉及单位圆内的三角形部分。

正弦是点在Y轴上移动的量，余弦是X轴上移动的量，以便点在空间中移动并保持与原点相同的角度（它们的值范围从0到1，即圆的半径）

但是，如何移动一个点以便将其角度与原点改变？

首先，对于任何与单位圆相交的点，也就是说它的三角形的斜边为1，它的位置是(余弦，正弦)，对于一个在单位圆外的点，例如(2,5)，它的位置是(斜边*余弦，斜边*正弦) 假设我们有一个点(x,y)，它距离原点的角度为a度，我们想将它旋转b度，这意味着我们想要一个新的位置(x',y')，其中角度变为a+b度，但距离原点（斜边）保持不变。

x = hypotenuse * cosine(a)
y = hypotenuse * sine(a)

x' = hypotenuse * cosine(a + b)
y' = hypotenuse * sine(a + b)

通过使用三角函数角加法公式，我们可以得到以下结果：

cosine(a + b) = cosine(a) * cosine(b) - sine(a) * sine(b)
sine(a + b) = sine(a) * cosine(b) + cosine(a) * sine(b)

如果我们将其应用于我们的 (x',y')，我们得到：

x' = hypotenuse * cosine(a) * cosine(b) - hypotenuse * sine(a) * sine(b)
y' = hypotenuse * sine(a) * cosine(b) + hypotenuse * cosine(a) * sine(b)

如果你还记得我们对于 (x,y) 的定义，你会发现它与下面这个完全相同：

x' = x * cosine(b) - y * sine(b)
y' = y * cosine(b) + x * sine(b)

这就是你神秘的公式，就在我们的y'上，只是加法顺序被颠倒了。

- Delta

---

谢谢。这解决了我的问题。我不知道如何去掉一个角度，使方程只包含b角度。 - Radu

当我只知道旋转角度、旧的 x 和 y 值时，我该如何应用这个公式？我的 x 和 y 是从左边和上边计算出来的（因为它基于浏览器对位置的实现），旋转是以中心为中心进行的。我只需要知道画布中一个点在旋转后的新位置即可... - Rutwick Gangurde

Answer 2

旋转可以用复数平面来解释。

cos(angle) + i * sin(angle) = e^(i*angle);

复数平面中的乘法规则表明：A*e^(i*angle1) * B*e^(i*angle2)，其中A和B是向量长度。然后将这些向量相乘得到A*B*e^(i*(angle1+angle2))，因为cos(angle)+i*sin(angle)的长度是1，所以可以通过复合乘法旋转向量A而不影响其长度。

(X+ i*y) * (cos(angle) + i*sin(angle)) == (x*cos-y*sin) + i * (x*sin+y*cos) （只需省略“i”项并将实部用作x坐标，虚部用作y坐标即可。

- Aki Suihkonen