极简贝塞尔曲线函数,用不足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实现,其它就不在此详细说明了。
绘图效果如下: