Android View绘制 Canvas学习

今天记录一个关于Canvas绘制的小demo,非常简单的一个小功能,在屏幕上绘制一个绿色的矩形框,当手指点击区域在矩形框内部时,矩形框由绿色变为红色,先看下效果图

完整实现代码及相关笔记如下

package com.lollo.custom.canvasdemo;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import androidx.annotation.Nullable;

/**
 * 与预期结果相同：
 *
 * 预期效果：
 *
 * 原来矩形框为绿色,当手指点击到矩形框内部时,矩形框变为红色，
 * 手指抬起时,矩形框又变为绿色
 *
 * 手指从矩形框外某一点,慢慢移动(move事件)手指，当手指移动到
 * 矩形框内部时,矩形框立刻变为红色，手指移出矩形框或者手指抬起
 * 时，矩形框又变为绿色
 */
public class CanvasRectView extends View {

    private Paint mPaint;
    private RectF mRect;
    private float downX = -1;
    private float downY = -1;

    public CanvasRectView(Context context) {
        super(context);
        init();
    }

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

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

    private void init() {
        mPaint = new Paint();
        mPaint.setColor(Color.GREEN);
        mPaint.setAntiAlias(true);
        //绘制空心矩形
        mPaint.setStyle(Paint.Style.STROKE);
        //设置矩形线条宽度 如果设置Style的值为 FILL 或者 FILL_AND_STROKE
        //则此值无效,矩形变为实心
        mPaint.setStrokeWidth(6);
        mRect = new RectF(200,200,800,800);
    }

/*
    //draw()方法也能实现
    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);
        //这里注意：不要在draw方法里创建 RectF()对象
        //应该把RectF对象的创建放到 init()初始化函数里！！！
        //RectF mRect = new RectF(200,200,800,800);
        if(mRect.contains(downX,downY)) {
            mPaint.setColor(Color.RED);
        } else {
            mPaint.setColor(Color.GREEN);
        }
        canvas.drawRect(mRect,mPaint);
    }
*/
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //这里注意：不要在draw方法里创建 RectF()对象
        //应该把RectF对象的创建放到 init()初始化函数里！！！
        //RectF mRect = new RectF(200,200,800,800);
        if(mRect.contains(downX,downY)) {
            mPaint.setColor(Color.RED);
        } else {
            mPaint.setColor(Color.GREEN);
        }
        canvas.drawRect(mRect,mPaint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if(event.getAction() == MotionEvent.ACTION_DOWN) {
            downX = event.getX();
            downY = event.getY();
            //invalidate();
        } else if(event.getAction() == MotionEvent.ACTION_UP) {
            downX = -1;
            downY = -1;
            //invalidate();
        } else if(event.getAction() == MotionEvent.ACTION_MOVE) {
            downX = event.getX();
            downY = event.getY();
            //invalidate();
        }
        invalidate();
        //注意：这里如果不返回 true 手指抬起时矩形框不会改变颜色！！
        //原因：
        /**
         * 因为当 MotionEvent.
         * ACTION_DOWN 消息到来时，系统会判断返回值，当返回 true 时，表示当前控件已经在拦截
         * （消费）这个消息了，所以后续的 ACTION_MOVE、ACTION_UP 消息仍然继续传过来。如
         * 果返回 false（系统默认返回 false），就表示当前控件不需要这个消息，那么后续的
         * ACTION_MOVE、ACTION_UP 消息就不会再传到这个控件。
         */
        //return super.onTouchEvent(event);
        return true;
    }
}

代码虽然简单但涉及到的知识点还是需要关注下,核心思路就是通过Canvas#drawRect()绘制一个矩形框，只需要根据手指的点击或者移动位置动态地改变画笔的颜色，当手指点击到矩形区域或者手指移动到矩形区域时,需要通过 invalidate 触发 onDraw()方法,完成新矩形区域的绘制，需要注意的点也都写在代码里了，欢迎批评指正。