教你直白的理解貝塞爾曲線???

序言

這是第一篇在掘金寫的文章,寫的不對的或者很差的地方但願友人可以指出便於修改與其餘人分享. =.= 實在不善於表達啊 阿西吧。。。

一.什麼是貝塞爾曲線？ (百度百科你就知道)

貝塞爾曲線(Bézier curve)，又稱貝茲曲線或貝濟埃曲線，是應用於二維圖形應用程序的數學曲線。通常的矢量圖形軟件經過它來精確畫出曲線，貝茲曲線由線段與節點組成，節點是可拖動的支點，線段像可伸縮的皮筋，咱們在繪圖工具上看到的鋼筆工具就是來作這種矢量曲線的。貝塞爾曲線是計算機圖形學中至關重要的參數曲線，在一些比較成熟的位圖軟件中也有貝塞爾曲線工具，如PhotoShop等。在Flash4中尚未完整的曲線工具，而在Flash5裏面已經提供出貝塞爾曲線工具。

二.貝塞爾曲線的公式

因爲貝塞爾曲線是有固定公式的 因此只用 一次 二次 以及三次 貝塞爾曲線做爲示例進行分析

1. 公式： 有了解過貝塞爾曲線的朋友必定知道，貝塞爾曲線是須要兩組固定參數的( 點( array ) , 進度( T ) ),而咱們須要求的只是當下瞬時運動的點在哪,在一次貝塞爾曲線中也就是 x = Ax+(Bx-Ax)*t , y = Ay+(By-Ay)*t。 這個規則在一次貝塞爾曲線中是最直接的( 無非就是動點替換 公式遞歸而已 但願多階本身思考動手 )

let PointA = {x:200,y:20},
        PointB = {x:100,y:20},
        PointS = [ PointA , PointB ],
        T = 0;
    // 那麼公式爲：
        function getPoint({Points,T}){ // 這個是點組 和 進度
            return {
                x:(PointA.x + (PointB.x - PointA.x) *T),
                y:(PointA.y + (PointB.y - PointA.y) *T),
            }
        }
    // 這個時候咱們能夠嘗試調用
    // 當進度( T ) 等於 0 的時候 咱們獲得的位置和 第一個點的位置是一致的
        var PointCurve = getPoint({PointS,T}) ; // {x:200,y:20} 
    // 當進度( T ) 等於 1 的時候 咱們獲得的位置和 第二個點的位置是一致的
        T = 1;
        var PointCurve = getPoint({PointS,T}) ; // {x:100,y:20}
    
    // 推導出的公式其實就是在直線 AB 上移動 T 的位置; 直白說就是百分比位置；
複製代碼

這裏演示運動示意圖：

三.二次貝塞爾曲線

上面說了一次貝塞爾曲線的公式，那麼二次貝塞爾曲線怎麼運動的呢？ 有一種很是很是粗暴的理解方式：任何兩條相鄰的線 都會產生出另一根隨着進度而變化的線 ， 而他們的子級也是相互做用的!!! 因此請注意!!!全部的線最終就是遞歸求一(逐一遞減)!!!,而最後這一根線上的進度，則是當前所在點的位置

也能夠理解爲:任何兩個點能肯定另一個點( 動點 ),若是同級的點( 動點仍然能夠往下計算 )爲複數則能夠繼續往下衍生,直到最後只剩下一個動點;

• 一次貝塞爾曲線 兩個點 肯定一個點
• 二次貝塞爾曲線 三個點 =》 兩個點 =》 一個點
• 三次貝塞爾曲線 四個點 =》 三個點 =》 兩個點 =》 一個點 以此類推

如今咱們開始分析剛纔的那句話:

1. 任何兩條相鄰的線 都會產生出另一根隨進度變化的線 ==》 二次貝塞爾曲線有兩個基線 ==》 衍生出第三根基線( 求一 )
2. 衍生出的第三根線沒有相鄰的產物線 沒法做爲基線繼續求一 那麼當前點的位置就是該線上的進度比位。 再次說明 請靈活運用上面的公式本身推導 , 使用遞歸或者其餘方式均可以.( 反正我只會遞歸的方法。。。 本身推導的 不難 ) 這裏演示運動示意圖：

咱們看到 紅色點在運動的時候 A B C三點的線都是固定的,假設 AB上的動點爲 E, BC上的動點爲 F, 那麼 EF則是求一後的線, 而紅色點的當前位置就是 EF * T的位置 。是否是很簡單粗暴？

四.三次貝塞爾曲線

接下來比較複雜 可是按照個人邏輯來想則會很是簡單 這裏演示運動示意圖：

咱們能夠看到如今有固點 A , B , C , D四點, 假設 AB動點爲 E, BC動點爲 F, CD則爲 G點~（好邪惡啊）, 那麼這時候咱們發現 EF並非求一的線 而是惟二 他與 FG相連, 那麼咱們繼續 EF上也有個動點 H(好嗨喲~) , FG上的動點爲 I點，則得出惟一線 HI（真的好hi喲~）; 紅色點運動軌跡則爲 HI * T；

我就問看這篇文章的人 這理解粗暴不粗暴?

因此不論多少階的貝塞爾曲線 都是用一個遞歸式的方式不斷的在線上抽點 多點抽線 直到剩下一個點爲止( 遞減規則 每次少一根線或者一個點 )

五.屢次貝塞爾曲線

最後 咱們看到一個神奇的現象， 最後全部的動點都會歸屬到他父級走到的盡頭 , B 點的盡頭會多一個 C 點多兩個 D點多三個...... 依次類推 這些則是 任何兩個點能肯定另一個點( 動點 ),若是同級的點( 動點仍然能夠往下計算 )爲複數則能夠繼續往下衍生,直到最後只剩下一個動點 這個規則所帶來的影響

呃,上述表達可能仍然不是特別清楚 圖都是本身繪製的 但願可以給閱讀的你帶來幫助。 補充: 剛想到可使用動態規劃來進行處理，全部的貝塞爾曲線最終均可以化簡爲一 最後一步永遠是一階貝塞爾曲線。