快捷導(dǎo)航

Android貝塞爾曲線實(shí)現(xiàn)填充不規(guī)則圖形并隨手指運(yùn)動(dòng)

更新時(shí)間：2018年09月18日 09:54:59 作者：妖久

這篇文章主要為大家詳細(xì)介紹了Android貝塞爾曲線實(shí)現(xiàn)填充不規(guī)則圖形，并隨手指運(yùn)動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

貝塞爾曲線：

貝塞爾曲線于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)，貝塞爾曲線的形狀會(huì)發(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。

那么，我們怎么去讓該曲線變動(dòng)呢，慢慢變直線，慢慢變弧線，下方一直是填充滿白色。其實(shí)很簡單，只要我們手指在移動(dòng)的時(shí)候去獲取移動(dòng)的距離，然后控制貝塞爾曲線的控制點(diǎn)變化就可以了。

即：

control.y = centerY + 手指移動(dòng)的距離;

invalidate(),

記得通知曲線重繪。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: