資料鏈接
1.GcsSloop的自定義系列

一、繪制圖形

1.Canvas簡介

Canvas - 畫布，能夠在上面繪制各種東西，是安卓平臺2D圖形繪制的基礎，非常強大。

2.Canvas常用操作表

操作類型 | 相關API | 備注
----|------
繪制顏色 | drawColor, drawRGB, drawARGB | 使用單一顏色填充整個畫布
繪制基本形狀 | drawPoint, drawPoints, drawLine, drawLines, drawRect, drawRoundRect, drawOval, drawCircle, drawArc | 依次為 點、線、矩形、圓角矩形、橢圓、圓、圓弧
繪制圖片 | drawBitmap, drawPicture | 繪制位圖和圖片
繪制文本 | drawText, drawPosText, drawTextOnPath | 依次為 繪制文字、繪制文字時指定每個文字位置、根據路徑繪制文字
繪制路徑 | drawPath | 繪制路徑，繪制貝塞爾曲線時也需要用到該函數
頂點操作 | drawVertices, drawBitmapMesh | 通過對頂點操作可以使圖像形變，drawVertices直接對畫布作用、 drawBitmapMesh只對繪制的Bitmap作用
畫布剪裁 | clipPath, clipRect | 設置畫布的顯示區域
畫布快照 | save, restore, saveLayerXxx, restoreToCount, getSaveCount | 依次為 保存當前狀態、 回滾到上一次保存的狀態、 保存圖層狀態、 回滾到指定狀態、 獲取保存次數
畫布變換 | translate, scale, rotate, skew | 依次為 位移、縮放、 旋轉、錯切
Matrix(矩陣) | getMatrix, setMatrix, concat | 實際上畫布的位移，縮放等操作的都是圖像矩陣Matrix， 只不過Matrix比較難以理解和使用，故封裝了一些常用的方法。

3.Canvas詳解

3.1.繪制顏色 - drawColor

繪制顏色是填充整個畫布，常用于繪制底色。

// 繪制藍色
canvas.drawColor(Color.BLUE);

3.2.創建畫筆 - Paint

// 1.創建一個畫筆
private Paint mPaint = new Paint();

// 2.初始化畫筆
private void initPaint() {
    // 設置畫筆顏色
    mPaint.setColor(Color.BLACK);
    // 設置畫筆模式為填充
    mPaint.setStyle(Paint.Style.FILL);
    // 設置畫筆寬度為10px
    mPaint.setStrokeWidth(10f);
}

// 3.在構造函數中初始化
public View(Context context, AttributeSet attrs) {
   super(context, attrs);
   initPaint();
}

3.3.繪制點 - drawPoint

// 在坐標(200,200)位置繪制一個點
canvas.drawPoint(200, 200, mPaint);
// 繪制一組點，坐標位置由float數組指定
canvas.drawPoints(new float[]{          
      500,500,
      500,600,
      500,700
},mPaint);

3.3.繪制直線 - drawLine/drawLines

繪制直線需要兩個點，初始點和結束點

// 在坐標(300,300)(500,600)之間繪制一條直線
canvas.drawLine(300,300,500,600,mPaint);
// 繪制一組線 每四數字(兩個點的坐標)確定一條線
canvas.drawLines(new float[]{
    100,200,200,200,
    100,300,200,300
},mPaint);

3.5.繪制矩形 - drawRect

繪制矩形最少需要四個數據，就是對角線的兩個點的坐標值，這里一般采用左上角和右下角的兩個點的坐標。

// 第一種 (矩形左上角和右下角兩個點的坐標)
canvas.drawRect(100,100,800,400,mPaint);

// 第二種
// 先將矩形封裝為Rect(整形)
Rect rect = new Rect(100,100,800,400);
canvas.drawRect(rect,mPaint);

// 第三種
// 先將矩形封裝為RectF(單精度浮點型)
RectF rectF = new RectF(100,100,800,400);
canvas.drawRect(rectF,mPaint);

3.6.繪制圓角矩形 - drawRoundRect

// 第一種
RectF rectF = new RectF(100,100,800,400);
// rx 和 ry 圓弧的兩條半徑
canvas.drawRoundRect(rectF,30,30,mPaint);

// 第二種 API21
canvas.drawRoundRect(100,100,800,400,30,30,mPaint);

3.7.繪制橢圓 - drawOval

// 第一種
RectF rectF = new RectF(100,100,800,400);
canvas.drawOval(rectF,mPaint);

