Path從懵逼到精通（2）——貝塞爾曲線

上一篇咱們說了 Path 的基本操做，這一篇讓咱們來講一下 Path 的進階用法——貝塞爾曲線。

那什麼是貝塞爾曲線？貝塞爾曲線能在 Android 中實現什麼效果？以及如何作到的？這篇文章都會告訴你。

什麼是貝塞爾曲線？

貝塞爾曲線是由皮埃爾·貝塞爾發表的，他主要應用於汽車的主體進行設計，後來成爲計算機圖形學至關重要的參數曲線。

貝塞爾曲線由什麼組成的？它一般由數據點和控制點兩個部分組成的。那什麼是數據點和控制點呢？請看下錶：

類型	做用
數據點	曲線的起點和終點
控制點	控制曲線的彎曲程度

這樣聽起來可能還有點抽象，咱們直接上圖來看看。

一階貝塞爾曲線：

一階貝塞爾曲線其實就是一條直線，沒有控制點，只有數據點 P0，P1，以下圖：

Android提供方法：lineTo()

二階貝塞爾曲線：

二階貝塞爾曲線有一個控制點 P1 和兩個數據點 P0，P2。以下圖：

Android 提供方法：quadTo()

三階貝塞爾曲線：

三階貝塞爾曲線有兩個控制點 P1，P2 和兩個數據點 P0，P3。以下圖：

Android 提供方法：cubicTo()

更高階的曲線 Android 並無提供 API ，因此在這隻會介紹二階和三階曲線，若是對更高階的曲線有興趣的話，能夠去貝塞爾曲線———維基百科和貝塞爾曲線動態演示這兩個網站多瞭解一下。

貝塞爾曲線是怎麼造成的

那麼這條曲線到底是怎麼造成的呢？先從二階曲線分析一下：

二階貝塞爾曲線造成原理：

1.鏈接 A，B 造成 AB 線段，鏈接 B，C 造成 BC 線段。

2.在 AB 線段取一個點 D，BC 線段取一個點 E ，使其知足條件： AD/AB = BE/BC，鏈接 D，E 造成線段 DE。

3.在 DE 取一個點 F，使其知足條件：AD/AB = BE/BC = DF/DE。

4.而知足這些條件的全部的F點所造成的軌跡就是二階貝塞爾曲線，動態過程以下：

三階貝塞爾曲線造成原理：

1.鏈接 A，B 造成 AB 線段，鏈接 B，C 造成 BC 線段，鏈接 C，D 造成 CD 線段。

2.在AB線段取一個點 E，BC 線段取一個點 F，CD 線段取一個點 G，使其知足條件： AE/AB = BF/BE = CG/CD。鏈接 E，F 造成線段 EF，鏈接 F，G 造成線段 FG。

3.在EF線段取一個點 H，FG 線段取一個點 I，使其知足條件： AE/AB = BF/BE = CG/CD = EH/EF = FI/FG。鏈接 H，I 造成線段 HI。

4.在 HI 線段取一個點 J，使其知足條件： AE/AB = BF/BE = CG/CD = EH/EF = FI/FG = HJ/HI。

5.而知足這些條件的全部的J點所造成的軌跡就是三階貝塞爾曲線，動態過程以下：

在 Android 中使用貝塞爾曲線

說了這麼多原理，是時候要知道要怎麼運用貝塞爾曲線了。這裏我會用兩個例子來講明二階和三階貝塞爾曲線的運用：

二階曲貝塞爾曲線的應用：

方法預覽：

public void quadTo (float x1, float y1, float x2, float y2)
複製代碼

有什麼用：

畫出二階貝塞爾曲線

怎麼用：

由於二階貝塞爾曲線須要三個點才能肯定，因此quadTo方法中的四個參數分別是肯定第二，第三的點的。第一個點就是path上次操做的點。 如今用一個實例來練習下這個方法：

水波紋效果：

效果圖：

實現思路：

1. 畫出至少兩段的波紋
2. 使用 ValueAnimator 不斷獲取平移的值 offset
3. 利用 offset 不斷的改變波紋的位置

如今分步驟來講明：

1. 畫出至少兩段波紋

咱們首先要畫出兩段波紋。一段波紋就包含兩條曲線。每條曲線咱們可使用 quadTo() 方法來畫。

爲了更容易理解，請看下圖：

mWL 是一段波紋的長度，mCenterY 是屏幕高度的一半。

• 畫第一段波紋的第一條曲線：

mPath.moveTo(-mWL, mCenterY); //將path操做的起點移動到(-mWL,mCenterY)
mPath.quadTo((-mWL * 3 / 4) , mCenterY + 60, (-mWL / 2), mCenterY); //畫出第一段波紋的第一條曲線
複製代碼

