繪制曲線
相對於直線而言,曲線的繪制與坐標關系更難理解一些。由於LayaAir引擎繪制的是貝塞爾曲線,所以本文中先針對貝塞爾曲線的基礎進行說明,然后再結合引擎的API進行講解。
一、貝塞爾曲線的基礎
貝塞爾曲線在港澳台等地稱為貝茲曲線,新加坡馬來西亞等地稱為貝濟埃曲線。一般的矢量圖形軟件通過它來精確畫出曲線,貝塞爾曲線由線段與節點組成,節點是可拖動的支點,線段像可伸縮的皮筋,我們在繪圖工具上看到的鋼筆工具就是來做這種矢量曲線的。
貝塞爾曲線是應用於二維圖形應用程序的數學曲線。曲線的定義有四個點:起始點、終止點(也稱錨點)以及兩個相互分離的中間點。滑動兩個中間點,貝塞爾曲線的形狀會發生變化。
基於線性、二次方、三次方等公式的不同,貝塞爾曲線也被稱為一次、二次……五次貝塞爾曲線,有些文章也稱為一階、二階……說的是一回事。下面通過動圖讓大家直觀的理解一下:
1.1 一次貝塞爾曲線

(圖1)
說明:上圖是由 P0 至 P1 的連續點, 描述的是一條線性的貝賽爾曲線。線性貝塞爾曲線函數中的 t 會經過由 P0 至 P1 的 B(t) 所描述的曲線。例如當 t=0.25 時,B(t) 即一條由點 P0 至 P1 路徑的四分之一處。就像由 0 至 1 的連續 t,B(t) 描述一條由 P0 至 P1 的直線。
1.2 二次貝塞爾曲線

(圖2)

(圖3)
說明:為建構二次貝塞爾曲線,上圖由 P0 至 P1 的連續點 Q0,描述一條線性貝塞爾曲線。由 P1 至 P2 的連續點 Q1,描述一條線性貝塞爾曲線。由 Q0 至 Q1 的連續點 B(t),描述一條二次貝塞爾曲線。
1.3 三次貝塞爾曲線

(圖4)

(圖5)
說明:對於三次曲線,可由線性貝塞爾曲線描述的中介點 Q0、Q1、Q2,和由二次曲線描述的點 R0、R1 所建構。
1.4 高階貝塞爾曲線
由於高階貝塞爾曲線並不常見,本文將不再詳細說明,想對貝塞爾曲線原理了解更多的可以查看其它相關文章。

(圖6) 四次貝塞爾曲線

(圖7) 五次貝塞爾曲線
https://ldc.layabox.com/doc/?nav=zh-ts-1-4-2
