經常使用自定義 View 方法彙總 Canvas 類（一）

canvas 類

1. 基本圖形

1.1 顏色填充

drawColor(int color); 
drawRGB(int r, int g, int b);
drawARGB(int a, int r, int g, int b);
複製代碼

1.2 畫圓

// centerX centerY 圓心的座標 
// radius 是圓的半徑，單位都是像素
drawCircle(float centerX, float centerY, float radius, Paint paint); 
複製代碼

1.3 畫矩形

//left, top, right, bottom 矩形四條邊的座標
drawRect(float left, float top, float right, float bottom, Paint paint);
//RectF 或 Rect 繪製矩形的對象
drawRect(RectF rect, Paint paint);
drawRect(Rect rect, Paint paint);
複製代碼

1.4 畫點

// x 和 y 是點的座標
//大小經過 paint.setStrokeWidth(width) 來設置
//形狀經過 paint.setStrokeCap(cap) 來設置
//端點有圓頭 (ROUND)、平頭 (BUTT) 和方頭 (SQUARE) 
drawPoint(float x, float y, Paint paint);
// 畫點（批量）
// pts 點的座標數組，每兩個成一對；
// offset 表示跳過數組的前幾個數再開始記座標
// count 表示一共要繪製幾個點
drawPoints(float[] pts, int offset, int count, Paint paint); drawPoints(float[] pts, Paint paint);
複製代碼

1.5 畫橢圓

// left, top, right, bottom 橢圓的左、上、右、下四個邊界點的座標
drawOval(float left, float top, float right, float bottom, Paint paint);
//RectF 來繪製橢圓
drawOval(RectF rect, Paint paint);
複製代碼

1.6 畫線

//startX, startY, stopX, stopY 線的起點和終點座標。
drawLine(float startX, float startY, float stopX, float stopY, Paint paint);
//批量畫線
drawLines(float[] pts, int offset, int count, Paint paint); drawLines(float[] pts, Paint paint);
複製代碼

因爲直線不是封閉圖形，因此 setStyle(style) 對直線沒有影響

1.7 畫圓角矩形

// left, top, right, bottom 是四條邊的座標，
// rx 和 ry 是圓角的橫向半徑和縱向半徑
drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint)
drawRoundRect(RectF rect, float rx, float ry, Paint paint);
複製代碼

1.8 畫弧形或扇形

//left, top, right, bottom 描述的是這個弧形所在的橢圓
//startAngle 是弧形的起始角度（x 軸的正向，即正右的方向，是 0 度的位置；順時針爲正角度，逆時針爲負角度），
//sweepAngle 是弧形劃過的角度；
//useCenter 表示是否鏈接到圓心，若是不鏈接到圓心，就是弧形，若是鏈接到圓心，就是扇形
drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, Paint paint);
複製代碼

1.9 畫 Bitmap

drawBitmap(Bitmap bitmap, float left, float top, Paint paint);
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 bitmap = BitmapFactory.decodeResource(getResources(),R.mipmap.ic_launcher);

2. 畫自定義圖形

//path 路徑
drawPath(Path path, Paint paint);
複製代碼

例：畫心

// 初始化 Path 對象
Path path = new Path(); 
// 使用 path 對圖形進行描述（這段描述代碼沒必要看懂）
path.addArc(200, 200, 400, 400, -225, 225);
path.arcTo(400, 200, 600, 400, -180, 225, false);
path.lineTo(400, 542);
canvas.drawPath(path, paint); // 繪製出 path 描述的圖形（心形），大功告成
複製代碼

2.1 添加圓

// x, y, radius 圓的基本信息，dir 是畫圓的路徑的方向
addCircle(float x, float y, float radius, Direction dir);
複製代碼

2.2 添加橢圓

addOval(float left, float top, float right, float bottom, Direction dir);
addOval(RectF oval, Direction dir);
複製代碼

2.3 添加矩形

addRect(float left, float top, float right, float bottom, Direction dir); 
addRect(RectF rect, Direction dir);
複製代碼

2.4 添加圓角矩形

addRoundRect(RectF rect, float rx, float ry, Direction dir);
addRoundRect(float left, float top, float right, float bottom, float rx, float ry, Direction dir);
addRoundRect(RectF rect, float[] radii, Direction dir);
addRoundRect(float left, float top, float right, float bottom, float[] radii, Direction dir);
複製代碼

2.5 添加直線

// 絕對座標
lineTo(float x, float y);
// 相對當前位置的相對座標 relatively 初始值爲原點 (0, 0)。
rLineTo(float x, float y);
複製代碼

2.6 貝塞爾曲線

// 二次貝塞爾曲線
// 起點 當前位置，而參數中的 x1, y1 控制點 x2, y2終點的座標
quadTo(float x1, float y1, float x2, float y2);
rQuadTo(float dx1, float dy1, float dx2, float dy2);
// 三次貝塞爾曲線
cubicTo(float x1, float y1, float x2, float y2, float x3, float y3);
rCubicTo(float x1, float y1, float x2, float y2, float x3, float y3);
複製代碼

2.7 添加弧形

arcTo(RectF oval, float startAngle, float sweepAngle, boolean forceMoveTo);
arcTo(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean forceMoveTo);
arcTo(RectF oval, float startAngle, float sweepAngle);
//一個直接使用了 forceMoveTo = true 的簡化版 arcTo() 
addArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle);
addArc(RectF oval, float startAngle, float sweepAngle);
複製代碼

注：關於 forceMoveTo 參數：是否強制移動到開始位置。 true：強制移動，不會留下移動的痕跡 false：不強制，會留下移動的痕跡

2.8 移動到目標位置

moveTo(float x, float y);
rMoveTo(float x, float y); 
複製代碼

2.9 封閉當前子圖形

//等價於方法 lineTo(起點座標);
close();
複製代碼

注：paint 的 style 設置爲 FILL 或 FILL_AND_STROKE 時，自動封閉

2.10 設置填充方式

// EVEN_ODD
// WINDING （默認值）
// INVERSE_EVEN_ODD
// INVERSE_WINDING
setFillType(FillType fillType);
複製代碼

效果展現

參考：HenCoder Android 開發進階: 自定義 View 1-1 繪製基礎。