//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
网友评论