• 畫出第一段波紋的第二條曲線：

mPath.quadTo((-mWL / 4) , mCenterY - 60, 0, mCenterY); //畫出第一段波紋的第二條曲線
複製代碼

• 畫出第二段波紋的第一條曲線：

mPath.quadTo((mWL /4) , mCenterY + 60, (mWL / 2), mCenterY); //畫出第二段波紋的第一條曲線
複製代碼

• 畫出第二段波紋的第二條曲線：

mPath.quadTo((mWL * 3/ 4) , mCenterY - 60, mWL, mCenterY);  //畫出第二段波紋的第二條曲線
複製代碼

2. 使用 ValueAnimator 不斷獲取平移的值 offset

那麼如今來想一下應該怎麼讓這幾段波紋動起來呢？咱們須要一個 offset 的平移值。這個值應該加在每一個點的x座標上，而且 offset 是不斷變化的，這樣纔會造成一個向右平移的效果。那怎麼才能獲取到這個變化的offset的值呢？答案就是要使用 ValueAnimator 。用法以下：

ValueAnimator animator = ValueAnimator.ofInt(0, mWL); //mWL是一段波紋的長度
   animator.setDuration(1000);
   animator.setRepeatCount(ValueAnimator.INFINITE);
   animator.setInterpolator(new LinearInterpolator());
   animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                offset = (Integer) animation.getAnimatedValue(); //offset 的值的範圍在[0,mWL]之間。
                postInvalidate();
            }
        });
   animator.start();
    }
複製代碼

這樣只要動畫開始，offset 就會不斷從 0~mWL 變化。

3. 利用offset不斷的改變波紋的位置

如今爲曲線的全部 X 座標都加上 offset 值。這樣就會產平生移的效果，爲了簡化代碼，這裏使用的 for 循環來畫曲線。

mPath.moveTo(-mWL + mOffset, mCenterY);
    for (int i = 0; i < 2; i++) {
        mPath.quadTo((-mWL * 3 / 4) + (i * mWL) + offset, mCenterY + 60, (-mWL / 2) + (i * mWL) + offset, mCenterY);
        mPath.quadTo((-mWL / 4) + (i * mWL) + offset, mCenterY - 60, i * mWL + offset, mCenterY);
      }
複製代碼

接下來爲了適配各類屏幕，須要根據手機的寬度來計算出所須要的波紋的數目：

mWaveCount = (int) Math.round(mScreenWidth / mWL + 1.5); //這樣就保證波紋能覆蓋整個屏幕
複製代碼

上面的 for 循環也能夠改成：

mPath.moveTo(-mWL + mOffset, mCenterY);
    for (int i = 0; i < mWaveCount; i++) {
        mPath.quadTo((-mWL * 3 / 4) + (i * mWL) + offset, mCenterY + 60, (-mWL / 2) + (i * mWL) + offset, mCenterY);
        mPath.quadTo((-mWL / 4) + (i * mWL) + offset, mCenterY - 60, i * mWL + offset, mCenterY);
      }
複製代碼

三階貝塞爾曲線的應用：

彈性的圓：

效果圖：

實現思路：

1. 用貝塞爾曲線畫出正圓
2. 經過修改座標的大小來造成圓收縮的效果

1. 用貝塞爾曲線畫出正圓

咱們首先要知道怎麼使用 cubicTo() 方法來畫個半徑爲 r 的正圓。其實使用 cubicTo() 來畫正圓就須要 4 條三階貝塞爾曲線組合而成。如圖所示：

若是要畫 P0P3 那道曲線應該怎麼畫呢？咱們就要知道 P0，P1，P2，P3 這四個點的座標。P0，P3 的座標咱們已經知道了，分別是 (0,-r),(r,0)。那麼 P1 和 P2 的座標是什麼呢？其實這裏有個論證的過程，這個過程在這篇文章就有：Approximate a circle with cubic Bézier curves，感興趣的能夠看看。這裏只說結果，最後獲得一個數，這個數就是 c = 0.551915024494。也就是說 P1，P2 的座標就是 (cr,-r)，(r,-cr)。其餘點的座標也是用一樣的方法得出的，這裏就不細說了。

爲了更方便管理這幾個點，我將這幾個點封裝分紅兩個類。分別是 HorizontalLine 和 VerticalLine 。圓的上下兩條線屬於 HorizontalLine，圓的左右兩條線屬於 VerticalLine。

如下是這兩個類的代碼：

private float c = 0.551915024494f;

class HorizontalLine {
        public PointF left = new PointF(); //P7 P11
        public PointF middle = new PointF(); //P0 P6
        public PointF right = new PointF(); //P1 P5

