[转] n次贝塞尔曲线AS再现

http://bbs.9ria.com/viewthread.php?tid=71904&extra=page%3D1%26amp;orderby%3Ddateline%26amp;filter%3D86400


新年快到了，再也忍不住几个月不发帖了，这贴主要内容有：
1）n次方贝塞尔曲线（以1-10阶次为例子）
2）n次方贝塞尔曲线(Can Move版)（曲线可以移动，而效率不错哟，包括10次贝塞尔曲线）
3）n次方贝塞尔曲线(等分)（简单版等分，详细在
http://bbs.9ria.com/thread-24082-1-1.html
中，不同的是，俺不使用复杂的公式）

新年系列之——n次贝塞尔曲线AS再现出发！！
以俺的思路讲解，如果有必要的话，看看其他资料，保证对不明白贝塞尔曲线的兄弟们了解提升 一大步。

看看二次、三次的贝塞尔曲线公式：



其公式主要成分为基函数（贝塞尔曲线计算耗时的原因），基函数推导过程（以二次为例）：




如此类推。。。所有的基函数数值都能计算出来
如果你还是一头汗！！那也没关系，先看看代码，基函数的代码

function BEZ(n:int,k:int,t:Number):Number {//基函数
        return C(n,k)*Math.pow(t,k)*Math.pow(1-t,n-k);
}
function C(n:int,k:int):Number {//组合排序
        var son:int=jie_cheng(n);
        var mother:int=jie_cheng(k)*jie_cheng(n-k);
        return son/mother;
}
function jie_cheng(i:int):int {//阶乘
        var n:int=1;
        for (var j:int=1; j<=i; j++) {
                n*=j;
        }
        return n;
}

二次贝塞尔曲线一个点要计算出6次基函数数值，因此越平滑，越高阶的贝塞尔曲线，会越折磨CPU的。
要画出一个贝塞尔曲线的一个点在上面的第一张图中已经看出了，所以完整的帧代码为：

var points:Array = [];
var sp:Sprite=new Sprite();
var n:int = 5;
addChild(sp);
draw_points(points,n);
function P_BEZ(t:Number,sz:Array):Point {//n次
        var x_p:Number = 0;
        var y_p:Number = 0;
        var n:int = sz.length;
        for (var i:int=0; i<sz.length; i++) {
                var b:Number = BEZ(n - 1,i,t);
                x_p += sz[i].x * b;
                y_p+=sz[i].y*b;
        }
        return (new Point(x_p,y_p));
}
function BEZ(n:int,k:int,t:Number):Number {//基函数
        return C(n,k)*Math.pow(t,k)*Math.pow(1-t,n-k);
}
function C(n:int,k:int):Number {//组合排序
        var son:int=jie_cheng(n);
        var mother:int=jie_cheng(k)*jie_cheng(n-k);
        return son/mother;
}
function jie_cheng(i:int):int {//阶乘
        var n:int=1;
        for (var j:int=1; j<=i; j++) {
                n*=j;
        }
        return n;
}
function draw_points(sz:Array,n:int):void {
        sz.length=0;
        for (var i:int=0; i<=n; i++) {
                sz[i]=new Point(800*Math.random(),500*Math.random());
                draw_point(sz[i]);
        }
        draw_lines(sz);
        sp.graphics.lineStyle(2,0xff0000);
        var p:Point=P_BEZ(0,sz);
        sp.graphics.moveTo(p.x,p.y);
        for (var j:Number=0; j<1; j+=0.01) {
                p=P_BEZ(j,sz);
                sp.graphics.lineTo(p.x,p.y);
        }
        p=P_BEZ(1,sz);
        sp.graphics.lineTo(p.x,p.y);
}
function draw_point(p:Point):void {//画点
        sp.graphics.lineStyle(0);
        sp.graphics.drawCircle(p.x,p.y,3);
}
function draw_lines(sz:Array):void {//画边
        sp.graphics.lineStyle(0,0,0.3);
        sp.graphics.moveTo(sz[0].x,sz[0].y);
        for (var i:int=0; i<sz.length; i++) {
                var p:Point=sz[i];
                sp.graphics.lineTo(p.x,p.y);
        }
}

5阶次的贝塞尔曲线



10阶次的贝塞尔曲线



1阶次的贝塞尔曲线





那么，要移动10阶次的贝塞尔曲线，需要怎么做？
一切都是基函数的问题，就从他入手。
假设需要画100个点（已经可以画出很平滑的曲线了）
var sep:int = 100;
复制代码
如果阶次肯定地话，基函数的数值也就肯定了，如10阶次，一个点x坐标、y坐标分别需要计算出11个基函数数值。
把它保存起来
var datas:Array = [];
复制代码
以后需要的时候使用，这样就会得到意识不到的效果。（当然，3次贝塞尔曲线就足以模拟n次贝塞尔曲线，as3.0也是如此，但是做出实实在在的n次贝塞尔曲线，实在 ）
效果图（移动前）：



效果图（移动后）：



效果图： 下载 (41.44 KB)




初始化时CPU会高一些，此后CPU都十分理想。哈哈，代码会在最后给出。




本帖最后由 shen_0_ 于 2011-1-7 18:37 编辑


http://bbs.9ria.com/thread-24082-1-1.html   帖子已经解答出等分的问题，但是考虑其效果的用途，可以再简单一些
我使用一个点
var p:Point=P_BEZ(0,sz);
复制代码
将曲线大致跟踪了一次（画的同时）
在画的时候不是画出真正的贝塞尔曲线，而是画出其相似的等分线段：



当然密集时会产生不理想的效果





这个教程告一段落！ 新的一年要更加努力呀！！！！

评论

1 楼 xellosssky 2011-03-07  

感谢楼主分享，最想做连接2点的随机曲线，用了万有引力公式，结果一个点变成另一个点的“卫星”，不断的绕着转了…… 。现在可以尝试下贝塞尔曲线公式了