貝塞爾曲線


繪制曲線

​ 相對於直線而言,曲線的繪制與坐標關系更難理解一些。由於LayaAir引擎繪制的是貝塞爾曲線,所以本文中先針對貝塞爾曲線的基礎進行說明,然后再結合引擎的API進行講解。

一、貝塞爾曲線的基礎

​ 貝塞爾曲線在港澳台等地稱為貝茲曲線,新加坡馬來西亞等地稱為貝濟埃曲線。一般的矢量圖形軟件通過它來精確畫出曲線,貝塞爾曲線由線段與節點組成,節點是可拖動的支點,線段像可伸縮的皮筋,我們在繪圖工具上看到的鋼筆工具就是來做這種矢量曲線的。

​ 貝塞爾曲線是應用於二維圖形應用程序的數學曲線。曲線的定義有四個點:起始點、終止點(也稱錨點)以及兩個相互分離的中間點。滑動兩個中間點,貝塞爾曲線的形狀會發生變化。

​ 基於線性、二次方、三次方等公式的不同,貝塞爾曲線也被稱為一次、二次……五次貝塞爾曲線,有些文章也稱為一階、二階……說的是一回事。下面通過動圖讓大家直觀的理解一下:

1.1 一次貝塞爾曲線

​ 1.gif

​ (圖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.gif

​ (圖2)

​ blob.png

​ (圖3)

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

1.3 三次貝塞爾曲線

​ 3.gif

​ (圖4)

​ blob.png

​ (圖5)

​ 說明:對於三次曲線,可由線性貝塞爾曲線描述的中介點 Q0、Q1、Q2,和由二次曲線描述的點 R0、R1 所建構。

1.4 高階貝塞爾曲線

​ 由於高階貝塞爾曲線並不常見,本文將不再詳細說明,想對貝塞爾曲線原理了解更多的可以查看其它相關文章。

​ 4.gif

​ (圖6) 四次貝塞爾曲線

​ 5.gif

​ (圖7) 五次貝塞爾曲線

 

https://ldc.layabox.com/doc/?nav=zh-ts-1-4-2


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM