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

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

二階貝塞爾曲線

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

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

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是二階貝塞爾曲線的控制點(diǎn)的坐標(biāo);end.x和end.y是曲線的重點(diǎn)的坐標(biāo)點(diǎn)。起點(diǎn)是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);

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


三階貝塞爾曲線舉例

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

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

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

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