今天记录一个关于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()方法,完成新矩形区域的绘制,需要注意的点也都写在代码里了,欢迎批评指正。