前言
自定義 view 總是繞不開onDraw，而onDraw則少不了Paint與Canvas，這裡我們就說說這個。
Paint
主要的方法：
paint.setColor(Color.RED); //設定畫筆顏色
paint.setAntiAlias(true);//抗鋸齒功能
paint.setStyle(Style.FILL);//設定填充樣式
paint.setStrokeWidth(30);//設定畫筆寬度
paint.setTextSize();//設定字型大小
複製程式碼- setStyle 主要有
FILL、STROKE、FILL_AND_STROKE
我們來看看效果
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStrokeWidth(10);
paint.setStyle(Paint.Style.FILL);
canvas.drawCircle(200, 300, 100, paint);
paint.setStyle(Paint.Style.STROKE);
canvas.drawCircle(500, 300, 100, paint);
paint.setStyle(Paint.Style.FILL_AND_STROKE);
canvas.drawCircle(800, 300, 100, paint);
複製程式碼
FILL和FILL_AND_STROKE 貌似是一樣的？我們將strokeWidth設定為100
STROKE、FILL_AND_STROKE都會為圓加上strokeWidth/2
Canvas
- 畫直線
drawLine(float startX, float startY, float stopX, float stopY,Paint paint)
paint.setColor(Color.RED);
canvas.drawLine(100, 100, 200, 300, paint);
複製程式碼drawLines(float[] pts, Paint paint)
其中，pts 長度必須是 4個倍數
paint.setColor(Color.BLACK);
float[] pts = {50, 50, 150, 50,
150, 50, 150, 150,
150, 150, 250, 150,
250, 150, 250, 250};
canvas.drawLines(pts, paint);
複製程式碼需要注意的是，100,150 為第1個點，300,250為第2個點，第1、2個點連線，3、4個點連線
drawLines(float[] pts, int offset, int count,Paint paint)
offset表示起始位置
count表示從起始位置畫多少個點，必須是4個倍數
float[] pts = {50, 50, 150, 50,
150, 50, 150, 150,
150, 150, 250, 150,
250, 150, 250, 250};
paint.setColor(Color.BLACK);
canvas.drawLines(pts, 0, 16, paint);
複製程式碼即和第二步中效果一致，我們修改offset為 4，count 為 12，效果為下圖
- 畫矩形
drawRect (float left, float top, float right, float bottom, Paint paint)
canvas.drawRect(100, 200, 400, 800, paint);
複製程式碼其代表的座標點如下圖所示
drawRect (RectF rect, Paint paint)
drawRect (Rect r, Paint paint)
這2個其實是一樣的，left、top、right、bottom和第1個是一致的
public Rect(int left, int top, int right, int bottom) {
this.left = left;
this.top = top;
this.right = right;
this.bottom = bottom;
}
複製程式碼 public RectF(float left, float top, float right, float bottom) {
this.left = left;
this.top = top;
this.right = right;
this.bottom = bottom;
}
複製程式碼- 圓角矩形
drawRoundRect(RectF rect, float rx, float ry, Paint paint)
其中，rx代表X軸圓角半徑，ry代表Y軸圓角半徑
RectF rectF = new RectF(100, 200, 400, 800);
canvas.drawRoundRect(rectF, 100, 200, paint);
複製程式碼
drawRoundRect(float left, float top, float right, float bottom, float rx, float ry,Paint paint)
同矩形，rx、ry同方法1
- 圓形
drawCircle(float cx, float cy, float radius, Paint paint)
其中，cx為圓心X軸座標，cy為圓心Y軸座標，radius為半徑
canvas.drawCircle(100, 200, 50, paint);
複製程式碼
- 橢圓
drawOval(RectF oval, Paint paint)drawOval(float left, float top, float right, float bottom, Paint paint)同矩形
RectF rectF = new RectF(100, 200, 400, 800);
canvas.drawOval(rectF, paint);
複製程式碼
- 弧線
drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter,Paint paint)
drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, Paint paint)
startAngle 弧開始的角度，以X軸正方向為0度
sweepAngle 弧持續的角度
useCenter 是否有弧的兩邊，true 閉合的，false 非閉合的
paint.setStyle(Paint.Style.STROKE);
RectF rect = new RectF(50, 100, 200, 400);
canvas.drawArc(rect, 0, 90, true, paint);
RectF rectF = new RectF(100, 200, 400, 800);
canvas.drawArc(rectF, 0, 90, false, paint);
複製程式碼
- 示例
這裡就不貼程式碼了，主要用的畫線、矩形和圓，再加上一些位置計算
參考資料：自定義控制元件之繪圖篇（一）：概述及基本幾何圖形繪製