// 第二種 API21
canvas.drawOval(100,100,800,400,mPaint);

3.8.繪制圓 - drawCircle

// 繪制一個圓心坐標在(500,500)，半徑為400 的圓。
canvas.drawCircle(500,500,400,mPaint);

3.9.繪制圓弧 - drawArc

// 第一種
public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter, @NonNull Paint paint){}
    
// 第二種
public void drawArc(float left, float top, float right, float bottom, float startAngle,float sweepAngle, boolean useCenter, @NonNull Paint paint) {}

從上面可以看出，相比于繪制橢圓，繪制圓弧還多了三個參數：

// 開始角度
startAngle
// 掃過角度
sweepAngle  
// 是否使用中心
useCenter   

例：

/*** ====== 不使用圓心 ====== ***/
RectF rectF = new RectF(100,100,800,400);
// 繪制背景矩形
mPaint.setColor(Color.GRAY);
canvas.drawRect(rectF,mPaint);

// 繪制圓弧
mPaint.setColor(Color.BLUE);
canvas.drawArc(rectF,0,90,false,mPaint);

/*** ====== 使用圓心 ====== ***/
RectF rectF2 = new RectF(100,600,800,900);
// 繪制背景矩形
mPaint.setColor(Color.GRAY);
canvas.drawRect(rectF2,mPaint);

// 繪制圓弧
mPaint.setColor(Color.BLUE);
canvas.drawArc(rectF2,0,90,true,mPaint);

正圓例：

/*** ====== 不使用圓心 ====== ***/
RectF rectF = new RectF(100,100,600,600);
// 繪制背景矩形
mPaint.setColor(Color.GRAY);
canvas.drawRect(rectF,mPaint);

// 繪制圓弧
mPaint.setColor(Color.BLUE);
canvas.drawArc(rectF,0,90,false,mPaint);

/*** ====== 使用圓心 ====== ***/
RectF rectF2 = new RectF(100,700,600,1200);
// 繪制背景矩形
mPaint.setColor(Color.GRAY);
canvas.drawRect(rectF2,mPaint);

// 繪制圓弧
mPaint.setColor(Color.BLUE);
canvas.drawArc(rectF2,0,90,true,mPaint);

二、畫布操作

合理的使用畫布操作可以幫助你用更容易理解的方式創作你想要的效果，這也是畫布操作存在的原因。

1.位移 - translate

位移是基于當前位置移動，而不是每次基于屏幕左上角的(0,0)點移動

// ...省略了創建畫筆的代碼

// 在坐標原點繪制一個黑色圓形
mPaint.setColor(Color.BLACK);
canvas.translate(200,200);
canvas.drawCircle(0,0,100,mPaint);

// 在坐標原點繪制一個藍色圓形
mPaint.setColor(Color.BLUE);
canvas.translate(200,200);
canvas.drawCircle(0,0,100,mPaint);

2.縮放 - scale

// x軸，y軸的縮放比例
public void scale (float sx, float sy)
// x軸，y軸的縮放比例。 x中心縮放位置，y中心縮放位置
public final void scale (float sx, float sy, float px, float py)

縮放比例(sx,sy)取值范圍：

縮放的中心默認為坐標原點,而縮放中心軸就是坐標軸

2.1.第一種方式

// 將坐標系原點移動到畫布正中心
canvas.translate(getWidth() / 2, getHeight() / 2);

// 繪制黑色矩形
RectF rect = new RectF(0, -400, 400, 0);
mPaint.setColor(Color.BLACK);
canvas.drawRect(rect, mPaint);
// 畫布縮放
canvas.scale(0.5f, 0.5f);
// 繪制藍色矩形
mPaint.setColor(Color.BLUE);
canvas.drawRect(rect, mPaint);

2.2.第二種方式

// 將坐標系原點移動到畫布正中心
canvas.translate(getWidth() / 2, getHeight() / 2);
// 繪制黑色矩形
RectF rect = new RectF(0, -300, 300, 0);
mPaint.setColor(Color.BLACK);
canvas.drawRect(rect, mPaint);
// 畫布縮放  <-- 縮放中心向右上偏移了150個單位
canvas.scale(0.5f, 0.5f, 150, -150);
// 繪制藍色矩形
mPaint.setColor(Color.BLUE);
canvas.drawRect(rect, mPaint);

2.3.中心點翻轉縮放

