贝塞尔曲线

贝塞尔曲线是一个由确定点来生成曲线路径的方程,最初由法国工程师皮埃尔·贝塞尔用来作汽车的主体设计,该方程还可以用来生成动画的插值公式。

 

贝塞尔曲线方程如下:

 

其中:
n是阶数,一阶的时候是线性方程,阶数=确定点的个数-1;
i是表示所有点的序列索引,即P0,P1,P2……;
P表示点的坐标(x,y);
t表示时间自变量,并且介于0,1之间,可以等于0和1;

通过该方程,我们可以写出求某个时刻的点坐标函数:
  

function bezier(points,t){
   
var i,
        n
=points.length-1,
        x
=0,
        y
=0;
            
   
function fn(p,n,i,t){
       
return arrangement(n,i)*p*Math.pow(1-t,n-i)*Math.pow(t,i);
    }
        
   
for(i=0;i<n+1;i++){
        x
+=fn(points[i][0],n,i,t);
        y
+=fn(points[i][1],n,i,t);
    }
                
   
return [x,y];
}


其中参数points为所有的点,t为时刻,
arrangement是求排列组合的函数,可以在完整代码中看到。

这样我们可以在拥有多个点的序列后,再通过t的变化,就可以求出所有点组合成的贝塞尔曲线图形了:
   

for (i = 0; i < 1; i += 0.001) {
    drawPoint.apply(
this, bezier(points,i));
}


完整代码及演示(需要在支持canvas的浏览器中运行):

 

 

 更多贝塞尔曲线的相关知识请参考wikipedia 贝塞尔曲线

 

posted @ 2011-05-27 21:56  随机  阅读(6180)  评论(0编辑  收藏