必須要理解掌握的貝塞爾曲線(原創)

2021-09-20 02:23:48 字數 2286 閱讀 9049

在android開發和面試中(尤其是面試),一些中高階崗位可能會問你自定義控制項的詳細內容,我們知道自定義控制項這一塊涉及到的內容很多,回答的越多越深入,那麼面試的印象會更好。自定義控制項涉及的內容比如測量和繪製、事件分發的處理、動畫效果的渲染與實現,當然還有不得不提的貝賽爾曲線(因為一些面試官自己都不是很理解二階貝塞爾、三階貝塞爾曲線等概念)。

一些朋友看到以歪果仁大佬名字定義的一些計算公式、定理就頭大(比如梅涅勞斯(menelaus)定理、塞瓦(ceva)定理等),不得不承認我也是。本著《士兵突擊》不拋棄不放棄的精神,就算是在難啃的骨頭也要堅持啃下來!因此本篇文章主要介紹的是貝賽爾曲線的基本概念、在android的應用場景以及一些思考。不考慮篇幅的情況下力求將概念和理解寫的詳細。

貝賽爾曲線的前世今生:

貝塞爾曲線,這個命名規則一眼看上去大概是乙個叫貝塞爾的數學家發明的。但,貝塞爾曲線依據的最原始的數學公式,是在2023年在數學界廣為人知的伯恩斯坦多項式。簡單理解,伯恩斯坦多項式可以用來證明,在[ a, b ] 區間上所有的連續函式都可以用多項式來逼近,並且收斂性很強,也就是一致收斂。再簡單點,就是乙個連續函式,你可以將它寫成若干個伯恩斯坦多項式相加的形式,並且,隨著 n→∞,這個多項式將一致收斂到原函式,這個就是伯恩斯坦斯的逼近性質。

時光荏苒歲月如梭,鏡頭切換到了2023年。當時就職於雪鐵龍的法國數學家 paul de casteljau 開始對伯恩斯坦多項式進行了圖形化的嘗試,並且提供了一種數值穩定的德卡斯特里奧(de casteljau) 演算法。(多數理**式是建立在大量且系統的數學建模基礎之上研究的規律性成果)根據這個演算法,就可以實現通過很少的控制點,去生成複雜的平滑曲線,也就是貝塞爾曲線

但貝塞爾曲線的聲名大噪,不得不提到2023年就職於雷諾的法國工程師皮埃爾·貝塞爾(pierre bézier),他使用這種方法來輔助汽車的車體工業設計(最早計算機的誕生則是為了幫助美國海軍繪製彈道圖),並且廣泛宣傳(典型的理論聯絡實際並獲得成功的示例),因此大家稱為貝塞爾曲線 。

貝賽爾曲線的數學理論:

既然貝賽爾曲線的本質是通過計算公式去繪製平滑的曲線,那就可以通過數學工具進行實際求證以及解釋說明。當然對其進行數學求證就沒必要了,因為這些偉大的數學家們已經做過了,這裡只是解釋說明:

3點連線

貝塞爾曲線

可能有些朋友還是不理解,那麼這個gif我截下其中的一張圖說明,如下圖:

示例說明

**裡的p0、p1、p2分別代表的是上圖的:p0 == a;p1 == b;p2 == c。那麼這個黑色點,代表的就是f點,綠色線段的2個端點(p0-p1線段上的綠色點,代表是就是d點,p0-p2線段上的綠色點,代表是就是e點)。線段上面點的獲取,必須要滿足等比關係。

關於貝賽爾曲線的基本數學理論大概就是上面的內容。兩個線段根據等比關係找點的貝塞爾曲線,一般也稱為二階貝塞爾曲線。

貝賽爾曲線的n階拓展(三階貝塞爾與n階貝塞爾曲線)

整乙個三階貝賽爾曲線的動作加起來就是下面的一張**:

三階貝塞爾

那麼四階貝賽爾曲線的實現步驟也是一樣的,平面上先選取5個點(5點4線)、依次選點(滿足等比關係)、依次連線、根據計算規則找到所有的點(逐個連線)。。。。。。

四階貝賽爾曲線

貌似都是從二階貝塞爾曲線說起的,那麼一階貝賽爾又是怎麼樣的?一階貝賽爾如圖:

一階貝賽爾

可以看到一階貝賽爾是一條直線!因此,n階貝賽爾不僅可以畫平滑的曲線也可以畫直線,因此自定義控制項畫直線又多了一種可選擇的方式,但是一般用貝賽爾主要是畫曲線,這裡只是提供了一種別的解決思路;另外,在android屬性動畫,系統為我們提供了乙個pathinterpolator插值器。這個pathinterpolator裡面就有貝塞爾曲線的身影。有興趣的小夥伴也可以去了解一下。

未完待續。。。

如果這篇文章對你有幫助,希望各位看官留下寶貴的star,謝謝。

貝塞爾曲線的應用

本文參考了 demo的github位址 就重寫乙個view而已 如下 created by abner on 2016 8 6.public class bubbleview extends view public bubbleview context context,attributeset at...

貝塞爾曲線的生成

貝塞爾曲線的動態圖 該 包含了簡單的一階二階三階曲線的公式.貝塞爾曲線可以表示如下 b t i 0nc in 1 t n iti pib t sum c i 1 t t ip i b t i 0 n cin 1 t n itip i 其中 cin n i n i c i n frac cin i n...

繪製漸變的貝塞爾曲線

前面介紹了使用qt中的api繪製貝塞爾曲線,使用qt的api繪製貝塞爾曲線可參見繪製貝塞爾曲線,本章介紹一下使用線段連線的方式繪製一條漸變的貝塞爾曲線。效果如下圖所示 二階貝塞爾曲線的公式如下 b t p 0 1 t 3 3p1t 1 t 2 3 p2t2 1 t p3 t3,t 0,1 b t p...