我正在尝试从snap.svg移植catmullRom2bezier函数以用于canvas (我只将它用于封闭路径):
function catmullRom2bezier(pts){
var cubics = [];
for ( var i = 0, iLen = pts.length; i < iLen ; i++ ){
var p = [
pts[i - 1],
pts[i],
pts[i + 1],
pts[i + 2]
];
if( i === 0 ){
p[0] = {
x: pts[ iLen -1 ].x,
y: pts[ iLen -1 ].y
}
}
if( i === iLen - 2 ){
p[3] = {
x: pts[0].x,
y: pts[0].y
};
}
if ( i === iLen - 1 ) {
p[2] = {
x: pts[0].x,
y: pts[0].y
};
p[3] = {
x: pts[1].x,
y: pts[1].y
};
}
cubics.push([
(-p[0].x + 6 * p[1].x + p[2].x) / 6,
(-p[0].y + 6 * p[1].y + p[2].y) / 6,
(p[1].x + 6 * p[2].x - p[3].x) / 6,
(p[1].y + 6*p[2].y - p[3].y) / 6,
p[2].x,
p[2].y
]);
}
return cubics;
}
以下是我尝试使用它的方法:
ctx.beginPath();
var cubics = catmullRom2bezier(points);
for( var i = 0; i < cubics.length; i++ ){
ctx.bezierCurveTo(cubics[i][0],cubics[i][1],cubics[i][2],cubics[i][3],cubics[i][4],cubics[i][5]);
}
ctx.fill();
但是我必须遗漏一些东西让它起作用,因为生成的路径不是完全舍入的。