// 將坐標系原點移動到畫布正中心
canvas.translate(getWidth() / 2, getHeight() / 2);
// 繪制黑色矩形
RectF rect = new RectF(0, -300, 300, 0);
mPaint.setColor(Color.BLACK);
canvas.drawRect(rect, mPaint);

// 畫布中心點翻轉縮放
canvas.scale(-0.5f, -0.5f);
// 繪制藍色矩形
mPaint.setColor(Color.BLUE);
canvas.drawRect(rect, mPaint);

縮放也是可以疊加的

3.旋轉 - rotate

// 旋轉
public void rotate (float degrees)
// 旋轉，旋轉中心點
public final void rotate (float degrees, float px, float py)

3.1.正常翻轉

// 將坐標系原點移動到畫布正中心
canvas.translate(getWidth() / 2, getHeight() / 2);
// 矩形區域
RectF rect = new RectF(0, -300, 300, 0);
// 繪制黑色矩形
mPaint.setColor(Color.BLACK);
canvas.drawRect(rect, mPaint);

// 旋轉180度 <-- 默認旋轉中心為原點
canvas.rotate(180);
// 繪制藍色矩形
mPaint.setColor(Color.BLUE);
canvas.drawRect(rect, mPaint);

3.2.改變旋轉中心位置

// 將坐標系原點移動到畫布正中心
canvas.translate(getWidth() / 2, getHeight() / 2);
// 矩形區域
RectF rect = new RectF(0, -300, 300, 0);
// 繪制黑色矩形
mPaint.setColor(Color.BLACK);
canvas.drawRect(rect, mPaint);

// 旋轉180度 <-- 旋轉中心向右偏移150個單位
canvas.rotate(180, 150, 0);
// 繪制藍色矩形
mPaint.setColor(Color.BLUE);
canvas.drawRect(rect, mPaint);

旋轉也是可疊加

例：

// 將坐標系原點移動到畫布正中心
canvas.translate(getWidth() / 2, getHeight() / 2);
// 繪制兩個圓形
canvas.drawCircle(0, 0, 200, mPaint);
canvas.drawCircle(0, 0, 180, mPaint);

// 繪制圓形之間的連接線
for (int i = 0; i <= 360; i += 45) {
    canvas.drawLine(0, 180, 0, 200, mPaint);
    canvas.rotate(45);
}

4.錯切 - skew

/**
 * 錯切
 * @param sx :將畫布在x方向上傾斜相應的角度，sx傾斜角度的tan值，
 * @param sy :將畫布在y軸方向上傾斜相應的角度，sy為傾斜角度的tan值.
 */
public void skew (float sx, float sy)

變換后：

X = x + sx * y
Y = sy * x + y

例：

// 將坐標系原點移動到畫布正中心
canvas.translate(getWidth() / 2, getHeight() / 2);
// 矩形區域
RectF rect = new RectF(0, 0, 100, 100);
// 繪制黑色矩形
mPaint.setColor(Color.BLACK);
canvas.drawRect(rect, mPaint);
// 水平錯切 <-- 45度
canvas.skew(1, 0);
// 繪制藍色矩形
mPaint.setColor(Color.BLUE);
canvas.drawRect(rect, mPaint);

5.快照 - save 和回滾 - restore

畫布狀態API

存儲畫布狀態和圖層狀態棧：

畫布和圖層

實際上我們之前講解的繪制操作和畫布操作都是在默認圖層上進行的。
在通常情況下，使用默認圖層就可滿足需求，但是如果需要繪制比較復雜的內容，如地圖(地圖可以有多個地圖層疊加而成，比如：政區層，道路層，興趣點層)等，則分圖層繪制比較好一些。
你可以把這些圖層看做是一層一層的玻璃板，你在每層的玻璃板上繪制內容，然后把這些玻璃板疊在一起看就是最終效果。

SaveFlags：

5.1.save：

// 保存全部狀態
public int save ()

// 根據saveFlags參數保存一部分狀態
public int save (int saveFlags)

可以看到第二種方法比第一種多了一個saveFlags參數，使用這個參數可以只保存一部分狀態，更加靈活，這個saveFlags參數具體可參考上面表格中的內容。

每調用一次save方法，都會在棧頂添加一條狀態信息，以上面狀態棧圖片為例，再調用一次save則會在第5次上面載添加一條狀態。

5.2.saveLayerXxx

// 無圖層alpha(不透明度)通道
public int saveLayer (RectF bounds, Paint paint)
public int saveLayer (RectF bounds, Paint paint, int saveFlags)
public int saveLayer (float left, float top, float right, float bottom, Paint paint)
public int saveLayer (float left, float top, float right, float bottom, Paint paint, int saveFlags)

