自定義貝塞爾曲線

2021-08-10 05:35:43 字數 3569 閱讀 7410

有時候現有的控制項無法滿足我們的需求,打不到我們想要的效果,這時候就需要我們自己來寫乙個自定義view,來滿足自己的需求。

而貝塞爾曲線,就是其中的一種方式,比如說我們需要畫乙個弧形的線條或者是圖形,這時候就可以使用貝塞爾曲線來進行,最簡單的就是畫乙個圓形。

下面就是介紹一下貝塞爾曲線:

貝塞爾曲線,就是通過乙個起始點,乙個結束點,中間對應不同的數量的條件點組成,每條線的距離可以不同,長度也可以不同,所連線的角度也不同。

最簡單的,就是只有起始點和結束點的,就是一條直線。。。

之後,就是三條線的貝塞爾曲線,根據角度和長度不同可以形成半圓或者是扭曲的圓。

以兩條線三點的貝塞爾曲線為例,第乙個是起始點,第二個是結束點,中間還有乙個條件點,三條線鏈結形成乙個夾角,三個角分為abc。

然後,我們可以設定為由a到b的時間為0-1,b到c的時間也是0-1,當開始畫圖的時候,從a到b的點與b到c的點相連成一條線,在這條線上,有個點d以同樣的時間進度前進,從a開始,隨著進度到c,在這期間所畫成的弧線就是貝塞爾曲線。

比如,那個處於中間位置的藍色,當a到b的線上走到0.5的位置,那麼b到c的距離也一定是0.5,而在那條藍色的線上的點,處於的位置也一定是0.5,隨著增加而增加。

也就是說,所有的點的進度,都是相同的,無論所在的線的長短。

這就是要給二階的貝塞爾曲線,這樣就算是其他更高階的貝塞爾曲線也是同樣的方式處理。

三階的貝塞爾曲線是三條線,四階的是四條線:

而運算的方式都是一樣的,將兩個相近的線相連,三階的就會成為兩條線,在將兩條線相連,就會形成第三條線,而第三條線的移動和上面的點經過的位置就是曲線的移動路線,四階的一樣。

這是貝塞爾曲線的運算公式,每次隨著增加,運算的平方都會跟著增加,理論上可以無上限,但是我們平時並不會用到那麼多就是了,基本上三階的就夠了。

下面就是通過自定義view來實現1~3階的貝塞爾曲線,因為在系統裡直接就有1~3階的計算公式,我們只要直接呼叫本身的就可以了。

public class

text_3_2_1

extends

view

public

text_3_2_1(context context,

@nullable

attributeset attrs)

public

text_3_2_1(context context,

@nullable

attributeset attrs,

int

defstyleattr) //

畫筆private final

paint

mpaint

=new

paint(paint.

anti_alias_flag);

private final

path

mpath

=new

path(); //

初始化方法

private void

init()

@override

protected void

ondraw(canvas canvas) }

而從四階以上,就需要我們自己進行計算,因為裡面就已經沒有公式了,而且因為需要迴圈計算從0-1之間的移動,消耗的資源也是很多的,下面就是**。

public class

bezierview

extends

view

public

bezierview(context context,

@nullable

attributeset attrs)

public

bezierview(context context,

@nullable

attributeset attrs,

int

defstyleattr)

private

path

mbezier

=new

path();

private

paint

mpaint

=new

paint(paint.

anti_alias_flag);

public void

init()

private void

initbezier();

float

ypoints=

new float;

// float pregress=0.2f;//...

path path=

mbezier;

int

fps=

100;

for

(int

i=0;i<=

100;i++) }

/****

計算某時刻的貝塞爾所處的值(

x 或y )

*@param

t

時間( 0~1

) *

@param

values

貝塞爾點集合(

x 或y )

*@return

當前 t

時刻的貝塞爾所處點

*/private float

calculatebezier(

float

t,float

... values) }

//運算時結構儲存在第一位

// 所以,我們返回第一位

return

values[0];

}@override

protected void

ondraw(canvas canvas) }

貝塞爾曲線

1.概述 貝塞爾曲線 b zier curve 又稱 貝茲曲線或貝濟埃曲線,是應用於二維圖形應用程式的數學曲線。一般的向量圖形 軟體通過它來精確畫出曲線,貝茲曲線由 線段與節點組成,節點是可拖動的支點,線段像可伸縮的皮筋,我們在繪圖工具上看到的鋼筆工具就是來做這種向量曲線的。貝塞爾曲線是計算機圖形學...

貝塞爾曲線

由於工作需要,最近在研究乙個類似qq訊息劃掉的效果 很多強迫症患者童鞋對這個簡直是愛不釋手,當然這個也包括我自己 貝塞爾曲線就是這樣的一條曲線,它是依據四個位置任意的點座標繪製出的一條 光滑曲線 在歷史上,研究貝塞爾曲線的人最初是按照已知曲線 引數方程 來確定四個點的思路設計出這種向量曲線繪製法。貝...

貝塞爾曲線

貝塞爾曲線在android中運用廣泛,可以用來繪製各類複雜曲線,因為貝塞爾曲線只需要指定控制點,就能繪製出特定的曲線。其次是做點和點的平滑過渡。為什麼可以做到如上兩點,看下面的講解 首先來說,貝塞爾曲線有階的概念,這個階可以理解為控制點,一階的控制點只有兩個。如上是一階的方程,其中t取值為0到1,可...