先要复习一下三角函数与余弦定理:
对于直角三角形,三边长a,b,c与三个角A,B,C的关系如下:
正弦函数:
余弦函数:
正切函数:
反正切函数:(好象现在的教科书里改叫“余切”函数)
勾股定律:
但对于不是直角的三角形,就必须用余弦定律来处理了:
利用余弦定理也可以处理反向运动学中的伸展:
上面这个是示意图(花了我近一天时间才弄明白,汗,高中的数学知识全还给老师了)
说明:蓝色的seg1作为固定端,红色的seg0作为自由端,下面是处理步骤
1.根据鼠标所在位置(mouseX,mouseY)得到dy,dx,进而确定角度D
2.根据a,b,c边长,确定角度B
3.蓝色seg1的旋转角度为 D+B
4.蓝色seg1旋转后,将红色seg0重新挂到seg1末端
5.红色seg0的旋转角度,我们借助向量平移,可以得到最终的旋转角度E为: D + B + 180度 + C
问题来了:这种处理方式 与 上一篇中的处理方式有什么区别么?如果我们同样把播放速度放慢到每秒一帧,仔细观察
通过对比上一篇里“同样放慢到每秒一帧”的那个示例,观察辅助线可以看到:现在这种方式对于系统姿态的调整是"一步到位"的,而上篇中的方式需要经过多次调整,才能达到最终的稳定姿态。
利用这个区别我们可以做一些性能优化:如果一次调整到位后,EnterFrameHandler函数里可以不做任何处理,以节省CPU资源。同时考虑上面代码中的三角型退化成直线的特殊情况(通常是鼠标位置与自由端太远时才发生),相当于二个关节直接拼成一个直棒,这时其实只要简单处理固定端旋转,同时把自由端重新挂在固定端即可。下面是优化后的代码
最后一个问题:这种方式虽然更高效,但是也有一个缺点,只能向一个方向旋转,原因就在于角度 E = D+B+Math.PI + C这种计算方式,如果想换一个方向的话,大家可以把示意图中的三角型以c边为轴“向上翻”,这里就不重复画了,seg1的旋转角度和E的计算公式改成下面这样,其它不变:
我们可以根据鼠标所在点是否在固定端左边或右边,用代码切换旋转方向,这样就与上一篇中的效果彻底一致了