首先熟悉Paint与Canvas1.Paint可以被理解为绘制图形时的画笔。2.Canvas可以理解为使用画笔绘画的画布。总得来说就是配置号Paint在Canvas上画东西。一切的开始:重写onDraw()方法。1@Override
2protected void onDraw(Canvas canvas) {
3super.onDraw(canvas);
4//设置一个画笔与配置属性
5Paint paint = new Paint();
6paint.setFlags(Paint.ANTI_ALIAS_FLAG);//是否打开抗锯齿
7paint.setColor(ContextCompat.getColor(getContext(),R.color.colorPrimary) );//配置颜色
8paint.setStyle(Paint.Style.FILL);//设置画笔画时是只画边线还是全填充
这里提到的抗锯齿,可以简单的理解为提高画出来的图形边是否优化。
以上就是基础的配置 接下来就是简单的画图 跟不同的方法画不同的图:1//画形状
2/*
3paint.setColor(ContextCompat.getColor(getContext(),R.color.red));
4canvas.drawRect(100,100,400,400,paint);//画方形
5
6paint.setStyle(Paint.Style.STROKE);
7paint.setColor(ContextCompat.getColor(getContext(),R.color.green));
8canvas.drawRect(700,100,1000,500,paint);
9
10//画实心点
11paint.setStrokeWidth(20);
12paint.setStrokeCap(Paint.Cap.ROUND);
13canvas.drawPoint(50,50,paint);
14
15paint.setStrokeWidth(20);
16paint.setStrokeCap(Paint.Cap.SQUARE);
17canvas.drawPoint(150,50,paint);
18
19paint.setColor(ContextCompat.getColor(getContext(),R.color.black));
20//画多组点
21float[] points = {0, 0, 50, 50, 50, 100, 100, 50, 100, 100, 150, 50, 150, 100};
22
23canvas.drawPoints(points,2,8,paint);//四个参数 分别是
24// 1点的数组 2从第几个数开始数 3数几个数(2个数一个点,为满足则不画) 4画笔
25
26//画椭圆
27paint.setStyle(Paint.Style.FILL);
28canvas.drawOval(100,100,300,200,paint);//需要版本为21以上
29
30paint.setStyle(Paint.Style.STROKE);
31canvas.drawOval(400,100,700,200,paint);//这个方法只能绘制横着的或者竖着的椭圆
32
33//画弧形或扇形
34paint.setStyle(Paint.Style.FILL);//填充模式
35canvas.drawArc(200,100,800,500,-110,
36100,true,paint);//绘制扇形
37canvas.drawArc(200,100,800,500,20,
38140,false,paint);//绘弧形
39
40paint.setStyle(Paint.Style.STROKE);
41canvas.drawArc(200,100,800,500,180,
4260,false,paint);//绘制不封口的弧形
43*/
44paint.setColor(ContextCompat.getColor(getContext(),R.color.black));
45paint.setStrokeWidth(10);//设置边宽
46canvas.drawLine(200,200,800,500,paint);//画直线
47
48canvas.drawRoundRect(100,100,500,200,50,10,paint);
49//最后两个参数 分别是圆角的横向半径与纵向
50//以上为绘制简单的图形
51
以上就是画简单的直线、圆、各类型点、扇形等。
还有 绘制自定义图形 drawPath(path) , path的类型是path。Path 可以描述直线、二次曲线、三次曲线、圆、椭圆、弧形、矩形、圆角矩形。把这些图形结合起来,就可以描述出很多复杂的图形。
Path 有两类方法,一类是直接描述路径的,另一类是辅助的设置或计算。
1:直接描述路径1{
2//使用path对图形进行描述
3path.addArc(200, 200, 400, 400, -225, 225);
4path.arcTo(400, 200, 600, 400, -180, 225, false);
5path.lineTo(400, 542);
6}
7
8canvas.drawPath(path,paint);//绘制出path描述的形状 心型
9path.addCircle(300,300,200, Path.Direction.CW);//画圆
10canvas.drawPath(path,paint);
1paint.setStyle(Style.STROKE);
2path.lineTo(100, 100); // 画斜线
3path.moveTo(200, 100); // 我移~~
4path.lineTo(200, 0); // 画竖线
1path.lineTo(100,100);//如果画笔是完全填充的画则无边宽 则无法显示该图
2path.arcTo(100,100,300,300,
3-90,90,true);//强制移动到弧形起点(无痕迹)
4//弧形的方法。一个叫 arcTo ,一个叫 addArc(),都是弧形,区别在哪里?其实很简单: addArc() 只是一个直接使用了 forceMoveTo = true 的简化版 arcTo()
5canvas.drawPath(path,paint);
2: 辅助的设置或计算这类方法的使用场景比较少,只讲其中一个方法: setFillType(FillType fillType)。
Path.setFillType(Path.FillType ft) 设置填充方式
前面在说 dir 参数的时候提到, Path.setFillType(fillType) 是用来设置图形自相交时的填充算法的.
FillType 的取值有四个:
其中后面的两个带有 INVERSE_ 前缀的,只是前两个的反色版本,所以只要把前两个,即 EVEN_ODD 和 WINDING,搞明白就可以了。
- EVEN_ODD
- WINDING (默认值)
- INVERSE_EVEN_ODD
- INVERSE_WINDING
![]()
除此外,Canvas还可以绘制Bitmap和文字。drawBitmap(bitmap, 200, 100, 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)
drawText(String text, float x, float y, Paint paint) 绘制文字界面里所有的显示内容,都是绘制出来的,包括文字。 drawText() 这个方法就是用来绘制文字的。参数 text 是用来绘制的字符串,x 和 y 是绘制的起点坐标。
canvas.drawText(text, 200, 100, paint);
首先熟悉Paint与Canvas
1.Paint可以被理解为绘制图形时的画笔。
2.Canvas可以理解为使用画笔绘画的画布。
总得来说就是配置号Paint在Canvas上画东西。
一切的开始:重写onDraw()方法。
1
@Override
2
protected void onDraw(Canvas canvas) {
3
super.onDraw(canvas);
4
//设置一个画笔与配置属性
5
Paint paint = new Paint();
6
paint.setFlags(Paint.ANTI_ALIAS_FLAG);//是否打开抗锯齿
7
paint.setColor(ContextCompat.getColor(getContext(),R.color.colorPrimary) );//配置颜色
8
paint.setStyle(Paint.Style.FILL);//设置画笔画时是只画边线还是全填充
这里提到的抗锯齿,可以简单的理解为提高画出来的图形边是否优化。
以上就是基础的配置 接下来就是简单的画图 跟不同的方法画不同的图:
1
//画形状
2
/*
3
paint.setColor(ContextCompat.getColor(getContext(),R.color.red));
4
canvas.drawRect(100,100,400,400,paint);//画方形
5
6
paint.setStyle(Paint.Style.STROKE);
7
paint.setColor(ContextCompat.getColor(getContext(),R.color.green));
8
canvas.drawRect(700,100,1000,500,paint);
9
10
//画实心点
11
paint.setStrokeWidth(20);
12
paint.setStrokeCap(Paint.Cap.ROUND);
13
canvas.drawPoint(50,50,paint);
14
15
paint.setStrokeWidth(20);
16
paint.setStrokeCap(Paint.Cap.SQUARE);
17
canvas.drawPoint(150,50,paint);
18
19
paint.setColor(ContextCompat.getColor(getContext(),R.color.black));
20
//画多组点
21
float[] points = {0, 0, 50, 50, 50, 100, 100, 50, 100, 100, 150, 50, 150, 100};
22
23
canvas.drawPoints(points,2,8,paint);//四个参数 分别是
24
// 1点的数组 2从第几个数开始数 3数几个数(2个数一个点,为满足则不画) 4画笔
25
26
//画椭圆
27
paint.setStyle(Paint.Style.FILL);
28
canvas.drawOval(100,100,300,200,paint);//需要版本为21以上
29
30
paint.setStyle(Paint.Style.STROKE);
31
canvas.drawOval(400,100,700,200,paint);//这个方法只能绘制横着的或者竖着的椭圆
32
33
//画弧形或扇形
34
paint.setStyle(Paint.Style.FILL);//填充模式
35
canvas.drawArc(200,100,800,500,-110,
36
100,true,paint);//绘制扇形
37
canvas.drawArc(200,100,800,500,20,
38
140,false,paint);//绘弧形
39
40
paint.setStyle(Paint.Style.STROKE);
41
canvas.drawArc(200,100,800,500,180,
42
60,false,paint);//绘制不封口的弧形
43
*/
44
paint.setColor(ContextCompat.getColor(getContext(),R.color.black));
45
paint.setStrokeWidth(10);//设置边宽
46
canvas.drawLine(200,200,800,500,paint);//画直线
47
48
canvas.drawRoundRect(100,100,500,200,50,10,paint);
49
//最后两个参数 分别是圆角的横向半径与纵向
50
//以上为绘制简单的图形
51
以上就是画简单的直线、圆、各类型点、扇形等。
还有
绘制自定义图形 drawPath(path) , path的类型是path。
Path 可以描述直线、二次曲线、三次曲线、圆、椭圆、弧形、矩形、圆角矩形。把这些图形结合起来,就可以描述出很多复杂的图形。
Path 有两类方法,一类是直接描述路径的,另一类是辅助的设置或计算。
1:直接描述路径
1
{
2
//使用path对图形进行描述
3
path.addArc(200, 200, 400, 400, -225, 225);
4
path.arcTo(400, 200, 600, 400, -180, 225, false);
5
path.lineTo(400, 542);
6
}
7
8
canvas.drawPath(path,paint);//绘制出path描述的形状 心型
9
path.addCircle(300,300,200, Path.Direction.CW);//画圆
10
canvas.drawPath(path,paint);
1
paint.setStyle(Style.STROKE);
2
path.lineTo(100, 100); // 画斜线
3
path.moveTo(200, 100); // 我移~~
4
path.lineTo(200, 0); // 画竖线
1
path.lineTo(100,100);//如果画笔是完全填充的画则无边宽 则无法显示该图
2
path.arcTo(100,100,300,300,
3
-90,90,true);//强制移动到弧形起点(无痕迹)
4
//弧形的方法。一个叫 arcTo ,一个叫 addArc(),都是弧形,区别在哪里?其实很简单: addArc() 只是一个直接使用了 forceMoveTo = true 的简化版 arcTo()
5
canvas.drawPath(path,paint);
2:
辅助的设置或计算
这类方法的使用场景比较少,只讲其中一个方法: setFillType(FillType fillType)。
Path.setFillType(Path.FillType ft) 设置填充方式
前面在说 dir 参数的时候提到, Path.setFillType(fillType) 是用来设置图形自相交时的填充算法的.
FillType 的取值有四个:
- EVEN_ODD
- WINDING (默认值)
- INVERSE_EVEN_ODD
- INVERSE_WINDING
除此外,Canvas还可以绘制Bitmap和文字。
drawBitmap(bitmap, 200, 100, 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)