貝茲曲線：修訂版本之間的差異

2023年9月19日 (二) 17:08的修訂版本

一次貝茲曲線

B(t)＝P₀＋(P₁－P₀)t＝(1-t)P₀＋tP₁, t∈[0,1]

B(t)描述一條由P₀至P₁的直線。例如當t=0.25時，B(t)即一條由點P₀至P₁路徑的四分之一處。

等同於線性插值。

二次貝茲曲線

二次貝茲曲線的結構
二次貝茲曲線演示 t在[0,1]區間

重點：

1. 二次貝茲曲線畫出的是拋物線，無法畫出橢圓和雙曲線。故無法畫出正圓。
2. 所有拋物線都「相似」(不是相等)，且所有曲率(0~∞)的微線段都有。
3. 兩端點外只有一個控制點。
4. 拋物線方程式 ax²+bxy+cy²+dx+ey+f=0 則 b² - 4ac=0 ，即前三項為完全平方式。

由二次貝茲曲線參數方程推導出四性質

1. 二次貝茲曲線圖形(以下簡稱圖形)是拋物線的一段。
2. t=½ 時弦與圖形垂直距離最大，圖形此處稱為頂點。
3. 弦的中點、頂點、控制點三點共線，且頂點為弦中點與控制點的中點。
4. 控制點與弦的兩端點連線分別切圖形於兩端點。

二次貝茲曲線的參數方程為：

B(t)＝(1−t)²×P₀＋2(1−t)t×P₁＋t²×P₂, t∈[0,1]

將弦水平放置後，其中：

1. t 是一個介於 0 到 1 之間的參數
2. P₀ 是起點，座標設為 (0,0)
3. P₁ 是控制點，座標設為 (α,β)
4. P₂ 是終點，座標設為 (ɭ,0)

圖形為：

我們讓起迄點水平排列，並準備由控制點座標(α,β)，求出最低點座標(a,b)。

為了找到最大和最小的 y 值，我們可以對 y 的方程進行微分，並將其設為 0 以找到可能的極值。

(一)先求控制點與最低點的 y 值關係

將控制點的 y 值代入 B_y(t) 的方程式，我們得到：

B_y(t)＝(1−t)²×0＋2(1−t)t×β＋t²×0＝2β×t(1−t)＝2β×(t−t²)

對其進行微分：

B_y′(t)=2β(1-2t)

將斜率設為 0 以解 t：

1−2t=0

t=½

將 t=½ 代入 B_y(t) ，我們得到：

B_y(½)=2β(½)(½)=½ β

因此，最低點的 y 值是 ½ β 。

(二)次求控制點與最低點的 x 值關係：

起迄點水平排列時， y 的極值均在 t=½ 處。

由上一段推理得到 b=½ β，此時 t=½ 。

B(t)＝(1−t)²×P₀＋2(1−t)t×P₁＋t²×P₂, t∈[0,1]

B_x(½)＝2(½)(½)α＋(½)(½)ɭ＝½ α＋¼ ɭ＝a

結合上段，可以發現弦的中點、頂點(最低點)、控制點三點共線，且頂點為弦中點與控制點的中點。

(三)求端點的切線斜率

切線斜率為 B_y′(t) / B_x′(t)＝2β(1-2t) / 2α+2(ɭ-2α)t＝β(1-2t) / α+(ɭ-2α)t

當 t=0 ，斜率為 β / α ，恰為 P₁P₀ 的斜率

當 t=1 ，斜率為 -β / ɭ-α，恰為 P₁P₂ 的斜率

(四)二次貝茲曲線的圖形是拋物線

將起點、迄點、控制點的座標一般化：

P₀ 座標 (x₀,y₀)

P₁ 座標 (α,β)

P₂ 座標 (x₂,y₂)

B_y(t)＝(1−t)²×y₀＋2(1−t)t×β＋t²×y₂＝y₀＋2(β-y₀)t＋(y₀-2β+y₂)t²

由於 B_y(t)＝mt²＋nt＋ɭ 的形式，所以 B_y(t) 對 t 是一拋物線方程。

若 B_x(t) 為一線性函數，則 B_y(t) 對 x 也將是一拋物線方程。

若 B_x(t) 為一線性函數，則 (x-x₀)=t×(x₂-x₀)

代入 B_y(t) 得到將為 m′x²＋n′x＋ɭ′ 的形式，也是拋物線方程。

(五)總結

所以有：

1. t=½ 時弦對圖形垂直距離最大。
2. Q=½ (P+P₁) ，P,Q,P₁，三點共線，且 Q 為 PP₁ 的中點。
3. P₁P₀, P₁P₂ 分別切二次貝茲曲線 P₀QP₂ 於 P₀, P₂
4. 二次貝茲曲線 P₀QP₂ 為拋物線。

二次貝茲曲線在 SVG path 中的路徑表達語法

Q or q (quadratic Bézier curve)

x1 y1 x y <path d='M0,0 Q50,50 100,0' style='stroke:black'/> <path d='m0,0 q50,50 100,0' style='stroke:black'/>

從目前點的座標畫條 二次貝茲曲線到指定 點的 x,y 座標：其中 x1,y1 為控制點

參考文章

• 貝茲曲線
• 連續平滑的貝塞爾曲線
• 二元二次方程式圖形判別的例題
  ---------- 擬合圓(須四塊三次貝茲曲線組合，二次貝茲曲線要更多塊組合 ----------

1. How to create circle with Bézier curves?
2. 如何使用Bézier曲線創建圓？
3. 用三阶贝塞尔曲线拟合圆