貝塞爾曲線: 貝塞爾曲線於 1962,由法國工程師皮埃爾·貝塞爾所廣泛發表,他運用貝塞爾曲線來為汽車的主體進行設計。貝塞爾曲線最初由 Paul de Casteljau 於 1959 年運用 de Casteljau 演演算法開發,以穩定數值的方法求出貝茲曲線。貝塞爾曲線主要用於二維圖形應用程式中的數 ...
貝塞爾曲線:
貝塞爾曲線於 1962,由法國工程師皮埃爾·貝塞爾所廣泛發表,他運用貝塞爾曲線來為汽車的主體進行設計。貝塞爾曲線最初由 Paul de Casteljau 於 1959 年運用 de Casteljau 演演算法開發,以穩定數值的方法求出貝茲曲線。貝塞爾曲線主要用於二維圖形應用程式中的數學曲線,曲線由起始點,終止點(也稱錨點)和控制點組成,通過調整控制點,貝塞爾曲線的形狀會發生變化。
在此舉一個例子,實現貝賽爾曲線,基於以下場景:
上面的圖片,我們可以見到一個白色的區域,邊緣為弧形,這條弧線便是我們用貝塞爾曲線畫出來的,然後我們要實現隨著手指的上滑,弧線慢慢變直線,往下滑再慢慢變弧線。
1、首先我們自定義一個View,然後畫出貝塞爾曲線,想畫出貝塞爾曲線,要設置它的起點,終點,和控制點。
以下紅色區域分別為我們設置的起點,控制點,終點。
初始化畫筆以及各點如下:
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);
//起點
start = new PointF(0, 0);
//終點
end = new PointF(0, 0);
//控制點
control = new PointF(0, 0);
2、給控制點賦值:
@Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); centerX = w / 2; centerY = h / 2; // 初始化數據點和各點的位置 start.x = 0; start.y = 0; end.x = w; end.y = 0; control.x = centerX; control.y = centerY; }
控制點為中點。
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.
那麼,我們怎麼去讓該曲線變動呢,慢慢變直線,慢慢變弧線,下方一直是填充滿白色。其實很簡單,只要我們手指在移動的時候去獲取移動的距離,然後控制貝塞爾曲線的控制點變化就可以了。
即:
control.y = centerY + 手指移動的距離;
invalidate(),
記得通知曲線重繪。