軟體向量繪圖原理：為什麼貝茲曲線
從雷諾汽車到電腦繪圖
1960 年代，法國雷諾汽車公司的工程師皮埃爾·貝茲正在為汽車車身的自由曲面設計尋找一種可透過電腦輔助的數學表示法。當時的 CAD 系統只能處理直線、圓弧與圓錐曲線，完全無法描述車身那種既有機感又需精準控制的曲面。
貝茲提出以「控制多邊形」來定義曲線：設計師只需拉動少數幾個控制點，曲線便會以平滑的方式被「吸引」過去，而不必直接指定曲線上的每一個點。這種間接控制的思路極大地降低了操作難度，因為人腦對「拉一個把手讓弧線彎曲」的直覺，遠勝於輸入十幾個座標點。
幾乎在同一時期，法國雪鐵龍的保羅·德·卡斯特里奧（Paul de Casteljau）在 1959 年已獨立發展出類似的演算法，用於計算曲線上的任意點。由於商業保密，德·卡斯特里奧的工作直到 1980 年代才公開，因此這個演算法日後被命名為「德·卡斯特里奧演算法」（de Casteljau's algorithm），而曲線本身則冠上了貝茲之名。這是一段典型的「同一數學思想在兩個地方被獨立發現」的科學史案例。
真正讓貝茲曲線走出汽車工業、進入大眾電腦的，是 1980 年代的 PostScript 語言與 Adobe 公司。約翰·沃諾克與查克·葛斯克在開發 PostScript 時，選擇以三次貝茲曲線作為描述字型輪廓的基本單位，因為它既能精確描述字型的複雜造型，又能在印表機的低階處理器上以有限的浮點運算量完成渲染。這項技術決策，直接決定了此後四十年向量繪圖軟體的語言基礎。
伯恩斯坦多項式與曲線定義
從數學角度來看，一條 n 階貝茲曲線是伯恩斯坦多項式（Bernstein Polynomial）的線性組合。給定 n+1 個控制點 P₀, P₁, …, Pₙ，曲線定義為：
B(t) = Σᵢ₌₀ⁿ C(n,i) · tⁱ · (1−t)ⁿ⁻ⁱ · Pᵢ ，其中 t ∈ [0, 1]
其中 C(n,i) 是二項式係數。這個公式的意義是：曲線上的每一點，都是所有控制點的「加權平均」，而權重會隨參數 t 變化。當 t=0 時，曲線恰好落在 P₀；當 t=1 時，恰好落在 Pₙ；中間的每一個控制點則像磁鐵一樣，把曲線往自己的方向拉扯，卻永遠不會真正穿過它（除非控制點共線等退化情形）。
這種「曲線必在控制點凸包內」的性質，正是後續要談的數值穩定性與碰撞偵測效率的來源。而軟體業界普遍採用三次（cubic）而非更高階的貝茲曲線，也有其明確的工程理由，這點會在第三章詳細說明。
三、貝茲曲線的核心原理：控制點、階數與形變
理解貝茲曲線的運作機制，是掌握向量繪圖的關鍵。這一章我們從階數談起，逐步拆解控制點的直覺邏輯與曲線連續性的問題。
二次與三次貝茲曲線
二次貝茲曲線（Quadratic Bézier）只有三個控制點：起點 P₀、控制點 P₁、終點 P₂。它的形狀是一段拋物線弧。TrueType 字型格式正是以二次貝茲曲線描述輪廓，理由是計算量較低，適合早期印表機與螢幕的字型光柵化。
三次貝茲曲線（Cubic Bézier）則有四個控制點：P₀、P₁、P₂、P₃。它比二次曲線多了一個自由度，因此可以描述更複雜的 S 形曲線與更細膩的造型變化。PostScript 與 OpenType（CFF 輪廓）、SVG、PDF、以及絕大多數向量繪圖軟體的路徑格式，都採用三次貝茲曲線。
為什麼不是四次、五次或更高？原因有三。第一，四次以上的曲線在數學上仍然可行，但控制點數量增加後，設計師很難預測每個控制點對曲線的實際影響，操作直覺會急遽下降。第二，高階曲線的數值穩定性較差，微小浮點誤差可能被放大。第三，任意一條高階貝茲曲線都可以被精確地切割成若干段三次貝茲曲線的組合（透過細分演算法），因此三次曲線在表達能力上已經「足夠完備」，沒有必要付出更高的計算與操作成本。
控制點的直覺操作
在鋼筆工具的操作中，每個錨點通常會附帶一或兩支「控制桿」（Handle / Direction Line），其端點就是相鄰曲線段的控制點。控制桿的長度決定曲線被「拉」的多寡，方向則決定曲線在錨點處的切線方向。這也是為什麼鋼筆工具的核心心法是：「先決定切線方向，再決定彎曲程度」。
這種設計的可貴之處，在於它把複雜的曲線擬合問題轉化為少量二維向量的操作。一個設計師不需要懂伯恩斯坦多項式，也能透過觀察控制桿與曲線的連動關係，建立起穩定的操作直覺。這種「數學複雜度被良好封裝」的特性，正是貝茲曲線能夠普及到非工程背景使用者的重要原因。
曲線的連續性與平滑度
當多段貝茲曲線首尾相連時，銜接處的平滑程度由「連續性階數」決定。常見的定義有三種：
在 Illustrator 或 Inkscape 中，當你拖曳錨點的控制桿時，軟體預設會維持兩側控制桿共線（即 C¹ 連續）；按住 Alt 或 Option 鍵則可獨立調整單側，製造出「尖角」（Corner Node）。這種「預設平滑、按鍵尖角」的互動設計，正是把連續性數學轉譯成設計師語言的典型例子。
四、為什麼是貝茲曲線？五大關鍵優勢
歷史上被用來描述曲線的數學工具不少，貝茲曲線之所以成為向量繪圖的通用語言，是數學性質、產業標準化與使用者直覺三方面共同作用的結果。以下整理五項最關鍵的優勢。
數值穩定性與計算效率
貝茲曲線是控制點的多項式函數，計算過程穩定，不易產生數值爆炸。同時，德·卡斯特里奧演算法提供了一個極具數值穩定性的遞迴求值方式：透過反覆在線段上做線性插值，就能算出曲線上任意一點，過程中只涉及加權平均，不會出現除以接近零的數值等危險運算。
此外，貝茲曲線可以被快速切割（subdivision）：透過德·卡斯特里奧演算法，一條曲線可以精確地切成兩段較短的貝茲曲線，而切割後的曲線仍然保持相同的形狀。這項性質讓渲染器可以根據螢幕解析度決定要細分到多細，兼顧畫質與效能。
仿射不變性與幾何直覺
貝茲曲線具有「仿射不變性」（Affine Invariance）：對整條曲線做平移、旋轉、縮放、剪切，等同於對所有控制點做同樣的變換。這個性質在實務上意義重大——當你旋轉一個圖形時，軟體不需要重新計算曲線上的每一個點，只需旋轉控制點，曲線形狀自動跟著正確變換。這不僅節省運算，也保證了變換前後的形狀一致性。
另一項關鍵性質是「凸包性質」（Convex Hull Property）：曲線永遠落在控制點所構成的凸包內。這讓碰撞偵測、選取範圍判斷、視圖裁剪等操作可以用極低的成本完成——先用控制點的包圍盒做粗篩，只有落在範圍內的曲線才需要進一步精算。
標準化與跨軟體互通
貝茲曲線被納入 PostScript（1984）、PDF、SVG（1999 年發布的 1.0 規格即以三次貝茲曲線 C 指令描述曲線）、OpenType 等公開或產業標準中。這意味著一個在 Illustrator 中繪製的向量路徑，可以近乎無損地匯入 Inkscape、Figma、瀏覽器或雷射切割機的控制軟體。
標準化帶來的網路效應是巨大的：當所有工具都說同一種「曲線語言」，設計資產的流通成本就大幅下降。這也解釋了為什麼即使後來出現更先進的曲線表示法（如 NURBS、樣條曲線），貝茲曲線仍然穩坐向量繪圖的基礎地位——不是因為它絕對最優，而是因為整個生態系都建立在它之上。
字型與排版產業的歷史路徑依賴
字型是貝茲曲線最早、也最深入的大規模應用場景。PostScript Type 1 字型以三次貝茲曲線描述字形輪廓，TrueType 則使用二次貝茲曲線。時至今日，無論是螢幕顯示或列印輸出，你讀到的每一個字的輪廓，幾乎都是貝茲曲線的組合。
這種路徑依賴形成了強大的產業慣性：字型設計工具（FontLab、Glyphs、RoboFont）、字型格式（OpenType）、渲染引擎（FreeType、DirectWrite、CoreText）全都圍繞貝茲曲線建構。要在這個生態中引入新的曲線表示法，成本極高。這是貝茲曲線地位穩固的深層原因之一。
使用者直覺與學習曲線
最後但同樣重要的一點：貝茲曲線的控制方式與人類的空間直覺高度契合。「拉一條桿子讓曲線彎過去」是一個可以在幾分鐘內理解的隱喻，而不需要理解背後的多項式。這種「數學複雜、操作簡單」的特性，讓向量繪圖從工程師的專業工具，轉變為設計師的日常工具。
相較之下，NURBS 需要理解節點向量（Knot Vector）與權重（Weight）的概念，樣條曲線需要理解控制點與節點的關係，這些都對非工程背景使用者構成明顯門檻。貝茲曲線在這場「可用性競賽」中勝出，並不僅僅是數學上的勝利，更是介面設計與認知心理學上的勝利。
五、主流向量軟體的貝茲曲線實作比較
雖然各家軟體底層都使用貝茲曲線，但實作細節與操作體驗仍有明顯差異。以下針對幾款主流工具進行比較。
Adobe Illustrator
作為向量繪圖的產業標準，Illustrator 的鋼筆工具提供了相當完整的控制能力：支援 C¹ 連續的自動平滑、Alt 鍵獨立調整單側控制桿、以及「錨點工具」可即時轉換平滑點與尖角點。其路徑格式以三次貝茲曲線為基礎，匯出 SVG 與 PDF 時能保持高度相容。不過 Illustrator 在處理極大量錨點時效能會下降，這也是許多設計師在複雜插畫中會刻意簡化路徑的原因。
Inkscape
Inkscape 是開源向量繪圖的代表，原生使用 SVG 作為檔案格式，因此其貝茲曲線的資料結構與 W3C 標準完全對齊。它的鋼筆工具除了標準貝茲曲線外，還提供「Spiro 路徑」模式，以另一種數學表示法（Spiro 樣條）來產生更接近圓弧的平滑曲線，再轉換為貝茲曲線輸出。這種「多種曲線表示法共存、最終統一輸出為貝茲曲線」的架構，是 Inkscape 相對於商業軟體的一個有趣特色。
Affinity Designer
Affinity Designer 以高效能與一次性買斷制聞名。其鋼筆工具的操作邏輯與 Illustrator 接近，但在節點編輯的即時反應速度上普遍獲得較高評價。它同樣以三次貝茲曲線為基礎，並在路徑簡化與布林運算的精度上做了不少最佳化。對於需要處理大量路徑的平面設計工作，是近年常見的替代方案。
Figma 與 Sketch
Figma 與 Sketch 主要面向 UI/UX 設計，其向量編輯功能相對精簡，但足以應付介面圖示與插畫需求。兩者都支援三次貝茲曲線路徑，並可直接匯出 SVG。Figma 的優勢在於多人協作與即時預覽，其向量編輯器在瀏覽器端以 WebGL 渲染，對於中等複雜度的路徑效能表現良好。Sketch 則以 macOS 原生體驗與外掛生態見長。
軟體
曲線階數
原生格式
特殊曲線功能
適用場景
Adobe Illustrator
三次貝茲
AI / PDF / SVG
完整錨點工具、路徑管理
插畫、印刷、品牌設計
Inkscape
三次貝茲
SVG
Spiro 樣條模式、路徑效果
開源工作流、網頁圖形
Affinity Designer
三次貝茲
AFDESIGN / SVG
高效能節點編輯、布林運算
平面設計、替代 Adobe
Figma
三次貝茲
FIG / SVG
協作編輯、元件化路徑
UI/UX、設計系統
Sketch
三次貝茲
SKETCH / SVG
外掛生態、符號系統
macOS 介面設計
六、貝茲曲線的極限與替代方案
貝茲曲線並非萬能。在某些專業領域中，它的限制變得明顯，因而出現了專門的替代方案。理解這些限制，能幫助我們在正確的場景選用正確的工具。
NURBS 與 CAD 領域
在電腦輔助設計（CAD）與工業設計領域，主流表示法是 NURBS（非均勻有理 B 樣條）。NURBS 可以精確表示圓、橢圓、圓柱面等二次曲面，而貝茲曲線只能以多段曲線逼近圓形，永遠存在微小誤差。此外，NURBS 透過節點向量與權重，能更精細地局部控制曲面形狀，這對汽車、航太、模具設計至關重要。
因此，你會看到一個有趣的產業分工：平面設計與網頁設計用貝茲曲線，工業設計與建築用 NURBS。兩者並非優劣關係，而是針對不同精度需求與操作習慣的最佳化結果。
螺旋線與圓弧的專用工具
即使在向量繪圖軟體中，純粹的貝茲曲線也不是唯一選項。Illustrator 提供螺旋線工具、圓角矩形工具；Inkscape 提供星形、螺旋、3D 盒等參數化形狀工具。這些工具產生的圖形最終多半會被轉換為貝茲曲線路徑，但操作過程中保留參數化的便利性。這說明了一個設計原則：貝茲曲線是「輸出格式」，但不一定是「操作介面」。好的軟體會在操作層提供更直覺的參數化工具，再於底層轉譯為貝茲曲線。
樣條曲線的現代復興
近年來，B 樣條（B-Spline）與 Catmull-Rom 樣條在動畫與程式化設計領域重新受到重視。原因在於樣條曲線的「控制點會直接落在曲線上」（Catmull-Rom 的情形），對某些需要路徑通過特定點的应用（如動畫路徑、資料曲線擬合）更為直覺。不過在向量繪圖軟體中，這些表示法多半作為輔助工具存在，最終仍轉換為貝茲曲線以確保相容性。
七、實務應用：從路徑繪製到動畫曲線
理解了原理之後，最重要的是把它轉化為實務能力。以下從三個面向說明貝茲曲線的應用要點。
鋼筆工具的操作心法
鋼筆工具是多數人學習向量繪圖的第一道門檻。以下是幾個實用的操作原則：
圖示設計與字型製作
在圖示設計中，貝茲曲線的「少量控制點」特性直接影響圖示的可維護性。一個好的圖示應該讓每一個錨點都有明確的功能，而不是靠大量錨點硬湊形狀。這也是為什麼專業圖示集（如 Material Icons、Feather Icons）在原始碼中檢視時，路徑資料往往相當精簡。
在字型製作中，貝茲曲線的控制更為講究。字型設計師需要處理「極值點」（Extrema，曲線在水平或垂直方向的最高、最低點）與「拐點」（Inflection Point），並確保輪廓在各種字重下都能保持視覺平衡。OpenType 的 CFF 輪廓使用三次貝茲曲線，TrueType 輪廓使用二次貝茲曲線，兩者在轉換時需要進行曲線擬合，這也是字型工程中的一個經典技術課題。
動畫緩動曲線
貝茲曲線的應用遠不限於靜態圖形。在 CSS、After Effects、Unity 等動畫系統中，三次貝茲曲線被用來定義「緩動函數」（Easing Function）：以時間為橫軸、動畫進度為縱軸，四個控制點定義出加速、減速、回彈等運動質感。CSS 的 cubic-bezier(x1, y1, x2, y2) 就是這個概念的標準化實作。
這再次印證了貝茲曲線的通用性：同一套數學，既描述空間中的形狀，也描述時間中的節奏。理解控制點與曲線的關係，對動畫設計師而言同樣是核心能力。
八、常見誤解與學習建議
在教學與社群討論中，關於貝茲曲線有幾個反覆出現的誤解，值得特別釐清。
學習建議方面，初學者可以從「描摹既有圖形」開始，練習用最少的錨點重現曲線；中階使用者可以研究路徑簡化、形狀建立工具與布林運算；進階使用者則可進一步理解 SVG 路徑語法（M、L、C、Q、S、T 等指令），甚至用程式碼生成路徑。這種「從手感到語法」的學習路徑，能讓貝茲曲線從一個黑箱工具，變成真正可控的設計語言。
結語
回顧整篇文章，我們從向量繪圖的資料本質出發，走過貝茲曲線的數學定義與歷史脈絡，拆解了控制點、階數與連續性的運作機制，並比較了主流軟體的實作差異與實務應用。可以這麼說：貝茲曲線之所以成為數位設計的通用語言，並非因為它在數學上絕對完美，而是因為它在「表達能力、計算效率、操作直覺、產業標準」四個面向取得了極佳的平衡。
它讓工程師能用穩定的演算法處理曲線，讓設計師能用一支鋼筆工具畫出腦中的形狀，讓整個產業鏈從字型、印刷、網頁到動畫都能共享同一套曲線語言。下次當你在螢幕上拉動那支小小的控制桿時，不妨想想：你正在操作的，是一段橫跨六十年、從雷諾汽車到全球設計社群的數學遺產。理解它，會讓你的每一次點擊與拖曳，都更有意識、也更有效率。