Android的绘制详解(Canvas、Paint、Path等)

转载请注明：https://blog.csdn.net/feather_wch/article/details/79783182

View绘制详解

版本: 2018/4/3-1

Canvas

1、View的自定义绘制包含哪些部分

1. 方式：重写绘制方法（onDraw）
2. Canvas的绘制类方法：drawXXX()-关键参数Paint
3. Canvas的辅助类方法： cipXXX()-范围裁切和几何变换-Matrix
4. 使用不同绘制方法来控制遮盖关系

2、Canvas的方法分类

1. 颜色绘制
2. 图形绘制

3、Canvas颜色绘制-drawColor/drawRGB/drawARGB

        //纯色
        canvas.drawColor(Color.CYAN);
        //具有透明度
        canvas.drawColor(Color.parseColor("#5500aa00"));
        //通过RBG值设置颜色(范围：0~255)
        canvas.drawRGB(255, 0, 0);
        //通过ARGB值设置颜色
        canvas.drawARGB(100, 0, 0, 255);

4、Canvas图形绘制-drawXXX

1、圆形

        //蓝色圆
        Paint paint = new Paint();
        paint.setColor(Color.BLUE);
        canvas.drawCircle(200, 200, 180, paint);
        //空心的线宽为10的圆
        paint.reset();
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(30); //单位为像素
        canvas.drawCircle(600, 200, 180, paint);
        //开启抗锯齿的圆（抗锯齿会导致图形的失真）
        paint.reset();
        paint.setStyle(Paint.Style.FILL);
        paint.setAntiAlias(true);
        canvas.drawCircle(200, 580, 180, paint);

2、矩形

        //1. 绘制填充型矩形
        Paint paint = new Paint();
        paint.setStyle(Paint.Style.FILL);
        canvas.drawRect(0, 0, 300, 200, paint);
        //2. 通过Rect绘制矩形(Rect参数为整数)
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(20);
        Rect rect = new Rect(320, 0, 700, 150);
        canvas.drawRect(rect, paint);
        //3. 通过RectF绘制矩形
        RectF rectF = new RectF(0, 255.4f, 288.88f, 466.66f);
        paint.setColor(Color.parseColor("#88880000"));
        paint.setStyle(Paint.Style.FILL_AND_STROKE);
        canvas.drawRect(rectF, paint);

        //4. 绘制圆角矩形
        paint.setColor(Color.MAGENTA);
        paint.setStyle(Paint.Style.FILL);
        // API >= 21
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            //第4\5参数分别为圆角在横向和纵向的半径
            canvas.drawRoundRect(320, 250, 650, 450, 20, 20, paint);
        }else{
            rectF = new RectF(320, 250, 650, 450);
            //第2\3参数分别为圆角在横向和纵向的半径
            canvas.drawRoundRect(rectF, 20, 20, paint);
        }

3、点

        //1. BUII 方形原点
        Paint paint = new Paint();
        paint.setColor(Color.BLUE);
        paint.setStrokeCap(Paint.Cap.BUTT);
        paint.setStrokeWidth(50);
        canvas.drawPoint(60, 60, paint);
        //2. SQUARE 方点
        paint.setColor(Color.RED);
        paint.setStrokeCap(Paint.Cap.SQUARE);
        canvas.drawPoint(200, 60, paint);
        //3. ROUND 圆点
        paint.setColor(Color.GRAY);
        paint.setStrokeCap(Paint.Cap.ROUND);
        canvas.drawPoint(60, 200, paint);
        //4. 多个点-1(两个数组成一点)
        paint.setColor(Color.CYAN);
        paint.setStrokeWidth(30);
        float[] points = {
  60, 400, 140, 400, 220, 400, 300, 400};
        canvas.drawPoints(points, paint);
        //5. 多个点-2(会去除前offest个float数值，并按照count取接下来相应数量的float数值)
        float[] points2 = {
  60, 500, 140, 500, 220, 500, 300, 500};
        canvas.drawPoints(points2, 2, 4, paint);

4、椭圆

        Paint paint = new Paint();
        //1. 绘制椭圆
        RectF rectF = new RectF(50, 50, 350, 200);
        canvas.drawOval(rectF, paint);
        //2. API >= 21 才可以用
        paint.setColor(Color.BLUE);
        canvas.drawOval(50, 300, 350, 550, paint);

5、线

        Paint paint = new Paint();
        paint.setStrokeWidth(20);
        //1. 一条线
        canvas.drawLine(10, 10, 300, 100, paint);
        //2. 一组线
        float[] lines = {
  10, 110, 300, 110,
                         100, 50, 100, 300};
        paint.setColor(Color.RED);
        canvas.drawLines(lines, paint);
        //3. 一组线(去除offest个float数值，再选取count个float数值作为线的数组)
        float[] lines2 = {
  10, 210, 200, 210,
                          50, 150, 50, 300,
                          40, 300, 200, 340};
        paint.setColor(Color.GREEN);
        canvas.drawLines(lines2, 4, 8, paint); //没有画第一条线，只有后面两条

6、弧线和扇形

        Paint paint = new Paint();
        //类似于椭圆等API >= 21时才可以用类似API(否则用RectF版本)
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.BLACK);
        canvas.drawArc(50, 50, 400, 300, //所在椭圆的四个顶点
                10, //以X轴正方向为0度，此处为10度
                130, //扇形划过的度数，相对于X轴正方向 = 10度+130度=140度
                false, //是否连接到圆心(true=扇形；false=弧线)
                paint);
        //2. 填充 + 连接到圆心
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.RED);
        canvas.drawArc(450, 50, 800, 300, 10, 130, true, paint);
        //3. 勾线 + 不连接到圆心
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(Color.BLUE);
        paint.setStrokeWidth(20);
        canvas.drawArc(50, 450, 400, 700, 10, 130, false, paint);
        //4. 勾线 + 连接到圆心
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(Color.GREEN);
        paint.setStrokeWidth(20);
        canvas.drawArc(450, 450, 800, 700, 10, 130, true, paint);

7、自定义图形：Path

        //1. 获取路径
        Path path = new Path();