看到this之后代码,我不知道公式 x * sina + y * cosa 从哪里来。
在每个间隔之后,一个点围绕轴旋转一个 Angular 。
我需要旋转后点的 x 和 z 位置。
在提到的文章中,使用了 x * sina + y * cosa 公式。不明白是从哪里派生的。
我遍历了三 Angular 函数,但仍然一无所获。
有人可以帮忙吗?基本思路。一些引用。
最佳答案
首先,他的代码是在 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'
上有您神秘的公式,只是加法的顺序颠倒了。
关于javascript - 旋转后如何计算一个点在 HTML5 canvas 中的位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13043945/