【朝花夕拾】Android自定義View篇之（二）Canvas常用技巧
前言
上一篇講View的繪製流程中講到過，最後一步是draw流程，在這個過程中，子view需要重寫onDraw方法來畫出自己的內容。在自定義View繪製自身內容的時候，系統提供了3個非常重要的類來幫助開發者畫各種炫酷的圖形：Canvas、Paint、Path。本篇主要介紹Canvas相關的內容，Paint和Path在後面會單獨再做介紹。官方文件中介紹的Canvas相關的API很多，本文主要介紹和梳理一些比較常用的實用功能。
本文的主要內容如下：
一、一切的開始——onDraw
如下程式碼展示了一個自定義view畫圖形的一個非常簡單的示例。這裡onDraw方法的引數Canvas就是本篇的主角了，中文意思“畫布”，意思就是所有“畫”的內容都是在這張畫布上完成的。
1 Paint paint = new Paint();
2 @Override
3 protected void onDraw(Canvas canvas) {
4 super.onDraw(canvas);
5 // 繪製一個原點座標（300,300），半徑為200的圓
6 canvas.drawCircle(300, 300, 200, paint);
7 }程式碼非常簡單，可見自定義繪製上手非常容易。
二、Canvas基本的draw功能
Canvas包含了一些畫基本圖案的函式，基本都是以drawXXX的形式給出的。
1、座標系
這裡先簡單介紹一下畫圖中所參照的座標系，是以當前View位置的左上角為原點（0,0），水平方向向右為X軸正方向，豎直向下為Y軸正方向，這裡的View位置是個相對值，它取決於開發者把它放在哪裡。座標系大致如下所示，注意和平時我們數學上座標系略有差別。
2、Paint
在Canvas的這些drawXXX方法中會用到paint類，它是畫筆，會決定繪製出來的圖形的顏色，是填充整個圖形還是僅繪製邊框線條等多個屬性。這些會在以後專門介紹Paint的時候再講，這裡先提醒讀者注意，在筆者擷取的效果圖中，咱們這裡先只關注形狀，關於piant，一律先用預設的填充。
3、drawColor()顏色填充
（1）函式原型：drawColor(@color int color)。
（2）作用：將整個繪製區域填充為指定顏色（可以設定透明度）。
（3）示例：一般有三種方式來引用顏色值
1 //使用系統提供的顏色
2 canvas.drawColor(Color.BLACK);
3 //使用自定義顏色
4 canvas.drawColor(Color.parseColor("#000000"));
5 //使用color.xml中定義的顏色值
6 canvas.drawColor(getResources().getColor(R.color.black));
（4）效果：
（5）其它設定顏色的方法
1）drawRGB(int r, int g, int b)：根據RGB值來設定顏色
2）drawARGB(int a, int r, int g, int b)：根據透明度和RGB的值來設定顏色。
上述中的幾種方法，適用於在繪製前設定底色，或者在繪製完成後新增一層半透明蒙板。
4、drawCircle畫圓
（1）函式原型drawCircle(float centerX, float centerY, float radius, Paint paint)。引數依次為：X座標，Y座標，半徑，畫筆。
（2）作用：以原點（centerX，centerY），半徑radius，畫一個圓。
（3）示例：
1 // 繪製一個原點座標（300,300），半徑為200的圓 2 canvas.drawCircle(300, 300, 200, paint);
（4）效果
5、drawRect畫矩形
（1）函式原型：drawRect(float left, float top, float right, float bottom, @NonNull Paint paint) 引數分別為左邊、頂部、右邊、底部四條邊的座標值。
（2）根據給定的4條邊框的座標，來畫矩形。
（3）示例：
1 canvas.drawRect(100, 100, 500, 500, paint);
（4）效果
（5）其他函式
1） drawRect(@NonNull Rect r, @NonNull Paint paint)。實際上就是將前面函式定義為一個Rect來作為引數，作用和上面一樣。
2）示例，效果和上述一樣。
1 canvas.drawRect(new Rect(100,100,500,500),mPaint);
6、drawPoint畫點
（1）函式原型：drawPoint(float x, float y, @NonNull Paint paint)。引數x，y分別為該點的座標，點的大小和形狀由paint決定。
（2）功能：在指定x，y座標處畫點
（3）示例
1 canvas.drawPoint(50, 50, paint);
（4）效果（和畫圓很類似，其實也可以用來畫圓）
（5）畫多個點
1）drawPoints(float[] pts, int offset, int count,@NonNull Paint paint)。pts 這個陣列是點的座標，每兩個成一對； offset 表示跳過陣列的前幾個數再開始記座標； count 表示一共有多個數參與繪製。
2）示例：
1 float[] points = {0, 0, 50, 50, 50, 100, 100, 50, 100, 100, 150, 50}；
2 canvas.drawPoints(points, 2 /* 跳過兩個數，即前兩個 0 */,
3 8 /* 一共繪製 8 個數（4 個點）*/, paint);
3）效果。效果圖中4個點的座標分別為(50,50)、(50,100)、(100,50)、(100,100)
4）drawPoints( @NonNull float[] pts, @NonNull Paint paint)；就是預設將上述函式的offset設定為0，count設定為所有資料參與繪製。
7、drawOval畫橢圓
（1）函式原型：drawOval(float left, float top, float right, float bottom, @NonNull Paint paint)。引數分別為四個頂點所在切線座標。
（2）作用：4個引數確定了一個矩形的4條邊框，這個矩形確定了一個橢圓。該函式用於畫出這個指定的橢圓。
（3）示例
1 canvas.drawOval(50, 50, 350, 200, paint);
（4）效果
（5）其它建構函式 ： drawOval(RectF rect, Paint paint)
8、drawLine畫直線
（1）函式原型：drawLine(float startX, float startY, float stopX, float stopY, Paint paint)。引數值分別為起始點座標和結束點座標。
（2）作用：根據給定的起始點和結束點畫直線
（3）示例
1 canvas.drawLine(200, 200, 800, 500, paint);
（4）效果
（5） 批量畫線：drawLines(float[] pts, int offset, int count,Paint paint) / drawLines(float[] pts, Paint paint)。使用方法參照批量畫圓。
9、drawRoundRect畫圓角矩形
（1）函式原型：drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint)。
（2）該函式的引數、作用、建構函式等可以參看矩形的繪製。不同點是多了rx和ry，它們表示頂點圓角的X軸方向半徑和Y軸方向半徑。
（3）示例
1 canvas.drawRoundRect(100, 100, 500, 300, 50, 50, paint);
（4）效果
10、drawArc畫弧線或扇形
（1）函式原型：drawArc(float left, float top, float right, float bottom, float startAngle,float sweepAngle, boolean useCenter, @NonNull Paint paint)。扇形或者弧線，都是橢圓（圓可以看成是橢圓的特殊情形）上的一部分，所以畫扇形或者弧線需要先確定好橢圓，前4個引數就是用於確定這個橢圓。startAngle表示起始角度，X軸正方向（即水平向右方向）為0度，順時針為正角度，逆時針為負角度。sweepAngle表示弧線/扇形劃過的角度，依然是順時針為正，逆時針為負；useCenter表示是否連到圓心，true表示連到，表示扇形，false表示不連到，表示弧線。
（2）示例：
1 canvas.drawArc(200, 100, 800, 500, -110, 100, true, paint); // 繪製扇型 2 canvas.drawArc(200, 100, 800, 500, 20, 140, false, paint); // 繪製弧形
（3）效果
11、drawPath畫自定圖形
（1）函式原型：drawPath(Path path, Paint paint)
（2）根據path定義的形狀來繪製。這個會在後續文章中詳細講。
12、drawBitmap
（1）函式原型：drawBitmap(Bitmap bitmap, float left, float top, Paint paint)。引數bitmap表示要繪製的圖片物件；left，top表示要顯示的bitmap物件的左上角左邊位置。
（2）作用：把指定的bitmap物件中的畫素複製到指定位置。
（3）示例：
1 Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.test); 2 canvas.drawBitmap(bitmap,100,50，paint);
（4）效果
（5）過載方法
drawBitmap(Bitmap bitmap, Rect src, RectF dst, Paint paint)；
drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint)；
drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint)；
它們可以指定複製原bitmap中的指定區域（Rect src來確定），到畫布中的指定位置（Rect dst）來確定。
13、drawText繪製文字
函式原型：drawText(String text, float x, float y, Paint paint)。介面裡所有的顯示內容，都是繪製出來的，包括文字。 drawText() 這個方法就是用來繪製文字的。引數 text 是用來繪製的字串， x 和 y 是繪製的起點座標。文字的繪製在後面也會單獨詳細說明。
三、Canvas實現裁剪
根據給定的範圍，對指定的bitmap進行裁剪，裁剪之後再進行繪製。範圍裁剪有兩個方法：clipRect()和clipPath()。前者會擷取一個矩形範圍，而後者path指定的形狀更多，所以裁剪的形狀也會更多。
1、Canvas.save()和Canvas.restore()
在裁剪的過程中，要加上這兩句程式碼。它們用於儲存和恢復繪製範圍，如果不加容易出現干擾。
2、clipRect()
1 canvas.save(); 2 //目標bitmap 3 Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.test); 4 //確定需要裁剪的矩形範圍 5 canvas.clipRect(left, top, right, bottom); 6 //在指定的x，y座標開始繪製裁剪後的bitmap 7 canvas.drawBitmap(bitmap, x, y, paint); 8 canvas.restore();
裁剪後的效果如下圖所示：
3、clipPath()
Canvas.clipRect(Path path) 用法完全一樣，只是把引數換成了 Path ，所以能裁切的形狀更多一些。其對應有一個方法Canvas.clipOutPaht(Path path)，反向裁剪，效果可以從截圖中看出來。
canvas.save(); canvas.clipPath(path1); canvas.drawBitmap(bitmap, point1.x, point1.y, paint); canvas.restore(); canvas.save(); canvas.clipOutPath(path); canvas.drawBitmap(bitmap, point2.x, point2.y, paint); canvas.restore();
這個功能對顯示原型頭像比較有幫助。
四、Canvas實現幾何變換
幾何變換的使用大概分為三類：使用 Canvas 來做常見的二維變換；使用 Matrix 來做常見和不常見的二維變換；使用 Camera 來做三維變換。
1、使用 Canvas 來做常見的二維變換
（1）Canvas.translate(float dx, float dy) 平移。引數裡的 dx 和 dy 表示橫向和縱向的位移。
（2）Canvas.rotate(float degrees, float px, float py) 旋轉
（3）Canvas.scale(float sx, float sy, float px, float py)放大縮小
（4）Canvas.skew(float sx, float sy) 錯切，就是傾斜的意思。
1 canvas.save(); 2 //水平向X軸正方向移動200px 3 canvas.translate(200, 0); 4 //以給定的點為軸旋轉45度 5 canvas.rotate(45, centerX, centerY); 6 //以圖片中心為軸，水平和豎直方向各放大為原來的1.3倍 7 canvas.scale(1.3f, 1.3f, x + bitmapWidth / 2, y + bitmapHeight / 2); 8 canvas.skew(0, 0.5f); 9 canvas.drawBitmap(bitmap, x, y, paint); 10 canvas.restore();
2、使用 Matrix 來做變換
使用Matrix可以做常規的幾何變換，還可以對圖形進行自定義變換。在做常規的幾何變換時，和前面介紹的用Canvas實現常規變換，功能一樣，選其一即可。
（1）使用Matrix做常規變換
使用Matrix 來做常規變換主要分三個步驟（1）建立Matrix物件；（2）Matrix.pre/postTranslate/Rotate/Scale/Skew()設定幾何變換；（3）Canvas.setMatrix(matrix)或Canvas.concat(matrix)把幾何變換應用到Canvas中（儘量用後者）。
1 //1.建立Matrix物件 2 Matrix matrix = new Matrix(); 3 matrix.reset(); 4 //2.幾何變換 5 matrix.postTranslate(0,100); 6 matrix.postRotate(45,bitmap.getWidth()/2,bitmap.getHeight()/2); 7 matrix.postScale(1.3f,1.3f,x+bitmap.getWidth()/2,y+bitmap.getHeight()/2); 8 matrix.postSkew(0,0.5f); 9 canvas.save(); 10 //3.把幾何變換應用到Canvas中 11 canvas.concat(matrix); 12 canvas.drawBitmap(bitmap,x,y,paint1); 13 canvas.restore();
（2）使用Matrix做自定義變換
使用Maxtrix做自定義變換，可以對圖形進行任意拉伸，如下圖所示：
這需要用到Matrix提供的setPolyToPoly方法來實現，具體的使用這裡不做介紹，請查閱【個人記錄 View Matrix setPolyToPoly】。
3、使用 Camera 來做三維變換
這一塊沒有使用過，這裡不做介紹，知道有這個功能即可。
結語
本文主要就是記錄和梳理學習Canvas中的一些要點，非常基礎，但都實用和常見。內容的來源是騰訊課堂中“仍物線學堂”中課件，特在此宣告。
&n