Flash/Flex学习笔记(48):反向运动学(下)
先要复习一下三角函数与余弦定理:
对于直角三角形,三边长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
package {
import flash.display.Sprite;
import flash.events.Event;
import flash.geom.Point;
public class Cosines extends Sprite {
private var seg0:Segment;
private var seg1:Segment;
private var seg0Width:uint = 80;
private var seg1Width:uint = 100;
public function Cosines() {
init();
}
private function init():void {
seg0=new Segment(seg0Width,10,0xff0000);
addChild(seg0);
seg1=new Segment(seg1Width,20,0x0000ff);
addChild(seg1);
seg1.x=stage.stageWidth/2;
seg1.y=stage.stageHeight/2;
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(event:Event):void {
var dx:Number=mouseX-seg1.x;
var dy:Number=mouseY-seg1.y;
var dist:Number=Math.sqrt(dx*dx+dy*dy);
var a:Number=seg0Width;
var b:Number=seg1Width;
var c:Number=Math.min(dist,a+b);//注:如果鼠标离自由端太远,构不成三角形时,c边以a+b为准,相当于此时三角形退化为二个角接近0, 另一角接近180度的特殊情况
var B:Number = Math.acos((b * b - a * a - c * c) / (-2 * a * c));//注:flash中的坐标系跟数学中的常规坐标系,y轴是反向的,所以"2"前要加负号
var C:Number = Math.acos((c * c - a * a - b * b) / (-2 * a * b));
var D:Number=Math.atan2(dy,dx);
//处理固定端的旋转
seg1.rotation = (D + B) * 180 / Math.PI;
//重新将seg0挂到seg1末端
seg0.x=seg1.getPin().x;
seg0.y=seg1.getPin().y;
//处理自由端的旋转
var E:Number=D+B+Math.PI+C;
seg0.rotation=E*180/Math.PI;
}
}
}
问题来了:这种处理方式 与 上一篇中的处理方式有什么区别么?如果我们同样把播放速度放慢到每秒一帧,仔细观察
private function onEnterFrame(event:Event):void {
var dx:Number=mouseX-seg1.x;
var dy:Number=mouseY-seg1.y;
var dist:Number=Math.sqrt(dx*dx+dy*dy);
var a:Number=seg1Width;
var b:Number=seg0Width;
var c:Number=Math.min(dist,a+b);
var B:Number = Math.acos((b * b - a * a - c * c) / (-2 * a * c));
var C:Number = Math.acos((c * c - a * a - b * b) / (-2 * a * b));
var D:Number=Math.atan2(dy,dx);
seg1.rotation = (D + B) * 180 / Math.PI;
seg0.x=seg1.getPin().x;
seg0.y=seg1.getPin().y;
var E:Number=D+B+Math.PI+C;
seg0.rotation=E*180/Math.PI;
//新增的画线部分,以方便观察
graphics.clear();
graphics.lineStyle(1,0xff0000,0.5);
graphics.moveTo(mouseX,mouseY);
graphics.lineTo(seg0.getPin().x,seg0.getPin().y);
graphics.lineStyle(1,0x0000ff,0.5);
graphics.moveTo(mouseX,mouseY);
graphics.lineTo(seg1.getPin().x,seg1.getPin().y);
}
通过对比上一篇里“同样放慢到每秒一帧”的那个示例,观察辅助线可以看到:现在这种方式对于系统姿态的调整是"一步到位"的,而上篇中的方式需要经过多次调整,才能达到最终的稳定姿态。
利用这个区别我们可以做一些性能优化:如果一次调整到位后,EnterFrameHandler函数里可以不做任何处理,以节省CPU资源。同时考虑上面代码中的三角型退化成直线的特殊情况(通常是鼠标位置与自由端太远时才发生),相当于二个关节直接拼成一个直棒,这时其实只要简单处理固定端旋转,同时把自由端重新挂在固定端即可。下面是优化后的代码
package {
import flash.display.Sprite;
import flash.events.Event;
import flash.geom.Point;
public class Cosines extends Sprite {
private var seg0:Segment;
private var seg1:Segment;
private var seg0Width:uint=80;
private var seg1Width:uint=100;
//用于保存上次自由端的dx,dy值
private var dxOld:Number=0;
private var dyOld:Number=0;
public function Cosines() {
init();
}
private function init():void {
seg0=new Segment(seg0Width,10,0xff0000);
addChild(seg0);
seg1=new Segment(seg1Width,20,0x0000ff);
addChild(seg1);
seg1.x=stage.stageWidth/2;
seg1.y=stage.stageHeight/2;
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(event:Event):void {
var dx:Number=mouseX-seg1.x;
var dy:Number=mouseY-seg1.y;
if (dx==dxOld&&dy==dyOld) {
//trace("已经调整到位了!");
return;//直接返回,不作处理了
}
dxOld=dx;
dyOld=dy;
//trace(dx,dy);
var dist:Number=Math.sqrt(dx*dx+dy*dy);
var a:Number=seg1Width;
var b:Number=seg0Width;
if (dist>=(a+b)) {
//trace(dist,a+b);
seg1.rotation=seg0.rotation=Math.atan2(dy,dx)*180/Math.PI;
} else {
var c:Number=Math.min(dist,a+b);
var B:Number = Math.acos((b * b - a * a - c * c) / (-2 * a * c));
var C:Number = Math.acos((c * c - a * a - b * b) / (-2 * a * b));
var D:Number=Math.atan2(dy,dx);
seg1.rotation = (D + B) * 180 / Math.PI;
var E:Number=D+B+Math.PI+C;
seg0.rotation=E*180/Math.PI;
}
seg0.x=seg1.getPin().x;
seg0.y=seg1.getPin().y;
}
}
}
最后一个问题:这种方式虽然更高效,但是也有一个缺点,只能向一个方向旋转,原因就在于角度 E = D+B+Math.PI + C这种计算方式,如果想换一个方向的话,大家可以把示意图中的三角型以c边为轴“向上翻”,这里就不重复画了,seg1的旋转角度和E的计算公式改成下面这样,其它不变:
seg1.rotation = (D - B) * 180 / Math.PI;
var E:Number=D - B + Math.PI - C;
我们可以根据鼠标所在点是否在固定端左边或右边,用代码切换旋转方向,这样就与上一篇中的效果彻底一致了
- 开发 | 谷歌发布TensorFlow 1.4版本:支持分布式训练,迎来三大新变化
- 创建用户时的密码校验问题(r2第34天)
- 巧用xmltype解析clob数据(r2笔记33天)
- R语言-中国各城市PM2.5数据间的相关分析
- 妹子如何运用R语言数据分析选择心仪的对象?
- 生产环境大型sql语句调优实战第一篇(二) (r2笔记32天)
- 生产环境大型sql语句调优实战第一篇(一) (r2笔记第31天)
- 讨论 | 你是否遇到过你完全不能理解的机器学习概念?
- 【专业技术】C++里面重要的几个关键字的用法
- sql monitor的使用(一) (r2第30天)
- sql_profile的使用(一) (r2笔记29天)
- 关于权限设置的一个小把戏(r2第27天)
- R语言实现混合模型
- 数据迁移判断非空约束(r2笔记45天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- kali下安装beef并联合Metasploit
- 初次使用maven创建web工程发现只有一个idea目录,src,webapp目录都不见了,解决方案
- 栈论 : 递归与栈式访问,如何用栈实现所有递归操作(幼儿园题目篇,题目2)
- SQL注入原理及代码分析(一)
- SQL注入原理及代码分析(二)
- 写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出 现的次数。
- SSRF漏洞简单分析
- 树莓派基础实验30:BMP180气压传感器实验
- DC-1靶机实战和分析
- 如何用Python优雅的登录校园网?
- PHP入门之类型与运算符
- 栈论 : 递归与栈式访问,如何用栈实现所有递归操作(幼儿园题目篇,题目3)
- Maven是什么? Maven的概念+作用+仓库的介绍+常用命令
- JDK8;HashMap:再散列解决hash冲突 ,源码分析和分析思路
- 写一个 Singleton