啥是佩奇？打造Android界佩奇

一、前言

前段時間被“啥是佩奇”短片感動了一把，在網絡上也掀起了一陣熱潮，老爺子用自己的焊鐵技術爲孩子打造了別樣的佩奇，今天用我那淺薄的知識打造Android佩奇。

二、思路:

1、將佩奇分爲鼻子，眼睛，嘴巴等相應的部位；
2、根據各個部位判斷使用貝塞爾曲線還是運用canvas直接繪製圖形。因爲後面需要實現繪製的動態效果，則這裏繪製圖形時使用path繪製。
3、使用貝塞爾曲線繪製佩奇整個身體，耳朵和嘴巴，確定曲線的開始點和控制點；
4、使用PathMeasure的getLength,getSegment等方法實現每個部位的動態繪製。

三、知識點PathMeasure

PathMeasure（Path path，boolean forceClosed）：表示創建與指定路徑對象（已創建和指定）關聯的PathMeasure對象。

參數
path：已繪製路徑；
forceClosed：如果爲true，表示路徑爲閉合狀態，即使路徑未明確關閉，路徑也將被視爲“已關閉”。
方法
getLength（）：獲取path的總長度，如果沒有路徑就返回0；
getSegment（float startD， float stopD，Path dst，boolean startWithMoveTo）：傳入起始位置startD和結束位置stopD，在dst中返回startD和stopD中間的路徑。如果startWithMoveTo爲true，則使用moveTo開始片段。
setPath（Path path， boolean forceClosed）：將path與PathMeasure 進行關聯。

上述爲本文所使用的方法，PathMeasure其他詳細方法可參照官方文檔PathMeasure。

四、實現

1、初始化畫筆，佩奇出了眼睛和眼珠的顏色不同外，其他部位都用粉紅色畫筆繪製，這裏定義了三種畫筆；

 private void initPaint() {
        mPaint = new Paint();
        mPaint.setColor(Color.parseColor("#FF69B4"));
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(6);
        mPaint.setAntiAlias(true);

        mEyePaint = new Paint();
        mEyePaint.setColor(Color.parseColor("#F0F8FF"));
        mEyePaint.setAntiAlias(true);

        mEyeBallPaint = new Paint();
        mEyeBallPaint.setColor(Color.BLACK);
        mEyeBallPaint.setAntiAlias(true);
    }

2、繪製佩奇外殼，佩奇身體呈弧形狀，則需要運用到二階和三階貝塞爾曲線，利用貝塞爾曲線的數學公式大致確定出繪製起始位置，控制點和結束點。

private void drawShell(Canvas canvas) {
        Path shellPath = new Path();
        shellPath.moveTo(200, 100 - mRadius);
//三階貝塞爾曲線，設置兩個控制點。
        shellPath.cubicTo(800, 100 - mRadius, 1000, 600, 600, 700);
        shellPath.cubicTo(300, 700, 300, 280, 350, 250);
//兩階貝塞爾曲線，設置一個控制點。
        shellPath.quadTo(200, 210, 200, 100 + mRadius);

        drawAll(canvas,shellPath);

    }

3、依據各個位置點繪製出曲線後，PathMeasure和曲線路徑進行關聯，依據PathMeasure的getSegment方法，隨着停止位置的不斷增加，獲取到的路徑片段也在不停的增長，也就實現了路徑繪製的動態效果。

 private void drawAll(Canvas canvas, Path path) {
        Path dst = new Path();
//創建新的帶有已繪製好的路徑的PathMeasure
        mPathMeasure = new PathMeasure(path, false);
//獲取路徑的總長度
        mLength = mPathMeasure.getLength();
//獲取起始位置到停止位置中的片段
        mPathMeasure.getSegment(0, mStop, dst, true);
//開始繪製
        canvas.drawPath(dst, mPaint);
//停止位置不斷增加，路徑就會不斷繪製
        if (mStop < mLength) {
            mStop += mLength / 400;
            invalidate();
        }
    }

4、使用相同的手法先繪製出耳朵，鼻子和嘴巴的路徑，然後按照上述PathMeasure的過程依次獲取片段實現，詳細代碼見六。

五、總結

小豬佩奇的繪製需要耐心，其中身體部分涉及到貝塞爾曲線，需要數學來計算，後期需要加強對公式的瞭解，PathMeasure的方法有很多，在實現繪製路徑的動態效果上層出不窮，例如繪製無規則形狀的進度條，隨手勢滑動繪製出隨意的線條等等。後續加強對PathMeasure其他方法的使用。

六、項目地址

項目地址：https://github.com/fuusy/PigDraw

---

歡迎關注我的公衆號：小猿說，大家一起交流學習！感謝！