前言：該系列文章爲記錄學習扔物線(總是叫成拋物線。大佬別怪我)自定義View系列文章的學習筆記，兩個目的：一是總結自己在學習過程中遇到的疑難點；二是希望能讓自己通過寫博客的方式持之以恆的學下去。
感謝扔物線大佬提供了這麼優質的項目供我們學習！
二話不說，我也反手就是一個扔物線大佬的自定義View項目傳送門：HenCoder，給高級Android工程師的進階手冊
首先了解三個東西：
- Canvas
Canvas翻譯過來爲畫布，從字面就可以看出來它的意思就是我們所有需要繪製的東西都是在Canvas上的，這個也是自定義繪製的關鍵，它有兩類方法：
繪製類
drawXXX()方法，畫線、畫圓、畫點、畫路線等等，繪製各種圖形的方法應有盡有，需要配合Paint(下面介紹)使用。
輔助類
範圍的裁切：舉個例子：
這是我使用CSDN點擊修改頭像時的截圖，底部是我選擇的完整圖片，白色虛線就是裁切的範圍，點擊提交後只會保存這個範圍內的部分。相當於拿一把剪刀將不需要的部分剪掉。當然，裁切的大小、樣式(正方形、圓形、五角星)都可以通過canvas完成。
幾何變換：在生活中的繪畫，畫完後的畫布我們可以將其任意翻折、旋轉，在canvas中我們能做的遠比我們想象的多。 - Paint
我又要實力翻譯一波：畫筆，有了畫布，還需要一隻筆來進行作畫，paint就是這個作用，它可以控制我們將要繪製的顏色、粗細、實心空心等等，能做的也非常多，後面慢慢記錄。 - onDraw()方法
前面的canvas和paint需要在View的onDraw()方法中使用，我們可以在這個方法中控制先畫哪個再畫哪個，把我們要畫的東西覆蓋在View上方還是作爲View的背景？這就是onDraw()。
預備知識：座標系
首先講一下座標系(這裏的座標系是相對於自定義View的)，每一個View都有自己的座標系，原點是View自身的左上角，x軸和我們中學學的一樣，水平方向左負右正，y軸的正負方向與中學的數學座標系不一樣，豎直方向，上負下正：
Canvas的繪製方法
- drawColor(@ColorInt int color)
把整個畫布填充上指定顏色。
// 繪製黑色
canvas.drawColor(Color.BLACK);
// 繪製藍色
canvas.drawColor(Color.BLUE);
- drawCircle(float centerX, float centerY, float radius, Paint paint)：繪製圓形
centerX、centerY爲圓的圓心所在的座標，radius爲圓的半徑
canvas.drawCircle(300,300,250,paint)
另外在Hencoder中這裏把Paint的某些設置也提及了，我就把Paint先放一放，後面的筆記再回顧並且集中記錄。
- drawRect(float left, float top, float right, float bottom, Paint paint)：繪製矩形
left, top, right, bottom 是矩形四條邊的座標。
canvas.drawRect(100, 100, 500, 500, paint);
- drawPoint(float x, float y, Paint paint)：繪製點
x、y同樣是點的座標，但是點的大小和形狀就要通過paint來實現了。點的大小通過paint.setStrokeWidth(width)設置，點的形狀通過paint.setStrokeCap(cap) 設置：Paint.Cap.ROUND是圓點，Paint.Cap.SQUARE或者Paint.Cap.BUTT是方形的點。
paint.setStrokeWidth(50); // 50px大小的點
paint.setStrokeCap(Paint.Cap.ROUND); // 圓形
canvas.drawPoint(100, 100, paint); // 繪製在(100,100)座標上
paint.setStrokeWidth(100); // 100px大小的點
paint.setStrokeCap(Paint.Cap.SQUARE); // 方形
canvas.drawPoint(300, 100, paint); // 繪製在(300,100)座標上
這裏的繪製圓點、方點，既可以通過drawPoint實現，也可以通過drawCircle和drawRect實現。
- drawPoints(float[] pts, int offset, int count, Paint paint) / drawPoints(float[] pts, Paint paint)：批量繪製點
這個方法可以繪製多個點。pts是點的座標數組，每兩個確定一個點；offset是跳過數組中的前幾個數再開始繪製；count表示一共繪製多少個，就是在數組中取count*2個值。
float[] points = {0, 0, 50, 50, 50, 100, 100, 50, 100, 100, 150, 50, 150, 100};
/* 跳過兩個數，即前兩個 0 */
/* 一共繪製 8 個數（4 個點）:(50, 50) (50, 100) (100, 50) (100, 100)，後面的150, 50, 150, 100都不要了*/
canvas.drawPoints(points, 2 , 8 , paint);
- drawOval(float left, float top, float right, float bottom, Paint paint)：繪製橢圓
繪製橫着的或者豎直的橢圓，斜的需要配合canvas的幾何變換實現。left、top、right、bottom 是這個橢圓的左、上、右、下四個邊界點的座標，參考drawRect。
// 橫着的橢圓
canvas.drawOval(100, 250, 600, 450, paint);
// 豎直的橢圓
canvas.drawOval(700, 100, 900, 600, paint);
繪製橢圓還有一個重載的方法：drawOval(RectF rect, Paint paint)，其中RectF是一個實現了Parcelable接口的類，它只有四個屬性left、top、right、bottom，所以單從cavans的繪製來說用法也很簡單，但是它內部還有很多方法，比如：width()、height()、centerX()、centerY()等等，從方法名就可以很容易的看出來所代表的意義。
我們也可以通過繪製橢圓來達到繪製圓形drawCircle的效果，只要將四個參數的距離計算好即可。
// 利用繪製橢圓繪製圓形，達到與drawCircle同樣的效果
canvas.drawOval(100, 200, 300, 400, paint);
- drawLine(float startX, float startY, float stopX, float stopY, Paint paint)：繪製線
startX, startY, stopX, stopY 分別是線的起點和終點座標，這個很簡單。
paint.setStrokeWidth(10);//設置線的寬度爲10px
canvas.drawLine(100, 100, 800, 800, paint);
-
drawLines(float[] pts, int offset, int count, Paint paint) / drawLines(float[] pts, Paint paint)：批量繪製線
與drawPoint和drawPoints同理。 -
drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint)：繪製圓角矩形
left, top, right, bottom 是四條邊的座標，rx 和 ry 是圓角的橫向半徑和縱向半徑，這兩個參數如何理解，用代碼畫出來就明瞭了。
canvas.drawRoundRect(100, 200, 500, 450, 100, 50, paint);
canvas.drawRoundRect(600, 200, 1000, 450, 50, 100, paint);
- drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, Paint paint)：繪製弧形或扇形
這個方法我們可以這麼理解，首先用left、top、right、bottom繪製一個橢圓；startAngle爲這個弧形的起始角度（x軸正方向爲0°，順時針+，逆時針-）；sweepAngle爲弧形劃過的角度，也就是弧形的角度；useCenter爲這個弧形是否連接圓心，false爲弧形，true爲扇形。
還是用代碼和圖理解的比較快：
首先我們理解startAngle和sweepAngle的含義：
// 這是一個扇形
canvas.drawArc(200, 100, 800, 500, -110, 100, true, mPaint);
所以上面的代碼就是把上圖右邊藍色區域截取出來一個扇形。
/* 注意這裏的橢圓大小是一致的，區別是startAngle和sweepAngle不同，還有是否連接圓心 */
canvas.drawArc(200, 100, 800, 500, -110, 100, true, mPaint); // 繪製扇形
canvas.drawArc(200, 100, 800, 500, 20, 140, false/*這裏不連接圓心*/, mPaint); // 繪製弧形
/* 注意這裏的第二行代碼與上圖的代碼只有是否連接圓心區別 */
canvas.drawArc(200, 100, 800, 500, -110, 100, true, mPaint); // 繪製扇形
canvas.drawArc(200, 100, 800, 500, 20, 140, true/*這裏連接圓心*/, mPaint); // 繪製弧形
看到這裏請各位原諒我的畫圖，真的。。。