天天看點

從暴露年齡的屏保說起-貝塞爾曲線(附Demo)

從暴露年齡的屏保說起-貝塞爾曲線(附Demo)

這個屏保很多90後的朋友可能沒見過,當年在windows剛普及不久的時候,很多人的電腦上的螢幕保護程式就是這個。

印象這個屏保叫貝塞爾曲線,其中的每一條線都是一條貝塞爾曲線。

貝塞爾曲線就是今天的主題。

Android中很多地方都用到了貝塞爾曲線,像下面這個水波紋效果就是用貝塞爾曲線做的。

什麼是貝塞爾曲線

Bezier curve(貝塞爾曲線)是一種用數學描述任意曲線的方法。

它用不同的階來描述曲線的複雜度,從一階到高階都有。

簡單的說貝塞爾曲線由起點+終點+控制點組成,

一階貝塞爾就是一條直線,二階貝塞爾有起點終點和一個控制點組成,三階則有兩個控制點。

下面是一條二階貝塞爾,B點就是控制點了。

從暴露年齡的屏保說起-貝塞爾曲線(附Demo)

貝塞爾曲線的原理

一條二階貝塞爾曲線在起點,結束點,控制點都确定的情況下也就能确定了,

不感興趣的朋友可以跳過這一段對原理的解釋,

不看原理也沒關系,因為對于 Android來說我們隻需要知道這三個點,就能通過Path.cubicTo這個方法繪制出一跳貝塞爾曲線。

下面對原了解釋一下,

一跳曲線是由多個點連接配接起來的,繪制曲線的過程就是找這些點并連接配接起來的過程。

以A為起點,C為終點,B為控制點的話,要找繪制點,首先從A到B中間随意找一個點D,

從暴露年齡的屏保說起-貝塞爾曲線(附Demo)

A到D的距離和A到B的距離記百分比 P = AD : AB,

B到C上以 P 為同樣的百分比找出點 E, BE : BC 應該和 AD : AB 相等,

從暴露年齡的屏保說起-貝塞爾曲線(附Demo)

然後連接配接DE,在DE上同樣找到點F,滿足條件 DF : DE = AD : AB = BE : BC = P,

從暴露年齡的屏保說起-貝塞爾曲線(附Demo)

這樣就找到了會緻點F。

在B點不動的情況下不斷的移動D點,我們就可以得到從A到C的貝塞爾曲線了。

如果想象不出來的話可以看wiki上的這個圖,

從暴露年齡的屏保說起-貝塞爾曲線(附Demo)

Android實作

在Android上的實作非常簡單,Path類已經幫我們完成了計算的過程,

它提供了幾個方法分别用來描述貝塞爾曲線,對于二階曲線來說用的是quadTo方法,三階是cubicTo。

以二階為例,

Path path = new Path();
path.moveTo(start.x, start.y);
path.quadTo(control1.x, control1.y, end.x, end.y);
           

這樣就完成了一條二階貝塞爾曲線的path,之後用 canvas.drawPath就可以畫出來了。

效果圖如下

從暴露年齡的屏保說起-貝塞爾曲線(附Demo)

如果想要源碼的話在公衆号回複”貝塞爾”就可以啦。

從暴露年齡的屏保說起-貝塞爾曲線(附Demo)