自定义涂鸦视图：轻松实现绘制和橡皮擦功能

2023-07-10 10:12:57

释放创意：探索 Android 涂鸦功能的魅力

在 Android 应用中，涂鸦功能已经成为一项不可或缺的需求，它赋予用户在画布上自由挥洒创意的能力。从简单的笔记应用到复杂的图形编辑器，涂鸦功能无处不在，为各种应用增添了一抹艺术气息。

自定义视图：通往涂鸦之路

为了实现涂鸦功能，自定义视图扮演着举足轻重的角色。它是基于 View 类的扩展视图，允许开发者创建具有独特行为和外观的视图。借助自定义视图，我们可以实现绘制和擦除操作，为用户提供互动式的绘图体验。

绘制：描绘创意的画笔

绘制是涂鸦功能的核心。在自定义视图中，通过重写 onDraw() 方法，开发者可以利用 Canvas 对象绘制各种图形，例如线条、矩形和圆形。

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    // 设置画笔属性
    Paint paint = new Paint();
    paint.setColor(Color.BLACK);
    paint.setStrokeWidth(5f);

    // 绘制线条
    canvas.drawLine(startX, startY, endX, endY, paint);
}

橡皮擦：擦除错误，焕发生机

橡皮擦功能与绘制功能相辅相成。通过在自定义视图中重写 onTouchEvent() 方法，开发者可以检测用户的触摸事件，并在用户触摸屏幕时擦除相应区域。

@Override
public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            // 开始擦除
            erasePath.moveTo(event.getX(), event.getY());
            return true;
        case MotionEvent.ACTION_MOVE:
            // 继续擦除
            erasePath.lineTo(event.getX(), event.getY());
            invalidate();
            return true;
        case MotionEvent.ACTION_UP:
            // 停止擦除
            canvas.drawPath(erasePath, erasePaint);
            erasePath.reset();
            return true;
    }

    return super.onTouchEvent(event);
}

示例代码：涂鸦的实践

为了帮助读者更好地理解涂鸦功能的实现，我们提供了以下示例代码，可以通过导入 GitHub 上的完整示例代码进行尝试。

// DoodleView.java：自定义视图类
public class DoodleView extends View {

    // 定义画布、画笔和路径
    private Canvas mCanvas;
    private Paint mPaint;
    private Paint mErasePaint;
    private Path mPath;
    private Path mErasePath;

    public DoodleView(Context context) {
        super(context);

        // 初始化画笔属性
        mPaint = new Paint();
        mPaint.setColor(Color.BLACK);
        mPaint.setStrokeWidth(5f);

        // 初始化橡皮擦画笔属性
        mErasePaint = new Paint();
        mErasePaint.setColor(Color.WHITE);
        mErasePaint.setStrokeWidth(10f);

        // 初始化路径
        mPath = new Path();
        mErasePath = new Path();
    }

    // 重写 onDraw() 方法，绘制路径
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawPath(mPath, mPaint);
        canvas.drawPath(mErasePath, mErasePaint);
    }

    // 重写 onTouchEvent() 方法，处理触摸事件
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                // 开始绘制
                mPath.moveTo(event.getX(), event.getY());
                return true;
            case MotionEvent.ACTION_MOVE:
                // 继续绘制
                mPath.lineTo(event.getX(), event.getY());
                invalidate();
                return true;
            case MotionEvent.ACTION_UP:
                // 停止绘制
                invalidate();
                return true;
        }

        return super.onTouchEvent(event);
    }
}