UI绘制复习yi

 

  
  
首先熟悉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
其中后面的两个带有 INVERSE_ 前缀的,只是前两个的反色版本,所以只要把前两个,即 EVEN_ODD 和 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
其中后面的两个带有 INVERSE_ 前缀的,只是前两个的反色版本,所以只要把前两个,即 EVEN_ODD 和 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)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值