Egret 二次贝塞尔曲线

 

二次贝塞尔曲线

贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，

节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较

成熟的位图软件中也有贝塞尔曲线工具，如PhotoShop等。在Flash4中还没有完整的曲线工具，而在Flash5里面已经提供出贝塞尔曲线工具。

 

这个公式简单的来说，就是知道起点、拐点、终点三个点之后，就能绘制出一条曲线....

 

 实现代码

/**
 * 弧线运动
 * tween和二次贝塞尔曲线
 * @author chenkai 2018/6/28
 *
 */
class ArcMotion {
    private target:egret.DisplayObject;
    private p0:egret.Point;
    private p1:egret.Point;
    private p2:egret.Point;
    private loop:Boolean = false;
    private delay:number = 1000;
    
    /**
     * 初始化
     * @param target 需要运动的对象
     * @param p0 起始点
     * @param p1 拐点
     * @param p2 终止点
     * @param delay 移动时间 默认1000
     * @param loop 是否循环  默认false
     */ 
    public constructor(target: egret.DisplayObject,p0: egret.Point,p1: egret.Point,p2: egret.Point,delay:number =1000,loop:Boolean = false) {
    	  this.target = target;
    	  this.p0 = p0;
    	  this.p1 = p1;
    	  this.p2 = p2;
    	  this.loop = loop;
    	  this.delay = delay;
	}
	
	public play(){
    	//factor由0向1渐变，会调用set factor，ball的坐标变化
        this.factor = 0;
        egret.Tween.get(this,{ loop: this.loop }).to({ factor: 1 },this.delay);
	}

	public stop(){
        egret.Tween.removeTweens(this);
	}
	
    public get factor(): number {
        return 0;
    }
    
    //起始点P0 = 100，中间点P1 = 300, 终点P2 = 500
    public set factor(value: number) {
        this.target.x = (1 - value) * (1 - value) * this.p0.x + 2 * value * (1 - value) * this.p1.x + value * value * this.p2.x;
        this.target.y = (1 - value) * (1 - value) * this.p0.y + 2 * value * (1 - value) * this.p1.y + value * value * this.p2.y;
    }
}

　　

具体运用

var p0: egret.Point = new egret.Point(this.ballPosX,this.ballPosY);
var p1: egret.Point = new egret.Point(this.ballPosX - 60,this.ballPosY - 480);
var p2: egret.Point = new egret.Point(this.ballPosX - 165,this.ballPosY - 250);
this.arc = new ArcMotion(this.ball,p0,p1,p2,1500,true);
this.arc.play();
this.arc.stop();

　　

 

 

参考：

Egret论坛：实现显示对象的二次贝塞尔曲线运动