// 有圖層alpha(不透明度)通道
public int saveLayerAlpha (RectF bounds, int alpha)
public int saveLayerAlpha (RectF bounds, int alpha, int saveFlags)
public int saveLayerAlpha (float left, float top, float right, float bottom, int alpha)
public int saveLayerAlpha (float left, float top, float right, float bottom, int alpha, int saveFlags)

注意：saveLayerXxx方法會讓你花費更多的時間去渲染圖像(圖層多了相互之間疊加會導致計算量成倍增長)，使用前請謹慎，如果可能，盡量避免使用。

使用saveLayerXxx方法，也會將圖層狀態也放入狀態棧中，同樣使用restore方法進行恢復。
這個暫時不過多講述，如果以后用到詳細講解。

5.3.restore

狀態回滾，就是從棧頂取出一個狀態然后根據內容進行恢復。
同樣以上面狀態棧圖片為例，調用一次restore方法則將狀態棧中第5次取出，根據里面保存的狀態進行狀態恢復。

5.4.restoreToCount

彈出指定位置以及以上所有狀態，并根據指定位置狀態進行恢復。
以上面狀態棧圖片為例，如果調用restoreToCount(2) 則會彈出 2 3 4 5 的狀態，并根據第2次保存的狀態進行恢復。

5.5.getSaveCount

獲取保存的次數，即狀態棧中保存狀態的數量，以上面狀態棧圖片為例，使用該函數的返回值為5。
不過請注意，該函數的最小返回值為1，即使彈出了所有的狀態，返回值依舊為1，代表默認狀態。

5.6.常用格式

// 保存狀態
save();
// 具體操作    
...
// 回滾到之前的狀態
restore();

這種方式也是最簡單和最容易理解的使用方法。

三、Canvas之圖片

1.drawPicture(矢量圖)

使用Picture前請關閉硬件加速，以免引起不必要的問題！
在AndroidMenifest文件中application節點下添上 android:hardwareAccelerated=”false”以關閉整個應用的硬件加速。

1.1.Picture(錄制Canvas操作的錄像機)

例：

private Picture mPicture;

/**
 * 初始化Picture
 */
private void initPicture() {
    mPicture = new Picture();

    // 開始錄制 (接收返回值Canvas)
    Canvas canvas = mPicture.beginRecording(300, 300);
    // 創建一個畫筆
    Paint paint = new Paint();
    paint.setColor(Color.BLUE);
    paint.setStyle(Paint.Style.FILL);

    // 在Canvas中具體操作
    // 位移
    canvas.translate(50, 50);
    // 繪制一個圓
    canvas.drawCircle(0, 0, 100, paint);

    mPicture.endRecording();
}

1.2.具體使用:

以上幾種方法主要區別：

主要區別 | 分類 | 簡介
----|------
是否對Canvas有影響 | 1有影響
2,3不影響 | 此處指繪制完成后是否會影響Canvas的狀態(Matrix clip等)
可操作性強弱 | 1可操作性較弱
2,3可操作性較強 | 此處的可操作性可以簡單理解為對繪制結果可控程度。

a.使用Picture提供的draw方法繪制:

// 將Picture中的內容繪制在Canvas上
mPicture.draw(canvas);

PS：這種方法在比較低版本的系統上繪制后可能會影響Canvas狀態，所以這種方法一般不會使用。

b.使用Canvas提供的drawPicture方法繪制

public void drawPicture (Picture picture)

public void drawPicture (Picture picture, Rect dst)

public void drawPicture (Picture picture, RectF dst)

Canvas的drawPicture不會影響Canvas狀態。

例：

canvas.drawPicture(mPicture, new RectF(0, 0, mPicture.getWidth(), 100));

對照上一張圖片，可以比較明顯的看出，繪制的內容根據選區進行了縮放。

c.將Picture包裝成為PictureDrawable，使用PictureDrawable的draw方法繪制。

// 包裝成為Drawable
PictureDrawable drawable = new PictureDrawable(mPicture);
// 設置繪制區域 -- 注意此處所繪制的實際內容不會縮放
drawable.setBounds(0, 0, mPicture.getWidth() / 2, mPicture.getHeight());
// 繪制
drawable.draw(canvas);

此處setBounds是設置在畫布上的繪制區域，并非根據該區域進行縮放，也不是剪裁Picture，每次都從Picture的左上角開始繪制。

