Catmull-Rom Spline到Bezier样条转换器

时间:2014-03-16 19:52:07

标签: javascript canvas snap.svg

我正在尝试从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();

但是我必须遗漏一些东西让它起作用,因为生成的路径不是完全舍入的。

0 个答案:

没有答案