包教包會-貝塞爾曲線的繪製原理與應用

xietao3發表於2017-06-23

說來話長，這一切都得從PhotoShop中的鋼筆工具開始說起...

宣告：本文不含複雜數學公式，學渣放心閱讀吧?(我彷彿看到了學渣們留下了激動的淚水)

背景

貝塞爾曲線(Bézier curve)是應用於二維圖形應用程式的數學曲線，貝塞爾曲線基於多個點構成。它的應用非常廣泛，比如說PS中的鋼筆工具所繪畫的曲線就是貝塞爾曲線，繪製動畫的運動軌跡等等，而最近一次想用到貝塞爾曲線是想做一個 路徑動畫 。

簡介

在iOS開發中一般通過UIBezierPath來實現貝塞爾曲線的繪製，平時一般使用繪製二階和三階貝塞爾曲線的方法。而我們要做的遠超二三階的貝塞爾曲線，本文 iOS Demo在原理上實現了N階貝塞爾曲線的繪製，未使用任何相關API，純手動繪製貝塞爾曲線，並且可以拖動滑塊瀏覽貝塞爾曲線的繪製過程。

本文 iOS Demo 實現以下功能:

實現功能	描述
繪製貝塞爾曲線	1、點選空白處設定貝塞爾曲線的點 2、可以設定貝塞爾曲線階數 3、播放貝塞爾曲線繪製過程 4、拖動滑塊，自由檢視繪製過程每一個瞬間
簡易曲線圖表	每兩個點之間都是用3階貝塞爾曲線連線(細節待完善)
雲霄飛車	1、在空白處繪製貝塞爾曲線 2、雲霄飛車沿著繪製的貝塞爾曲線行駛 3、支援多個連線的貝塞爾曲線路徑

Demo示例圖

貝塞爾曲線的繪製原理

說到繪製原理，如果貼?這張圖，我只能說：什麼鬼！！！我看不懂，聽不見，你說什麼...
路人甲：簡單點...說話的方式簡單點~

首先提供一個可以動態繪製貝塞爾曲線的網站幫助你更好地理解貝塞爾曲線的繪製。

1. 點

貝塞爾曲線點的數量決定了曲線的階數，一般N個點構成的N-1階貝塞爾曲線，即3個點為二階，至少由3個點組成，為什麼兩個點不行，兩個點組成的是直線。按順序，第一個點為起點，最後一個點為終點，其餘點都為 控制點 。

2. 點生線

這裡說的線不是貝塞爾曲線，而是各個點按順序連線起來，形成的直線，如上圖AB、BC兩條線。在這裡我們要將整個曲線的繪製量化為從0~1的過程，用progress為當前過程的進度，progress的區間即0~1。每一條線都需要根據progress生成一個點，如下圖，一個點從P0移動到P1,這是這條線從0~1的過程。

下面是繪製一個二階貝塞爾曲線過程，先給口訣： 點生線，線生點 ?。由A、B、C這3個點組成2條線AB和BC，2條線根據progress分別生成2個移動的點D和E，而D和E又連成一條線，始終保持AD:DB=BE:EC。

DE,DE再根據progress生成點F，只剩一個點，無法構成線，即為最終構成貝塞爾曲線的點。紅色點為progress在0~1過程中點F的移動過程，保持AD:DB=BE:EC=DF:FE。

3. 繪製貝塞爾曲線

經過上面 點生線，線生點 的過程，我們拿到了點F在移動中所有點的，將這些點集合連線起來，即形成了貝塞爾曲線。progress自增越慢，點集合的點越多，曲線就越細緻。

4. N階貝塞爾曲線

稍微瞭解演算法的同學就能發現，其實 點生線，線生點 是一個遞迴的過程，通過底層的點，一步步推算出最高階的點。整個推導過程像一個金字塔，底部點的數量最多，每高一階點的數量就減1，直至最高階只有1個點。

下面是遞迴程式碼：

// 貝塞爾曲線每高一階  需要遞迴次數+1
+ (NSArray *)recursionGetsubLevelPointsWithSuperPoints:(NSArray *)points progress:(CGFloat)progress{
    // 得到最終的點 正確結束遞迴 
    if (points.count == 1) return points;

    NSMutableArray *tempArr = [[NSMutableArray alloc] init];
    for (int i = 0; i < points.count-1; i++) {
        // 第一個點 
        NSValue *preValue = [points objectAtIndex:i];
        CGPoint prePoint = preValue.CGPointValue;
        // 第二個點
        NSValue *lastValue = [points objectAtIndex:i+1];
        CGPoint lastPoint = lastValue.CGPointValue;

        // 兩點座標差
        CGFloat diffX = lastPoint.x-prePoint.x;
        CGFloat diffY = lastPoint.y-prePoint.y;

        // 根據當前progress得出高一階的點
        CGPoint currentPoint = CGPointMake(prePoint.x+diffX*progress, prePoint.y+diffY*progress);
        [tempArr addObject:[NSValue valueWithCGPoint:currentPoint]];
    }
    // 繼續下一次遞迴過程
    return [self recursionGetsubLevelPointsWithSuperPoints:tempArr progress:progress];
}複製程式碼

8階貝塞爾曲線繪製過程：