        public HorizontalLine(float x,float y) {
            left.x = -radius*c;
            left.y = y;
            middle.x = x;
            middle.y = y;
            right.x = radius*c;
            right.y = y;
        }

        public void setY(float y) {
            left.y = y;
            middle.y = y;
            right.y = y;
        }

    }

    class VerticalLine {
        public PointF top = new PointF(); //P2 P10
        public PointF middle = new PointF(); //P3 P9
        public PointF bottom = new PointF(); //P4 P8


        public VerticalLine(float x,float y) {
            top.x = x;
            top.y = -radius*c;
            middle.x = x;
            middle.y = y;
            bottom.x = x;
            bottom.y = radius*c;
        }


        public void setX(float x) {
            top.x = x;
            middle.x = x;
            bottom.x = x;
        }
    }
複製代碼

如下是用cubicTo()方法畫圓的代碼：

private Paint mPaint;

    private Path mPath;

    private int mScreenHeight;//屏幕高度

    private int mScreenWidth;//屏幕寬度

    private float radius = 100;

    private void initPaint() {
        mPath = new Path();
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.parseColor("#59c3e2"));
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    }

    private void initPoint() {
        mTopLine = new HorizontalLine(0,-radius);
        mBottomLine = new HorizontalLine(0,radius);
        mLeftLine = new VerticalLine(-radius,0);
        mRightLine = new VerticalLine(radius,0);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPath.reset();
        
        //將畫布移動到屏幕正中間
        canvas.translate(mScreenWidth / 2, mScreenHeight / 2); 

        mPath.moveTo(mTopLine.middle.x,mTopLine.middle.y);
        mPath.cubicTo(mTopLine.right.x,mTopLine.right.y,mRightLine.top.x,mRightLine.top.y,
                mRightLine.middle.x,mRightLine.middle.y);
        mPath.cubicTo(mRightLine.bottom.x,mRightLine.bottom.y,mBottomLine.right.x,mBottomLine.right.y,
                mBottomLine.middle.x,mBottomLine.middle.y);
        mPath.cubicTo(mBottomLine.left.x,mBottomLine.left.y,mLeftLine.bottom.x,mLeftLine.bottom.y,
                mLeftLine.middle.x,mLeftLine.middle.y);
        mPath.cubicTo(mLeftLine.top.x,mLeftLine.top.y,mTopLine.left.x,mTopLine.left.y,
                mTopLine.middle.x,mTopLine.middle.y);
        canvas.drawPath(mPath,mPaint);
    }

複製代碼

效果以下：

2.經過修改座標的大小來造成圓收縮的效果

想要達到圓收縮的效果只要增長和減小某些座標就能夠了。好比我要達成如圖的這種效果，應該怎麼作呢？

只要增長 P2，P3，P4 的橫座標，就能夠達到這種效果。

如今試試把圓收縮起來：

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPath.reset();

        //將畫布移動到手機屏幕的正中間
        canvas.translate(mScreenWidth / 2, mScreenHeight / 2); 


        //將右邊的線的點的橫座標都增大
        mRightLine.setX(radius * 1.5f); 
        
        mPath.moveTo(mTopLine.middle.x,mTopLine.middle.y);
        mPath.cubicTo(mTopLine.right.x,mTopLine.right.y,mRightLine.top.x,mRightLine.top.y,
                mRightLine.middle.x,mRightLine.middle.y);
        mPath.cubicTo(mRightLine.bottom.x,mRightLine.bottom.y,mBottomLine.right.x,mBottomLine.right.y,
                mBottomLine.middle.x,mBottomLine.middle.y);
        mPath.cubicTo(mBottomLine.left.x,mBottomLine.left.y,mLeftLine.bottom.x,mLeftLine.bottom.y,
                mLeftLine.middle.x,mLeftLine.middle.y);
        mPath.cubicTo(mLeftLine.top.x,mLeftLine.top.y,mTopLine.left.x,mTopLine.left.y,
                mTopLine.middle.x,mTopLine.middle.y);
        canvas.drawPath(mPath,mPaint);
    }
複製代碼

效果以下：

以此類推，若是要達到剛剛那個動圖的效果，就要減小上下兩條線的點的縱座標，而後不斷平移畫布就能夠了。具體代碼能夠下載源碼來看。

源碼下載：

• BezierDemo

參考資料：

• Path之貝塞爾曲線
• 四步實現ChromeLikeSwipeLayout效果
• 三次貝塞爾曲線練習之彈性的圓
• 貝塞爾曲線掃盲
• Android自定義View——貝塞爾曲線實現水波紋效果