概述

在Android中，我们经常会需要去绘制一些自己需要的控件，所以继承自View的自定义View就产生了。这篇文章主要介绍在View中的重要类，Canvas类。

Canvas的作用

Canvas是自定义View中几个最重要的类之一，可以理解为画布，但是我理解下来，这只是单一的图层，每次Canvas绘制时其实都是在canvas类所定义出的一个图层上进行绘制图形，一旦canvas变化，则图层也发生变化，图层变化之前绘制的结果不变，但之后的绘制结果会以新的图层为基准进行绘制

创建一个自定义View

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

import androidx.annotation.Nullable;

/**
 * create by xu.tian
 *
 * @date 2021/8/22
 */
public class MyView extends View {

    public static final String TAG = MyView.class.getSimpleName();

    private Paint paint = new Paint();
    private int width ;
    private int height ;

    public MyView(Context context) {
        super(context);
    }

    public MyView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public MyView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public MyView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    @Override
    protected void onDraw(Canvas canvas){
        super.onDraw(canvas);
        Log.d(TAG,"onDraw");
    }
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w,h,oldw,oldh);
        width = w ;
        height = h ;
        Log.d(TAG,"onSizeChanged width ---> "+w+"\n"+
                "height ---> "+h+"\n"+
                "oldw ---> "+oldw+"\n"+
                "oldh ---> "+oldh);
    }
}

绘制线条(Line)

@Override
    protected void onDraw(Canvas canvas){
        super.onDraw(canvas);
        Log.d(TAG,"onDraw");
        // 设置画笔的宽度
        paint.setStrokeWidth(10f);
        // 设置画笔的颜色
        paint.setColor(Color.RED);
        // 设置画笔的Style
        paint.setStyle(Paint.Style.FILL);
        // 绘制一根线
        canvas.drawLine(0f,0f,(float)width,(float)height,paint);
    }

在这里绘制线条调用Canvas.drawLine(float startX, float startY, float stopX, float stopY,Paint paint)方法，参数分别如下

• startX 起点的x坐标
• startY 起点的y坐标
• stopX 终点的x坐标
• stopY 终点的y坐标

• paint 画图的画笔类
  所以我们这里绘制了一条从左上角到右下角的线条，运行结果如下

  
  device-2021-08-22-145051.png

绘制一个矩形(Rect,RectF)

 @Override
    protected void onDraw(Canvas canvas){
        super.onDraw(canvas);
        Log.d(TAG,"onDraw");
        // 设置画笔的宽度
        paint.setStrokeWidth(10f);
        // 设置画笔的颜色
        paint.setColor(Color.RED);
        // 设置画笔的Style
        paint.setStyle(Paint.Style.FILL);
        // 绘制一个矩形
        Rect rect = new Rect(width/2-100,height/2-200,width/2+100,height/2+200);
        canvas.drawRect(rect,paint);
    }

绘制矩形调用canvas.drawRect(RectF rect, Paint paint)，矩形Rect的构造参数的四个参数分别为左边界，上边界，右边界，下边界的值,单位为px，RectF与Rect不同之处在于构造参数的类型一个全为float,一个全为int，运行结果如下

device-2021-08-22-145619.png

绘制一个椭圆(Oval)

@Override
    protected void onDraw(Canvas canvas){
        super.onDraw(canvas);
        Log.d(TAG,"onDraw");
        // 设置画笔的宽度
        paint.setStrokeWidth(10f);
        // 设置画笔的颜色
        paint.setColor(Color.RED);
        // 设置画笔的Style
        paint.setStyle(Paint.Style.FILL);
        // 绘制一个椭圆
        RectF rect = new RectF(width/2-100,height/2-200,width/2+100,height/2+200);
        canvas.drawOval(rect,paint);
    }

绘制椭圆主要调用drawOval(RectF oval, Paint paint)，以一个矩形的边界来绘制一个椭圆,运行结果如下

device-2021-08-22-150049.png

绘制一个圆(Circle)

@Override
    protected void onDraw(Canvas canvas){
        super.onDraw(canvas);
        Log.d(TAG,"onDraw");
        // 设置画笔的宽度
        paint.setStrokeWidth(10f);
        // 设置画笔的颜色
        paint.setColor(Color.RED);
        // 设置画笔的Style
        paint.setStyle(Paint.Style.FILL);
        // 绘制一个圆
        canvas.drawCircle(width/2,height/2,200,paint);
    }

绘制圆主要使用Canvas.drawCircle(float cx, float cy, float radius, Paint paint),

• cx 原中心的x坐标
• cy 原中心的y坐标
• radius 圆的半径

• paint 画笔对象
  运行结果如下

  
  device-2021-08-22-150447.png

绘制一段路径(Path)

@Override
    protected void onDraw(Canvas canvas){
        super.onDraw(canvas);
        Log.d(TAG,"onDraw");
        // 设置画笔的宽度
        paint.setStrokeWidth(10f);
        // 设置画笔的颜色
        paint.setColor(Color.RED);
        // 设置画笔的Style
        paint.setStyle(Paint.Style.FILL);
        // 绘制线条路径
        Path path = new Path();
        path.moveTo(width/2,height/2-200);
        path.lineTo(width/2-300,height/2+300);
        path.lineTo(width/2+300,height/2+300);
        path.close();
        canvas.drawPath(path,paint);
    }

绘制Path的方法比较多，这里只简单示例绘制线条路径构建一个三角形的用法，后续会再详细介绍绘制别的类型路径的用法，该例运行结果如下

device-2021-08-22-151847.png

绘制文字

@Override
    protected void onDraw(Canvas canvas){
        super.onDraw(canvas);
        Log.d(TAG,"onDraw");
        // 设置画笔的宽度
        paint.setStrokeWidth(10f);
        // 设置画笔的颜色
        paint.setColor(Color.RED);
        // 设置画笔的Style
        paint.setStyle(Paint.Style.FILL);
        //文字大小
        paint.setTextSize(50);
        // 文字左右位置
        paint.setTextAlign(Paint.Align.CENTER);
        // 文字是否带下划线
        paint.setUnderlineText(false);
        canvas.drawText("My First TextView ",width/2,height/2,paint);

        paint.setColor(Color.YELLOW);
        canvas.drawLine(0,height/2,width,height/2,paint);
    }

这里我们绘制了一段文字和一根线段这里是为了演示出Canvas中的文字的绘制方法只能实现水平方向上的居中显示，垂直方向上的垂直是需要我们再进行实现的，绘制文字有很多个，我们这里只简单调用了设置起始点的绘制方法，关于文字的绘制其实内容还是比较多的，这里我们就只简单的介绍，后续有时间会专门出一个文字绘制的文章，该示例运行结果如下

device-2021-08-22-152758.png

总结

今天总结了Canvas中一些简单图形的绘制，下篇我们介绍Canvas中的一些其他内容。