Flash/Flex学习笔记(48)：反向运动学(下)

先要复习一下三角函数与余弦定理:

对于直角三角形，三边长a,b,c与三个角A,B,C的关系如下：

正弦函数:

$sin(A)=\frac{a}{c}$

余弦函数：

$cos(A)=\frac{b}{c}$

正切函数：

$tan(A)=\frac{a}{b}$

反正切函数:(好象现在的教科书里改叫“余切”函数)

$arctan(A)=\frac{b}{a}$ 或 $cot(A)=\frac{b}{a}$

勾股定律：

$c^2=a^2+b^2$

但对于不是直角的三角形，就必须用余弦定律来处理了：

$a=\sqrt{b^2+c^2-2bc\times cos(A)}$

$b=\sqrt{a^2+c^2-2ac\times cos(B)}$

$c=\sqrt{a^2+b^2-2ab\times cos(C)}$

$cos(C)=\frac{(a^2+b^2-c^2)}{2a\times b}$

$cos(B)=\frac{(a^2+c^2-b^2)}{2a\times c}$

$cos(A)=\frac{(b^2+c^2-a^2)}{2b\times 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

show source view source

print ?

01
package {

02
import flash.display.Sprite;

03
import flash.events.Event;

04
import flash.geom.Point;

05

06
public class Cosines extends Sprite {

07

08
private var seg0:Segment;

09
private var seg1:Segment;

10
private var seg0Width:uint = 80;

11
private var seg1Width:uint = 100;

12

13
public function Cosines() {

14
init();

15
}

16

17
private function init():void {

18
seg0=new Segment(seg0Width,10,0xff0000);

19
addChild(seg0);

20
seg1=new Segment(seg1Width,20,0x0000ff);

21
addChild(seg1);

22
seg1.x=stage.stageWidth/2;

23
seg1.y=stage.stageHeight/2;

24
addEventListener(Event.ENTER_FRAME, onEnterFrame);

25
}

26

27
private function onEnterFrame(event:Event):void {

28
var dx:Number=mouseX-seg1.x;

29
var dy:Number=mouseY-seg1.y;

30
var dist:Number=Math.sqrt(dx*dx+dy*dy);

31
var a:Number=seg0Width;

32
var b:Number=seg1Width;

33
var c:Number=Math.min(dist,a+b);//注:如果鼠标离自由端太远，构不成三角形时，c边以a+b为准，相当于此时三角形退化为二个角接近0, 另一角接近180度的特殊情况

34
var B:Number = Math.acos((b * b - a * a - c * c) / (-2 * a * c));//注：flash中的坐标系跟数学中的常规坐标系，y轴是反向的，所以"2"前要加负号

35
var C:Number = Math.acos((c * c - a * a - b * b) / (-2 * a * b));

36
var D:Number=Math.atan2(dy,dx);

37

38
//处理固定端的旋转

39
seg1.rotation = (D + B) * 180 / Math.PI;

40

41
//重新将seg0挂到seg1末端

42
seg0.x=seg1.getPin().x;

43
seg0.y=seg1.getPin().y;

44

45
//处理自由端的旋转

46
var E:Number=D+B+Math.PI+C;

47
seg0.rotation=E*180/Math.PI;

48
}

49
}

50
}

问题来了:这种处理方式与上一篇中的处理方式有什么区别么？如果我们同样把播放速度放慢到每秒一帧，仔细观察

show source view source

print ?

01
private function onEnterFrame(event:Event):void {

02
var dx:Number=mouseX-seg1.x;

03
var dy:Number=mouseY-seg1.y;

04
var dist:Number=Math.sqrt(dx*dx+dy*dy);

05
var a:Number=seg1Width;

06
var b:Number=seg0Width;

07
var c:Number=Math.min(dist,a+b);

08
var B:Number = Math.acos((b * b - a * a - c * c) / (-2 * a * c));

09
var C:Number = Math.acos((c * c - a * a - b * b) / (-2 * a * b));

10
var D:Number=Math.atan2(dy,dx);

11
seg1.rotation = (D + B) * 180 / Math.PI;

12
seg0.x=seg1.getPin().x;

13
seg0.y=seg1.getPin().y;

14
var E:Number=D+B+Math.PI+C;

15
seg0.rotation=E*180/Math.PI;

16

17
//新增的画线部分，以方便观察

18
graphics.clear();

19
graphics.lineStyle(1,0xff0000,0.5);

20
graphics.moveTo(mouseX,mouseY);

21
graphics.lineTo(seg0.getPin().x,seg0.getPin().y);

22

23
graphics.lineStyle(1,0x0000ff,0.5);

24
graphics.moveTo(mouseX,mouseY);

25
graphics.lineTo(seg1.getPin().x,seg1.getPin().y);

26

27
}

通过对比上一篇里“同样放慢到每秒一帧”的那个示例，观察辅助线可以看到：现在这种方式对于系统姿态的调整是"一步到位"的，而上篇中的方式需要经过多次调整，才能达到最终的稳定姿态。

利用这个区别我们可以做一些性能优化：如果一次调整到位后，EnterFrameHandler函数里可以不做任何处理，以节省CPU资源。同时考虑上面代码中的三角型退化成直线的特殊情况(通常是鼠标位置与自由端太远时才发生)，相当于二个关节直接拼成一个直棒，这时其实只要简单处理固定端旋转，同时把自由端重新挂在固定端即可。下面是优化后的代码

show source view source

print ?

01
package {

02
import flash.display.Sprite;

03
import flash.events.Event;

04
import flash.geom.Point;

05

06
public class Cosines extends Sprite {

07

08
private var seg0:Segment;

09
private var seg1:Segment;

10
private var seg0Width:uint=80;

11
private var seg1Width:uint=100;

12

13
//用于保存上次自由端的dx,dy值

14
private var dxOld:Number=0;

15
private var dyOld:Number=0;

16

17
public function Cosines() {

18
init();

19
}

20

21
private function init():void {

22
seg0=new Segment(seg0Width,10,0xff0000);

23
addChild(seg0);

24
seg1=new Segment(seg1Width,20,0x0000ff);

25
addChild(seg1);

26
seg1.x=stage.stageWidth/2;

27
seg1.y=stage.stageHeight/2;

28
addEventListener(Event.ENTER_FRAME, onEnterFrame);

29
}

30

31
private function onEnterFrame(event:Event):void {

32
var dx:Number=mouseX-seg1.x;

33
var dy:Number=mouseY-seg1.y;

34
if (dx==dxOld&&dy==dyOld) {

35
//trace("已经调整到位了!");

36
return;//直接返回，不作处理了

37
}

38
dxOld=dx;

39
dyOld=dy;

40
//trace(dx,dy);

41
var dist:Number=Math.sqrt(dx*dx+dy*dy);

42
var a:Number=seg1Width;

43
var b:Number=seg0Width;

44
if (dist>=(a+b)) {

45
//trace(dist,a+b);

46
seg1.rotation=seg0.rotation=Math.atan2(dy,dx)*180/Math.PI;

47
} else {

48
var c:Number=Math.min(dist,a+b);

49
var B:Number = Math.acos((b * b - a * a - c * c) / (-2 * a * c));

50
var C:Number = Math.acos((c * c - a * a - b * b) / (-2 * a * b));

51
var D:Number=Math.atan2(dy,dx);

52
seg1.rotation = (D + B) * 180 / Math.PI;

53
var E:Number=D+B+Math.PI+C;

54
seg0.rotation=E*180/Math.PI;

55
}

56
seg0.x=seg1.getPin().x;

57
seg0.y=seg1.getPin().y;

58
}

59
}

60
}

最后一个问题：这种方式虽然更高效，但是也有一个缺点，只能向一个方向旋转，原因就在于角度 E = D+B+Math.PI + C这种计算方式，如果想换一个方向的话，大家可以把示意图中的三角型以c边为轴“向上翻”，这里就不重复画了，seg1的旋转角度和E的计算公式改成下面这样，其它不变：

view source

print ?

1
seg1.rotation = (D - B) * 180 / Math.PI;

2
var E:Number=D - B + Math.PI - C;

我们可以根据鼠标所在点是否在固定端左边或右边，用代码切换旋转方向，这样就与上一篇中的效果彻底一致了