貝塞爾曲線介紹
我們在前面講了繪制自定義曲線，而實(shí)際開發(fā)過程還會遇到更復(fù)雜的圖形繪制，比如下面的這些圖形：
這時候就需要用到貝塞爾曲線了。下面是百科關(guān)于貝塞爾曲線的介紹。
貝塞爾曲線就是這樣的一條曲線，它是依據(jù)四個位置任意的點(diǎn)坐標(biāo)繪制出的一條光滑曲線。在歷史上，研究貝塞爾曲線的人最初是按照已知曲線參數(shù)方程來確定四個點(diǎn)的思路設(shè)計出這種矢量曲線繪制法。貝塞爾曲線的有趣之處更在于它的“皮筋效應(yīng)”，也就是說，隨著點(diǎn)有規(guī)律地移動，曲線將產(chǎn)生皮筋伸引一樣的變換，帶來視覺上的沖擊。1962年，法國數(shù)學(xué)家 Pierre Bézier第一個研究了這種矢量繪制曲線的方法，并給出了詳細(xì)的計算公式，因此按照這樣的公式繪制出來的曲線就用他的姓氏來命名是為貝塞爾曲線。
這上面的介紹實(shí)際有點(diǎn)不太正確，三次貝塞爾曲線才需要4個點(diǎn)，而還有一次貝塞爾曲線（實(shí)際是線段）,二次次貝塞爾曲線以及高階貝塞爾曲線，只是我們常用的是三次貝塞爾曲線。要理解貝塞爾曲線怎么來的還得從1次貝塞爾曲線和2次貝塞爾曲線說起。
一次貝塞爾曲線
如上圖所示，P 點(diǎn)隨時間 t 在 P0到 P1兩點(diǎn)之間的線段移動，t=0時刻，P 點(diǎn)和 P0重合，t=1時刻 P 點(diǎn)和 P1重合。最終推導(dǎo)得到 P 點(diǎn)的位置和 P0，P1及 t 的關(guān)系是一個線性插值函數(shù)：
二次貝塞爾取曲線
二次貝塞爾曲線控制點(diǎn)有3個，如下圖所示。
一共有 P0、P1和 P2三個控制點(diǎn)，那P 點(diǎn)的位置怎么來的呢？其實(shí)P 點(diǎn)是 A 點(diǎn)到 B 點(diǎn)的一次貝塞爾曲線，而 A 點(diǎn)是 P0到 P1的一次貝塞爾曲線，B 點(diǎn)是 P1到 P2的一次貝塞爾曲線。隨著時間 t 的變化，A 點(diǎn)和 B 點(diǎn)的位置會改變，從而使得 P 點(diǎn)會沿著 P0、P1到 P2的一段曲線運(yùn)動，而更為神氣的是這是一條平滑的曲線。下面是數(shù)學(xué)公式推導(dǎo)和實(shí)際的動圖演示。
三次貝塞爾曲線
有了二次貝塞爾曲線的推導(dǎo)過程，實(shí)際上三次貝塞爾曲線的推導(dǎo)過程是一樣的。
三次貝塞爾曲線有4個控制點(diǎn)，上圖各個點(diǎn)的關(guān)系如下：
A 點(diǎn)是 P0到 P1的一次貝塞爾曲線，B 點(diǎn)是 P1到 P2的一次貝塞爾曲線，C 點(diǎn)是 P2到 P3的一次貝塞爾曲線；
D 點(diǎn)是 A 點(diǎn)到 B 點(diǎn)的一次貝塞爾曲線（也是 P0，P1和 P2的二次貝塞爾曲線），E 點(diǎn)是 B 點(diǎn)到 C 點(diǎn)的一次貝塞爾曲線（也是 P1，P2到 P3的二次貝塞爾曲線）；
P 點(diǎn)是 D 點(diǎn)到 E 點(diǎn)的一次貝塞爾曲線，也是 A ,B 和 C 的二次貝塞爾曲線，進(jìn)而就是 P0，P1，P2和 P3的三次貝塞爾曲線了。
下面是動圖展示 P 點(diǎn)的移動過程。
數(shù)學(xué)公式推導(dǎo)過程如下：
高階貝塞爾函數(shù)
實(shí)際上，貝塞爾函數(shù)還可以繼續(xù)增加控制點(diǎn)，推導(dǎo)的過程都是一樣的，只是隨著點(diǎn)數(shù)的增加，計算的量會越大，而我們大多數(shù)情況下用三階貝塞爾曲線就足夠了。文章來源：http://www.zghlxwxcb.cn/news/detail-829257.html
總結(jié)
本篇介紹了貝塞爾函數(shù)的概念，運(yùn)動點(diǎn)的過程和公式推導(dǎo)，相信通過這些內(nèi)容，大家應(yīng)該能夠知道貝塞爾曲線怎么回事了。下一篇我們來用 Flutter 繪制貝塞爾曲線，體驗(yàn)一下數(shù)學(xué)之美！文章來源地址http://www.zghlxwxcb.cn/news/detail-829257.html
到了這里，關(guān)于徹底搞懂貝塞爾曲線的原理的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
