极简贝塞尔曲线函数

极简贝塞尔曲线函数,用不足20行语句,实现了各阶次的贝塞尔曲线生成,无疑是非常之精简了。

// bezier 极简贝塞尔曲线函数
// 2020-07-25 谷来成
// 参数分别为;[起点,控制点...,终点],切分段数
function bezier1(points,cutnumber) {
    var level = points.length/2-1;    //次阶数
    var bpoints=[];
    var f,x,y;
    for(var i=0;i<=cutnumber;i++) {
        t = 1.0*i/cutnumber;
        x=y=0;
        for(var k=0;k<=level;k++) {
            f = (1.0 * fact(level)/(fact(k)*fact(level-k))) * Math.pow(1-t,level-k) * Math.pow(t,k); 
            x += f * points[2*k  ];
            y += f * points[2*k+1];
        }
        bpoints=bpoints.concat(x,y);
    }
    return bpoints;
}

 

参数说明;
    points: 点坐标,格式为 [x0,y0,x1,y1,x2,y2,...,xn,yn],(x0,y0)为起始点坐标,(xn,yn)为终止点坐标;中间其它的点依次为控制点坐标。
    贝塞尔曲线的次阶数由控制点的个数来决定。即曲线的次阶数=控制点的个数-1;所以在理论上,此函数能够绘制的贝塞尔曲线的次阶数是无限制的。
    cutnumber: 切分段数,即将生成之曲线按几段绘制出来。越多越圆滑;最小为2;
    中间用到了阶乘函数(自行解决).
    f:系数;x,y: 点的坐标;
    bpoints: 最终生成的点集;
    
调用方式如下:

    var p=[[0.15,0.18],[0.383,0.82]];
    var p1,p2;

    p1=p[0];
    p2=p[1];

    var k=222;
    data = bezier1(p1.concat(-0.050,0.20,-0.150,0.50,-0.158,0.80,p2),k);    //bezier 曲线 4
    create_vbo(gl,aposLocation,data,2);
    create_vbo(gl,a_color,colors,4);
    gl.drawArrays(gl.LINE_STRIP,0,k+1);    /**执行绘制命令**/
说明如下
    p1,p2为起始点和终止点;其它为控制点;
    colors为线的颜色集(自行解决);
    k:切分段数。
    采用WEBGL实现,其它就不在此详细说明了。

绘图效果如下:

极简贝塞尔曲线函数_第1张图片

 

 

你可能感兴趣的:(javascript)