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

Question

看到this代码后，我无法确定公式 x * sina + y * cosa 的来源。

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

旋转后我需要点的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)

使用我们拥有的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'上有你的神秘公式，只有加法的顺序是相反的。

Answer 2

可以解释旋转，例如复杂的飞机。

cos（角度）+ i * sin（角度）= e ^（i *角度）;

复平面中的乘法规则表明A * e ^（i * angle1）* B * e ^（i * angle2），其中A和B是矢量长度。然后乘以这些向量得到A * B * e ^（i *（angle1 + angle2））并且因为cos（角度）+ i * sin（角度）的长度是1，你可以通过复数乘法旋转向量A.影响其长度。

（X + i * y）*（cos（角度）+ i * sin（角度））==（x * cos-y * sin）+ i *（x * sin + y * cos）
（只需省略'i'项，将实部用作x坐标，将部分用作y坐标。