flash:二次贝塞尔曲线应用-生成飞机路径示意图
时间:2022-04-23
本文章向大家介绍flash:二次贝塞尔曲线应用-生成飞机路径示意图,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本周听到公司其它项目组同事在讨论一个小需求:
给定3个点(其实是飞机经过的航站,比如:从浦东-西安-北京),在UI上生成一段曲线,用来示意飞机的路线图(其实用直线我觉得也能将就,反正只是示意,只是大家觉得直线太out,不美观),晚上无事,尝试了一下: 有二个方案: 1、椭圆(很快被自己给否定了,椭圆的标准方程 (x-m)^2/(a^2) + (y-n)^2/(b^2)=1,有m,n,a,b 四个未知数,3个点无法唯一确定,如果把圆心定在页面中心,理论上可以解决,但是开平方也是比较繁琐的) 2、贝塞尔曲线
根据:(贝塞尔曲线)喂鸡百科的解释: 二次标准方程为:
正好以前在学习flash时也研究过,所以决定用它了。解决了曲线的生成问题,还有飞机的朝向问题,飞机头是有方向的,必须符合曲线的前进方向,这个可用“曲线导数的几何意义”搞定:曲线某点的导数,正好为该点切线的斜率(换个角度考虑,其实就是飞机图标的旋转角度)
捣鼓一阵后,代码出来了:
先定义一个飞机的实体类(为方便,暂时用小三角形代替)
package
{
import flash.display.Shape;
/**
* 飞机实体类
* @author jimmy.yang
*/
public class Plane extends Shape
{
public function Plane()
{
//用一个小三角来模拟飞机
graphics.lineStyle(1, 0xff0000, 1);
graphics.beginFill(0xff0000, 1);
graphics.moveTo( -50, -25);
graphics.lineTo(50, 0);
graphics.lineTo( -50, 25);
graphics.lineTo( -50, -25);
graphics.endFill();
}
public function setAngle(y:Number,x:Number) {
this.rotation = Math.atan2(y,x) * 180 / Math.PI;
}
}
}
下面是生成曲线及调整飞机头朝向的代码:
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.text.TextField;
/**
* 二次贝兹曲线,生成飞机路线图
* @author jimmy.yang (yjmyzz@126.com 菩提树下的杨过 http://yjmyzz.cnblogs.com/)
*/
[Frame(factoryClass="Preloader")]
public class Main extends Sprite
{
public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
testBzCurve();
}
private function testBzCurve():void {
var txtP0:TextField = new TextField();
var txtP1:TextField = new TextField();
var txtP3:TextField = new TextField();
addChild(txtP0);
addChild(txtP1);
addChild(txtP3);
var p0X:int = 100;
var p0Y:int = 300;
txtP0.x = p0X-10;
txtP0.y = p0Y+10;
txtP0.text = "浦东(PVG)";
var p1X:int = 300;
var p1Y:int = 250;
txtP1.x = p1X;
txtP1.y = p1Y+20;
txtP1.text = "西安(XIY)";
var p2X:int = 500;
var p2Y:int = 50;
txtP3.x = p2X+5;
txtP3.y = p2Y;
txtP3.text = "北京(PEK)";
//人为抬高控制点,以便让曲线经过控制点
p1X = p1X * 2 - (p0X + p2X) / 2;
p1Y = p1Y * 2 - (p1Y + p2Y) / 2;
//生成10个示例点
for (var t:Number = 0; t <=1; t+=0.1)
{
//二次Bz曲线的公式
var x:Number = (1 - t) * (1 - t) * p0X + 2 * t * (1 - t) * p1X + t * t * p2X;
var y:Number = (1 - t) * (1 - t) * p0Y + 2 * t * (1 - t) * p1Y + t * t * p2Y;
//Bz曲线在t点时的导数坐标
var Fx:Number = 2 * (t - 1) * p0X + 2 * (1 - 2 * t) * p1X + 2 * t * p2X;
var Fy:Number = 2 * (t - 1) * p0Y + 2 * (1 - 2 * t) * p1Y + 2 * t * t * p2Y;
//放入小飞机
var p = new Plane();
addChild(p);
p.x = x;
p.y = y;
p.scaleX = 0.2;
p.scaleY = 0.2;
p.setAngle(Fy, Fx);//导数的几何意义
}
//画出Bz曲线(当背景用)
graphics.lineStyle(1, 0x000000, 0.5);
graphics.moveTo(p0X, p0Y);
graphics.curveTo(p1X, p1Y, p2X, p2Y);
}
}
}
无图无真相:
感慨:数学真心有用!
- 扩展ToolBarManager、ListView和Grid控件以实现气球式的ToolTip
- Linux同步机制 - 基本概念(死锁,活锁,饿死,优先级反转,护航现象)
- Linux同步机制 - 多线程开发总结
- 谷歌发布升级版语音合成系统,直接从字符合成语音
- 无锁编程 - 大纲
- 无锁编程(一) - Double-checked Locking
- 无锁编程(二) - 原子操作
- 我所理解的Remoting(3):创建CAO Service Factory使接口和实现相互分离
- 无锁编程(三) - 忙等待
- Enterprise Library深入解析与灵活应用(9):个人觉得比较严重的关于CachingCallHandler的Bug
- 无锁编程(四) - CAS与ABA问题
- Linux Kernel CMPXCHG函数分析
- 无锁编程(五) - RCU(Read-Copy-Update)
- 无锁编程(六) - seqlock(顺序锁)
- 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 数组属性和方法
- Linux实用技巧——mail发送邮件命令以及中文乱码解决
- Julia机器学习实战——使用Random Forest随机森林进行字符图像识别
- Python函数——Numpy size()
- Day 1:二维数组中查找
- Day 2:替换空格
- Prometheus监控神器-Kubernetes篇(三)
- julia简易教程——安装Julia+jupyter notebooks
- Julia 终于正式发布了
- awk 列求和计算
- C++复习笔记——0_零碎问题及解决笔记
- C++复习笔记——C++ 关键字
- python函数——字典设置默认值 setdefault()
- Day 3:从尾到头打印链表
- python函数——字典get()方法
- Day 4:重建二叉树