前言
自定义 view
总是绕不开onDraw
,而onDraw
则少不了Paint
与Canvas
,这里我们就说说这个。
- 【Android自定义View】绘图之基础篇(一)
- 【Android自定义View】绘图之Path篇(二)
- 【Android自定义View】绘图之文字篇(三)
- 【Android自定义View】绘图之实战篇(雷达图)(四)
- 【Android自定义View】绘图之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);
复制代码
需要注意的是,50, 50, 150, 50 为第1条线,150, 50, 150, 150为第2条,150, 150, 250, 150为第3条线,250, 150, 250, 250为第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);
复制代码
示例
这里就不贴代码了,主要用的画线、矩形和圆,再加上一些位置计算