# flash：二次贝塞尔曲线应用-生成飞机路径示意图

1、椭圆（很快被自己给否定了，椭圆的标准方程 (x-m)^2/(a^2) + (y-n)^2/(b^2)=1，有m,n,a,b 四个未知数，3个点无法唯一确定，如果把圆心定在页面中心，理论上可以解决，但是开平方也是比较繁琐的）
2、贝塞尔曲线

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/）
*/
public class Main extends Sprite
{

public function Main():void
{
if (stage) init();
}

private function init(e:Event = null):void
{
testBzCurve();
}

private function testBzCurve():void {

var txtP0:TextField = new TextField();
var txtP1:TextField = new TextField();
var txtP3:TextField = new TextField();

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();
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);

}

}

}


无图无真相：

posted @ 2012-11-24 20:20  菩提树下的杨过  阅读(5611)  评论(1编辑  收藏  举报