貝塞爾曲線（Bezier Curve）原理及公式推導

1. 定義

貝塞爾曲線(Bezier curve)，又稱貝茲曲線或貝濟埃曲線，是應用於二維圖形應用程序的數學曲線。一般的矢量圖形軟件通過它來精確畫出曲線，貝茲曲線由線段與節點組成，節點是可拖動的支點，線段像可伸縮的皮筋，我們在繪圖工具上看到的鋼筆工具就是來做這種矢量曲線的。貝塞爾曲線是計算機圖形學中相當重要的參數曲線，在一些比較成熟的位圖軟件中也有貝塞爾曲線工具，如PhotoShop等。

貝塞爾曲線的一些特性：

• 使用$n$個控制點$\{P_1,P_2,...,P_n\}$來控制曲線的形狀
• 曲線通過起始點$P_1$和終止點$P_n$，接近但不通過中間點$P_2$~$P_{n-1}$

2. 直觀理解

Step 1. 在二維平面內選三個不同的點並依次用線段連接

Step 2. 在線段$AB$和$BC$上找到$D$、$E$兩點，使得$\frac{AD}{DB}=\frac{BE}{EC}$

Step 3. 連接$DE$，並在$DE$上找到$F$點，使其滿足$\frac{DF}{FE}=\frac{AD}{DB}=\frac{BE}{EC}$（拋物線的三切線定理）

Step 4. 找出符合上述條件的所有點

上述爲一個二階貝塞爾曲線。同樣的有$n$階貝塞爾曲線：

曲線	圖示
一階
三階
四階
五階

3. 公式推導

3.1 一次貝塞爾曲線（線性公式）

定義：給定點$P_0$、$P_1$，線性貝塞爾曲線只是一條兩點之間的直線，這條線由下式給出，且其等同於線性插值：
$B(t)=P_0+(P_1-P_0)t=(1-t)P_0+tP_1,\text{ } t\in[0,1]$

其中，公式裏的$P_0$、$P_1$同步表示爲其$x$或$y$軸座標。

假設$P_0$座標爲$(a,b)$，$P_1$座標爲$(c,d)$，$P_2$座標爲$(x,y)$，則有：

$\frac{x-a}{c-x}=\frac{t}{1-t} \Rightarrow x=(1-t)a+tc \tag{3-1}$

同理有：

$\frac{y-b}{d-y}=\frac{t}{1-t} \Rightarrow x=(1-t)b+td \tag{3-2}$

於是可將$(3-1) (3-2)$簡寫爲：

$B(t)=(1-t)P_0+tP_1 ,\text{ } t\in[0,1] \tag{3-3}$

3.2 二次貝塞爾曲線（二次方公式）

定義：二次貝塞爾曲線的路徑由給定點$P_0$、$P_1$、$P_2$的函數$B(t)$給出：
$B(t)=(1-t)^{2} P_0+2t(1-t)P_1+t^2P_2,\text{ } t\in [0,1]$

假設$P_0P_1$上的點爲$A$，$P_1P_2$上的點爲$B$，$AB$上的點爲$C$（也即$C$爲曲線上的點。則根據一次貝塞爾曲線公式有：

$\begin{array}{l} A=(1-t)P_0+tP_1 \\ B=(1-t)P_1+tP_2 \\ C=(1-t)A+tB \end{array} \tag{3-4}$

將上式中$A$、$B$帶入$C$中，即可得到二次貝塞爾曲線的公式：

$B(t)=(1-t)^{2} P_0+2t(1-t)P_1+t^2P_2,\text{ } t\in [0,1] \tag{3-5}$

3.3 三次貝塞爾曲線（三次方公式）

同理可得三次貝塞爾曲線公式：

$B(t)=(1-t)^{3} P_0+3t(1-t)^2P_1+3t^2(1-t)P_2+t^3P_3,\text{ } t\in [0,1] \tag{3-6}$

3.4 $n$次貝塞爾曲線（一般參數公式）

定義：給定點$P_0,P_1,...,P_n$，則$n$次貝塞爾曲線由下式給出：

$n$次貝塞爾曲線的公式可由如下遞歸表達：

$P_0^n=(1-t)P_0^{n-1}+tP_1^{n-1},\text{ }t\in[0,1] \tag{3-7}$

進一步可以得到貝塞爾曲線的遞推計算公式：

$P_i^k \begin{cases} P_i , \text{ } k=0 \\ (1-t)P_i^{k-1}+tP_{i+1}^{k-1} , \text{ } k=1,2,...,n; \text{ } i=0,1,...,n-k \end{cases}$

這就是德卡斯特里奧算法（De Casteljau’s algorithm）

參考

[1] https://www.jianshu.com/p/0c9b4b681724
[2] https://www.jianshu.com/p/8f82db9556d2