Bezier曲線總是相同的長度

Question

我工作在HTML5畫布遊戲。

我想是畫兩個點之間的S形三次Bezier曲線，但我正在尋找一種方式來計算控制點的座標，以便曲線本身始終是相同的長度無論怎麼接近那些沒有點直到達到曲線成爲直線的點。

Answer 1

這是可解的數值。我假設你有一個有4個控制點的立方貝塞爾曲線。 在每一步你有第一個（P0）和最後一個（P3）點，並且你想計算P1和P2，使得總長度是恆定的。

添加該約束消除一個自由度，所以我們有1個左（開始與4，確定的終點（-2）和恆定長度是另一個-1）。所以你需要做出決定。

Bezier曲線是在0和1之間限定的多項式，需要在元件的總和的平方根整合（2D？）。對於一個三次貝塞爾曲線來說，這意味着一個6階多項式的sqrt，這個wolfram不知道如何求解。但是，如果您已知所有其他控制點（或者已知某個其他約束的依賴關係），則可以爲該約束存儲預先計算值的保存表。

Answer 2

真的有必要，該曲線是貝塞爾曲線？ 擬合總長度恆定的兩個圓弧要容易得多。你將永遠得到一個S形。

擬合兩個圓弧的：

讓d是在端點之間的歐幾里德距離。讓C是我們想要的恆定長度。我得到了下面的表達式爲b（圖像中繪製）：

b = sqrt(D*sin(C/4)/4 - (D^2)/16) 

，如果它是正確的，所以如果有人得到不同的東西，發表評論我沒有檢查。

編輯：您應該考慮的負面解決方案太，我得到求解方程時，檢查哪一個是正確的。

b = -sqrt(D*sin(C/4)/4 - (D^2)/16) 

Answer 3

下面是SVG這是接近糾正工作示例：
http://phrogz.net/svg/constant-length-bezier.xhtml

我實驗確定，當端點上的一個頂部的另一個手柄應
desiredLength×COS（30°）
遠離手柄;和（當然）當終點處於最大距離時，手柄應該處於彼此頂部。繪製所有理想的點看起來有點像橢圓：

藍線是實際的理想公式，而上面的紅線是橢圓逼近理想。使用橢圓公式（正如我上面的例子那樣）可以使線在中間得到大約9％的時間。

下面是相關的JavaScript代碼：

// M is the MoveTo command in SVG (the first point on the path) 
// C is the CurveTo command in SVG: 
// C.x is the end point of the path 
// C.x1 is the first control point 
// C.x2 is the second control point 
function makeFixedLengthSCurve(path,length){ 
    var dx = C.x - M.x, dy = C.y - M.y; 
    var len = Math.sqrt(dx*dx+dy*dy); 
    var angle = Math.atan2(dy,dx); 
    if (len >= length){ 
    C.x = M.x + 100 * Math.cos(angle); 
    C.y = M.y + 100 * Math.sin(angle); 
    C.x1 = M.x; C.y1 = M.y; 
    C.x2 = C.x; C.y2 = C.y; 
    }else{ 
    // Ellipse of major axis length and minor axis length*cos(30°) 
    var a = length, b = length*Math.cos(30*Math.PI/180); 
    var handleDistance = Math.sqrt(b*b * (1 - len*len/(a*a))); 
    C.x1 = M.x + handleDistance * Math.sin(angle); 
    C.y1 = M.y - handleDistance * Math.cos(angle); 
    C.x2 = C.x - handleDistance * Math.sin(angle); 
    C.y2 = C.y + handleDistance * Math.cos(angle); 
    } 
}