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

Question

看到这段代码后，我想不通x * sina + y * cosa这个公式是从哪里来的。

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

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

在上述文章中，使用了x * sina + y * cosa公式。我不明白它是从它派生的。

我通过三角函数仍然一无所获。

任何人都可以帮忙吗？基本思想。一些参考资料。

Answer 1

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

当你有任何给定的点 (x,y) 时，你就形成了一个直角三角形。看看这张照片：

现在假设a是15度

该圆称为单位圆，其半径为1。

• 沿Y轴的绿线长度是sine角度的。
• 沿X轴的绿线的长度是cosine角度的。

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

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

但是你如何在空间中移动一个点以改变它与原点的角度呢？

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

想象一下，我们有一个与原点(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'，只是加法的顺序颠倒了。

Answer 2

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

cos(角度) + i * sin(角度) = e^(i*角度);

复平面乘法规则表明 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 坐标。