自定義View(七)Path 貝塞爾曲線

簡單點說,貝塞爾曲線在Android上就是用來畫曲線的。
貝塞爾曲線是按階分的,曲線有數(shù)據(jù)點和控制點兩個重要參數(shù)繪制出來的,數(shù)據(jù)點是曲線的兩端,控制點是控制曲線的彎曲程度。n階曲線有n-1個控制點,所以一階曲線是沒有控制點的,是一條直線。
Path中關(guān)于貝塞爾曲線的方法只有二階曲線(quadTo)和三階曲線(cubicTo)。再復(fù)雜的曲線可以使用二階曲線或者三階曲線復(fù)合而成,也可以自己動手套公式畫出來。

二階貝塞爾曲線

上圖中B點是控制點,A和C是數(shù)據(jù)點
三階貝塞爾曲線

上圖中B和C點是控制點,A和D是數(shù)據(jù)點
這里還提供了一個練習(xí)貝塞爾曲線的網(wǎng)站The Bézier Game
廢話不多說,直接講path中提供的兩個方法:

quadTo() 二階貝塞爾曲線

        Path path = new Path();

        path.moveTo(start.x,start.y);
        path.quadTo(control.x,control.y,end.x,end.y);

        canvas.drawPath(path, mPaint);

上邊例子中control.x和control.y是二階貝塞爾曲線的控制點的坐標(biāo);end.x和end.y是曲線的重點的坐標(biāo)點。起點是moveTo中的參數(shù)。


二階貝塞爾舉例

cublicTo()三階貝塞爾曲線

        Path path = new Path();

        path.moveTo(start.x, start.y);
        path.cubicTo(control1.x, control1.y, control2.x,control2.y, end.x, end.y);

        canvas.drawPath(path, mPaint);

和二階不同,三階貝塞爾曲線有兩個控制點,就是cublicTo方法中的contro1和control2這兩個點。


三階貝塞爾曲線舉例

我們平常見到的app中的小圓點的拖拽,天氣預(yù)報中的曲線圖的變化,都是時時根據(jù)計算不斷地改變數(shù)據(jù)點和控制點得到的。數(shù)據(jù)點和控制點改變,就會改變曲線的形態(tài)。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容