JavaScript曲線生成

Question

如何編寫一個函數，該函數需要一個2D點的數組並返回Bezier/Quadractic曲線，以便稍後使用HTML5 Canvas bezierCurveTo或quadraticCurveTo方法重繪它？

Answer 1

編輯：改進。

See a demo它使用下面的代碼。

var makeCurveArgs = function(points) { 
    var copy = points.slice(); 
    var result = []; 
    copy.shift(); //drop the first point, it will be handled elsewhere 
    var tangent; 
    if(copy.length >= 3) { 
    var cp1 = copy.shift(); 
    var cp2 = copy.shift(); 
    var p2 = copy.shift(); 

    result.push([cp1[0], cp1[1], cp2[0], cp2[1], p2[0], p2[1]]);    
    } 
    while(copy.length >= 2) { 
    var cp1 = [2 * p2[0] - cp2[0], 2 * p2[1] - cp2[1]]; 
    var cp2 = copy.shift(); 
    var p2 = copy.shift(); 
    result.push([cp1[0], cp1[1], cp2[0], cp2[1], p2[0], p2[1]]);    
    } 
    return result; 
} 

var notThatHard = function(points) { 
    var origin = points[0].slice(); 
    var curves = makeCurveArgs(points); 
    var drawCurves = function(context) { 


    context.beginPath(); 
    context.moveTo(origin[0], origin[1]); 
     for(var i = 0; i < curves.length; i++) { 
     var c = curves[i]; 
     context.bezierCurveTo(c[0], c[1], c[2], c[3], c[4], c[5]); 
    } 
    }; 
    return drawCurves; 
}; 

一般的方法是，你給我你的點和控制點的座標，我給你回一個函數，將在畫布上下文執行該路徑。

我給出的函數需要2N + 2個2元素數組;每個2元素數組是一個（x，y）座標。座標使用如下：

points[0]: starting point of the curve 
points[1]: lies on a line tangent to the beginning of the 1st bezier curve 
points[2]: lies on a line tangent to the end of the 1st bezier curve 
points[3]: end of 1st bezier curve, start of 2nd bezier curve 
points[4]: lies on a line tangent to the end of the 2nd bezier curve 
points[5]: end of 2nd bezier curve, start of 3rd curve 
... 
points[2*K+2]: lies on a line tangent to the end of the Kth bezier curve 
points[2*K+3]: end of Kth bezier curve, start of (K+1)th 

我認爲quadraticCurveTo類似的功能並不難寫。