2.drawBitmap常用的功能

2.1.獲取Bitmap

通過BitmapFactory獲取：從資源文件/內存卡/網絡等地方獲取一張圖片并轉換為內容不可變的Bitmap

a.資源文件(drawable/mipmap/raw):

Bitmap bitmap = BitmapFactory.decodeResource(mContext.getResources(),R.raw.bitmap);

b.資源文件(assets):

Bitmap bitmap=null;
try {
    InputStream is = mContext.getAssets().open("bitmap.png");
    bitmap = BitmapFactory.decodeStream(is);
    is.close();
} catch (IOException e) {
    e.printStackTrace();
}

c.內存卡文件:

Bitmap bitmap = BitmapFactory.decodeFile("/sdcard/bitmap.png");

d.網絡文件:

// 此處省略了獲取網絡輸入流的代碼
Bitmap bitmap = BitmapFactory.decodeStream(is);
is.close();

2.2.繪制Bitmap

// 第一種 (matrix, paint)是在繪制的時候對圖片進行一些改變
public void drawBitmap (Bitmap bitmap, Matrix matrix, Paint paint)

// 第二種
public void drawBitmap (Bitmap bitmap, float left, float top, Paint paint)

// 第三種 (src:指定繪制圖片的區域，dst:指定圖片在屏幕上顯示的區域)
public void drawBitmap (Bitmap bitmap, Rect src, Rect dst, Paint paint)
public void drawBitmap (Bitmap bitmap, Rect src, RectF dst, Paint paint)

例1

canvas.drawBitmap(bitmap,new Matrix(),new Paint());

例2

// 繪制時指定了圖片左上角的坐標(距離坐標原點的距離)：
canvas.drawBitmap(bitmap,new Matrix(),new Paint());

例3

// 將畫布坐標系移動到畫布中央
canvas.translate(getWidth() / 2, getHeight() / 2);
// 指定圖片繪制區域(左上角的四分之一)
Rect src = new Rect(0, 0, getBitmap().getWidth() / 2, getBitmap().getHeight() / 2);
// 指定圖片在屏幕上顯示的區域
Rect dst = new Rect(0, 0, 200, 400);
// 繪制圖片
canvas.drawBitmap(getBitmap(), src, dst, null);

把同一個動畫效果的所有資源圖片整理到一張圖片上，會大大的減少資源文件數量，方便管理，同時也節省了圖片文件頭、文件結束塊以及調色板等占用的空間。

四、Canvas之文字

1.常用方法

// 第一類：只能指定文本基線位置(基線x默認在字符串左側，基線y默認在字符串下方)。
public void drawText (String text, float x, float y, Paint paint)
public void drawText (String text, int start, int end, float x, float y, Paint paint)
public void drawText (CharSequence text, int start, int end, float x, float y, Paint paint)
public void drawText (char[] text, int index, int count, float x, float y, Paint paint)

// 第二類：可以分別指定每個文字的位置。
public void drawPosText (String text, float[] pos, Paint paint)
public void drawPosText (char[] text, int index, int count, float[] pos, Paint paint)

// 第三類：指定一個路徑，根據路徑繪制文字。
public void drawTextOnPath (String text, Path path, float hOffset, float vOffset, Paint paint)
public void drawTextOnPath (char[] text, int index, int count, Path path, float hOffset, float vOffset, Paint paint)

1.2.第一類(drawText)

// 文本(要繪制的內容)
String str = "ABCDEFG";
// 參數分別為 (文本 基線x 基線y 畫筆)
canvas.drawText(str, 200, 100, mTPaint);

// 參數分別為 (字符串 開始截取位置 結束截取位置 基線x 基線y 畫筆)
canvas.drawText(str, 1, 3, 200, 200, mTPaint);

// 字符數組(要繪制的內容)
char[] chars = "ABCDEFG".toCharArray();
// 參數為 (字符數組 起始坐標 截取長度 基線x 基線y 畫筆)
canvas.drawText(chars, 1, 3, 200, 300, mTPaint);

1.3.第二類(drawPosText)

String str = "SLOOP";
// 不推薦使用 
canvas.drawPosText(str, new float[]{
    // 第一個字符位置
    100, 100,
    // 第二個字符位置
    200, 200,
    300, 300,
    400, 400,
    500, 500
}, mTPaint);

1.4.第三類(drawTextOnPath)

// TODO

2017/6/6 17:09:27