貝塞爾曲線學習 正弦曲線

2021-09-27 12:36:39 字數 1425 閱讀 5420

以前通過自定義view可以繪製出各種效果,但這些效果多數還是存在於規則的影象,今天學習貝塞爾曲線,來繪製一些更特別的線條。

簡單來說貝塞爾曲線通過控制點,可以繪製出各種路徑。一般我們常用的二階貝塞爾和三階貝塞爾(對應的控制點數量不同)。這也是android提供給我們的方法。

網上介紹的資料很多,可以全面了解下。下面我用二階貝塞爾曲線繪製乙個正弦曲線,然後在讓曲線動起來,來模仿波浪吧。

**超級少,先從原理來簡單分析下我們要做什麼。

最重要的是計算繪製路線的點的集合,這裡我們需要確定波開始的位置,和波峰波谷高度,還有就是波長

下面隱藏波長只是為了,移動的時候看起來是連續的。

注意:

乙個連續的波需要四個點來完成。最後乙個波說五個點,然後因為需要移動所以我們多加了乙個波。所以公式是 4*n+5,這裡的n是波峰,乙個完整的波由乙個波峰和乙個波谷組成。

override fun onmeasure

(widthmeasurespec: int, heightmeasurespec: int)

pointlist.

add(

point

(x, y))}

}}

拿到運動的點的集合後就是繪製,這裡需要呼叫quadto方法傳入兩個點。然後是讓繪製好曲線平移就可以看到波浪的效果了(很多動畫效果都是通過改變view的座標完成,特別是頁面動畫效果很多的時候)。

這裡是繪製乙個path,主要是頂部是乙個波浪的形狀。

注意:

override fun ondraw

(canvas: canvas?

) mripplepath.

lineto

(pointlist.

get(pointlist.size -1)

.getx()

, viewheight.

tofloat()

) mripplepath.

lineto

(mlefthide, viewheight.

tofloat()

) mripplepath.

close()

canvas!!.

drawpath

(mripplepath, mpaint)

mhandler.

sendemptymessagedelayed(1

,10)}

總的來說就是上面兩個步驟。

其實沒什麼內容,因為很簡單。

github傳送門

android內容有點多,總之還是學點是點吧。各位加油

貝塞爾曲線

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

貝塞爾曲線

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

貝塞爾曲線

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