js贝塞尔曲线算法,js贝塞尔曲线路径点

发布网友发布时间：2022-12-04 17:37

共1个回答

热心网友时间：2024-12-02 12:57

//anchorpoints：贝塞尔基点

//pointsAmount：生成的点数

　　　　//return 路径点的Array

function CreateBezierPoints(anchorpoints, pointsAmount) {

var points = [];

for (var i = 0; i < pointsAmount; i++) {

var point = MultiPointBezier(anchorpoints, i / pointsAmount);

points.push(point);

}

return points;

}

function MultiPointBezier(points, t) {

var len = points.length;

var x = 0, y = 0;

var erxiangshi = function (start, end) {

var cs = 1, bcs = 1;

while (end > 0) {

cs *= start;

bcs *= end;

start--;

end--;

}

return (cs / bcs);

};

for (var i = 0; i < len; i++) {

var point = points[i];

x += point.x * Math.pow((1 - t), (len - 1 - i)) * Math.pow(t, i) * (erxiangshi(len - 1, i));

y += point.y * Math.pow((1 - t), (len - 1 - i)) * Math.pow(t, i) * (erxiangshi(len - 1, i));

}

return { x: x, y: y };

}

以上是计算高阶贝赛尔曲线所有点的方法，

方法引用了引用公式

：

一次、二次、三次贝塞尔曲线函数

function onebsr(t, a1, a2) {

return a1 + (a2 - a1) * t;

}

function twobsr(t, a1, a2, a3) {

return ((1 - t) * (1 - t)) * a1 + 2 * t * (1 - t) * a2 + t * t * a3;

}

function threebsr(t, a1, a2, a3, a4) {

return a1 * (1 - t) * (1 - t) * (1 - t) + 3 * a2 * t * (1 - t) * (1 - t) + 3 * a3 * t * t * (1 - t) + a4 * t * t * t;

}

参考 https://www.cnblogs.com/lxiang/p/4995255.html