這一篇讓你徹底搞懂貝塞爾曲線的原理

貝塞爾曲線介紹

我們在前面講了繪製自定義曲線,而實際開發過程還會遇到更復雜的圖形繪製,比如下面的這些圖形:


這時候就需要用到貝塞爾曲線了。下面是百科關於貝塞爾曲線的介紹。

貝塞爾曲線就是這樣的一條曲線,它是依據四個位置任意的點座標繪製出的一條光滑曲線。在歷史上,研究貝塞爾曲線的人最初是按照已知曲線參數方程來確定四個點的思路設計出這種矢量曲線繪製法。貝塞爾曲線的有趣之處更在於它的“皮筋效應”,也就是說,隨着點有規律地移動,曲線將產生皮筋伸引一樣的變換,帶來視覺上的衝擊。1962年,法國數學家Pierre Bézier第一個研究了這種矢量繪製曲線的方法,並給出了詳細的計算公式,因此按照這樣的公式繪製出來的曲線就用他的姓氏來命名是爲貝塞爾曲線。

這上面的介紹實際有點不太正確,三次貝塞爾曲線才需要4個點,而還有一次貝塞爾曲線(實際是線段),二次次貝塞爾曲線以及高階貝塞爾曲線,只是我們常用的是三次貝塞爾曲線。要理解貝塞爾曲線怎麼來的還得從1次貝塞爾曲線和2次貝塞爾曲線說起。

一次貝塞爾曲線

如上圖所示,P 點隨時間 t 在 P0到 P1兩點之間的線段移動,t=0時刻,P 點和 P0重合,t=1時刻 P 點和 P1重合。最終推導得到 P 點的位置和 P0,P1及 t 的關係是一個線性插值函數:


二次貝塞爾取曲線

二次貝塞爾曲線控制點有3個,如下圖所示。


一共有 P0、P1和 P2三個控制點,那P 點的位置怎麼來的呢?其實P 點是 A 點到 B 點的一次貝塞爾曲線,而 A 點是 P0到 P1的一次貝塞爾曲線,B 點是 P1到 P2的一次貝塞爾曲線。隨着時間 t 的變化,A 點和 B 點的位置會改變,從而使得 P 點會沿着 P0、P1到 P2的一段曲線運動,而更爲神氣的是這是一條平滑的曲線。下面是數學公式推導和實際的動圖演示。


三次貝塞爾曲線

有了二次貝塞爾曲線的推導過程,實際上三次貝塞爾曲線的推導過程是一樣的。

三次貝塞爾曲線有4個控制點,上圖各個點的關係如下:

  • A 點是 P0到 P1的一次貝塞爾曲線,B 點是 P1到 P2的一次貝塞爾曲線,C 點是 P2到 P3的一次貝塞爾曲線;
  • D 點是 A 點到 B 點的一次貝塞爾曲線(也是 P0,P1和 P2的二次貝塞爾曲線),E 點是 B 點到 C 點的一次貝塞爾曲線(也是 P1,P2到 P3的二次貝塞爾曲線);
  • P 點是 D 點到 E 點的一次貝塞爾曲線,也是 A ,B 和 C 的二次貝塞爾曲線,進而就是 P0,P1,P2和 P3的三次貝塞爾曲線了。

下面是動圖展示 P 點的移動過程。



數學公式推導過程如下:


高階貝塞爾函數

實際上,貝塞爾函數還可以繼續增加控制點,推導的過程都是一樣的,只是隨着點數的增加,計算的量會越大,而我們大多數情況下用三階貝塞爾曲線就足夠了。

總結

本篇介紹了貝塞爾函數的概念,運動點的過程和公式推導,相信通過這些內容,大家應該能夠知道貝塞爾曲線怎麼回事了。下一篇我們來用 Flutter 繪製貝塞爾曲線,體驗一下數學之美!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章