javascript - 旋转后如何计算一个点在 HTML5 canvas 中的位置？

Question

看到this之后代码，我不知道公式 x * sina + y * cosa 从哪里来。

在每个间隔之后，一个点围绕轴旋转一个 Angular 。

我需要旋转后点的 x 和 z 位置。

在提到的文章中，使用了 x * sina + y * cosa 公式。不明白是从哪里派生的。

我遍历了三 Angular 函数，但仍然一无所获。

有人可以帮忙吗？基本思路。一些引用。

Answer 1

首先，他的代码是在 3D 空间上的投影，但问题是关于 Z 轴上的旋转，这与 2D 旋转相同并且 Z 值保持不变。

当你有任何给定点 (x,y) 时，你会形成一个直 Angular 三 Angular 形。看看这张照片:

现在假设 a 是 15 度

这个圆称为单位圆，它的半径是 1。

• 沿Y 轴的绿线长度是 Angular 正弦。
• 沿X 轴的绿线长度是 Angular 余弦。

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

sine 是一个点在 Y 轴上应该移动多少，cosine 是一个点在 X 轴上移动多少才能移动在空间中并保持与最小步长相同的 Angular (它们的值范围从 0 到 1，这是圆的半径)

但是您如何移动空间中的一个点以改变它与原点的 Angular ？

嗯，首先，对于任何与单位圆相交的点，也就是它的三 Angular 形的斜边为1，它的位置是(cosine, sine)，例如单位圆外的一点(2,5)，它的位置是(hypotenuse * cosine, hypotenuse * sine)

假设我们有一个点 (x,y)，距离原点 a 度，我们想将它旋转 b 度，这意味着我们需要一个新的位置 (x',y') ，其中 Angular 更改为 a+b 度，但与原点(斜边)的距离保持不变一样。

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

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

通过使用 trigonometric angle adition我们有公式

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' 上有您神秘的公式，只是加法的顺序颠倒了。