啥是佩奇？打造Android界佩奇
一、前言
前段時間被“啥是佩奇”短片感動了一把，在網路上也掀起了一陣熱潮，老爺子用自己的焊鐵技術為孩子打造了別樣的佩奇，今天用我那淺薄的知識打造Android佩奇。
pig奇
二、思路:
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
歡迎關注我的公眾號：小猿說，大家一起交流學習！感謝！
公眾號