貝塞爾曲線:
貝塞爾曲線于1962,由法國工程師皮埃爾?貝塞爾所廣泛發(fā)表,他運(yùn)用貝塞爾曲線來為汽車的主體進(jìn)行設(shè)計(jì)。貝塞爾曲線最初由 Paul de Casteljau 于 1959 年運(yùn)用 de Casteljau 演算法開發(fā),以穩(wěn)定數(shù)值的方法求出貝茲曲線。貝塞爾曲線主要用于二維圖形應(yīng)用程序中的數(shù)學(xué)曲線,曲線由起始點(diǎn),終止點(diǎn)(也稱錨點(diǎn))和控制點(diǎn)組成,通過調(diào)整控制點(diǎn),貝塞爾曲線的形狀會發(fā)生變化。
在此舉一個(gè)例子,實(shí)現(xiàn)貝塞爾曲線,基于以下場景:

上面的圖片,我們可以見到一個(gè)白色的區(qū)域,邊緣為弧形,這條弧線便是我們用貝塞爾曲線畫出來的,然后我們要實(shí)現(xiàn)隨著手指的上滑,弧線慢慢變直線,往下滑再慢慢變弧線。
1、首先我們自定義一個(gè)View,然后畫出貝塞爾曲線,想畫出貝塞爾曲線,要設(shè)置它的起點(diǎn),終點(diǎn),和控制點(diǎn)。
以下紅色區(qū)域分別為我們設(shè)置的起點(diǎn),控制點(diǎn),終點(diǎn)。

初始化畫筆以及各點(diǎn)如下:
private Paint mPaint;private int centerX, centerY;private PointF start, end, control;mPaint = new Paint();mPaint.setColor(Color.WHITE);mPaint.setStyle(Paint.Style.FILL);mPaint.setAntiAlias(true);//起點(diǎn)start = new PointF(0, 0);//終點(diǎn)end = new PointF(0, 0);//控制點(diǎn)control = new PointF(0, 0);
2、給控制點(diǎn)賦值:
@Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); centerX = w / 2; centerY = h / 2; // 初始化數(shù)據(jù)點(diǎn)和各點(diǎn)的位置 start.x = 0; start.y = 0; end.x = w; end.y = 0; control.x = centerX; control.y = centerY; }控制點(diǎn)為中點(diǎn)。
3、把貝塞爾曲線下方的圖形填充為白色:
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); Path path = new Path(); path.moveTo(start.x, start.y); path.quadTo(control.x, control.y, end.x, end.y); //上面這兩句就畫出了貝塞爾曲線了 path.lineTo(end.x, 40); path.lineTo(0, 40); path.close(); //填充圖形 canvas.drawPath(path, mPaint); }上面便把貝塞爾曲線下方的填充為白色了,高度40。
那么,我們怎么去讓該曲線變動呢,慢慢變直線,慢慢變弧線,下方一直是填充滿白色。其實(shí)很簡單,只要我們手指在移動的時(shí)候去獲取移動的距離,然后控制貝塞爾曲線的控制點(diǎn)變化就可以了。
即:
control.y = centerY + 手指移動的距離;
invalidate(),
記得通知曲線重繪。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選