- 浏览: 119358 次
- 性别:
- 来自: 杭州
文章分类
最新评论
-
zhouhaiyang88:
huang-tao 写道你好,在吗?请问,我启动Tomcat时 ...
ActiveMq-JMS简单实例使用tomcat -
xurichusheng:
huang-tao 写道你好,在吗?请问,我启动Tomcat时 ...
ActiveMq-JMS简单实例使用tomcat -
wgcooo:
javax.naming.NameNotFoundExcept ...
ActiveMq-JMS简单实例使用tomcat -
huang-tao:
你好,在吗?请问,我启动Tomcat时报如下错,是什么原因?= ...
ActiveMq-JMS简单实例使用tomcat -
Eric.Yan:
好文章,明天试一试
ActiveMq-JMS简单实例使用tomcat
先要复习一下三角函数与余弦定理:
对于直角三角形,三边长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;
我们可以根据鼠标所在点是否在固定端左边或右边,用代码切换旋转方向,这样就与上一篇中的效果彻底一致了
发表评论
-
Flash/Flex学习笔记(50):矩阵变换
2011-04-24 13:52 1137先回顾一下Silvelright中的矩阵变换[转]WPF中的M ... -
Flash/Flex学习笔记(49):背面剔除与 3D 灯光
2011-04-24 13:50 957今天继续:上一回Flash/Flex学习笔记(50):3D线条 ... -
Flash/Flex学习笔记(48):迷你滚动条ScrollBar
2011-04-24 13:46 1034先看最终效果: 整个swf最终不到4k, ... -
Flash/Flex学习笔记(47):利用FMS快速创建一个文本聊天室
2011-04-24 13:45 959先来看客户端fla的构成: 第一帧:登录界面 第一帧的 ... -
Flash/Flex学习笔记(46):使用TweenLite
2011-04-24 13:43 1646TweenLite是第三方出品的专用于各种缓动动画的类库,其性 ... -
Flash/Flex学习笔记(45):3维旋转与透视变换(PerspectiveProjection)
2011-04-24 13:41 1182Flash/Flex学习笔记:3D基础 里已经介绍了3D透 ... -
Flash/Flex学习笔记(44):3D线条与填充
2011-04-24 13:39 10713D线条:把上一篇中的3D坐标旋转示例稍做修改,用线把各个 ... -
Flash/Flex学习笔记(43):3D基础
2011-04-24 13:34 1112之前我们所做的动画都 ... -
Flash/Flex学习笔记(41):反向运动学(上)
2011-04-24 13:29 912先回顾上篇所说的"正向运动学":以人行 ... -
Flash/Flex学习笔记(40):正向运动学
2011-04-24 13:27 855所谓"正向运动学"通俗点讲就是把几个连接部 ... -
Flash/Flex学习笔记(39):万有引力与粒子系统
2011-04-24 13:26 702万有引用公式: 其中G为万有引力常数 var numP ... -
Flash/Flex学习笔记(38):动量守恒与能量守恒
2011-04-24 13:24 913动能公式: 动量公式: 动量守恒: 能量守恒: ... -
Flash/Flex学习笔记(37):坐标旋转
2011-04-24 13:23 994坐标旋转是个啥概念呢? 如上图,(蓝色)小球 绕某一 ... -
Flash/Flex学习笔记(36):碰撞检测
2011-04-24 13:22 583碰撞检测基本上可能分为二类:对象与对象的碰撞检测、对象与点 ... -
Flash/Flex学习笔记(35):弹性运动续--弹簧
2011-04-24 13:21 733上一篇里演示的弹性运动加上摩擦力因素后,物体最终基本上都会比较 ... -
Flash/Flex学习笔记(34):弹性运动
2011-04-24 13:20 744动画中的弹性运动 从视觉效果上接近 物理经典力学中的单摆运 ... -
Flash/Flex学习笔记(33):缓动动画
2011-04-24 13:18 972缓动 与 匀变速 看上去很类似,但其实有区别: 匀变速的 ... -
Flash/Flex学习笔记(32):不用系统组件(纯AS3)的视频播放器--只有8.82K
2011-04-24 13:17 1244以前为了赶项目,利用系统组件制作过一款视频播放器(见Fla ... -
Flash/Flex学习笔记(31):自己动手实现一个滑块控件(JimmySilder)
2011-04-24 13:15 937先看最终的演示: 滑块条的应用实在太广泛了:mp3播放器中声 ... -
Flash/Flex学习笔记(30):如何正确监听Stage对象的事件
2011-04-24 13:13 1265如果想在一个自定义类中注册对stage对象的监听事件,然后在另 ...
相关推荐
附件是关于 Flash/Flex 几个重要框架 Cairngorm、Mate、PureMVC以及Swiz 的典型例子,由 Tony Hillerson 提供 Homepage: http://insideria.com
flex/Flash开发系列书籍:基于FLASH的WEB3D应用研究
Flex学习笔记Flex学习笔记Flex学习笔记Flex学习笔记Flex学习笔记
flash/flex画曲线,绘图板,用代码实现的个画曲线功能,类绘图板,可下载看看,不错的学习案例。
语言:C ++许可证:BSD-3代码质量:A + https://lgtm.com/projects/g/Genivia/RE-flex/context:cpp文档:https://www.genivia.com/doc/reflex/html /index.html存储库:https://github.com/Genivia/RE-flex更改日志...
flash/flex 的aqua皮肤.类似苹果系统
这是作者自己亲自编写的教程,里面包含的有图解教程,各式jar,及配置文件,全部包含在内,如果你是一个决定学习flex初学者,我敢保证它肯定适合你!带上你走上flex开发旅途!
FDT-flash/flex devtoolkit for eclipse. for最新版的 FDT 3.5 beta2
来自《潮汕IT男》网站的文章《解决flash/flex/as3 访问中文域名时的流错误》代码示例,地址:http://chenlinsheng.com/?p=990
flex学习笔记 flex学习笔记 flex学习笔记 flex学习笔记 flex学习笔记 flex学习笔记
NULL 博文链接:https://summerbell.iteye.com/blog/359226
最近开始学习Flex,其中用到了AS,AS2到AS3发生了很大的变化,完全的面向对象,知道这个特点以后我也一直没有特意的好好去学学AS3,但是随着最近学习的深入,还是有必要学习一下
第一阶段(2周左右每天至少4个小时):入门 目标是:做简单的demo....参考书:Flex 入门教程http://www.5uflash.com/Flex-AIR/Flexziliao/17.html flex入门介绍:http://download.csdn.net/source/452847
总共有4个例子: 1.http://127.0.0.1:8080/flexDemo/HelloWorld/HelloWorld.html ...如果你的数据库配置和我的不一样,请修改flexDemo\WEB-INF\classes\下的DBSetting.properties文件,数据库建表的sql语句是user.sql
一.flex2的全屏代码 在仅仅使用Flex Builder2(我下载的是FLXB_2.0_Win_WWE.exe)的时候,写全屏代码竟然找不到flash.display.StageDisplayState,于是下载了Flex 2.0.1升级包(官方地址:...(参考:...
Flex学习笔记1
NULL 博文链接:https://as3.iteye.com/blog/1134453
本人用FLEX写的直播播放器,基于RTMP协议。代码要放入tomcat等容器里运行,打开play.html即可看到例子效果,含有源代码,希望能帮助到需要的人。
xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="app_creationCompleteHandler(event)"> <fx:Script> <![CDATA[ import mx.events.FlexEvent; ...
flex学习资料flex学习资料flex学习资料