Android：使用Canvas擦除路径时如何保留背景？

问题根源 #

你当前的实现是直接在View的Canvas上使用PorterDuff.Mode.CLEAR进行擦除，而View的Canvas包含了底层背景（比如ImageView的src或background属性），所以橡皮擦会同时清除背景和绘制路径。双View或双Canvas方案没生效，是因为没有正确分离背景层和用户绘制层，导致擦除操作仍然作用于包含背景的画布。

解决方案：分离绘制层与背景层 #

核心思路是用一个独立的Bitmap专门承载用户的所有绘制（画笔和擦除操作），背景则由底层的ImageView或View单独负责。这样擦除操作只会影响用户绘制的Bitmap，不会触碰到底层背景。具体步骤如下：

1. 初始化绘制专用Bitmap #

在View尺寸变化时创建与View同尺寸的Bitmap，作为用户绘制的画布：

private lateinit var drawBitmap: Bitmap
private lateinit var drawCanvas: Canvas

override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
    super.onSizeChanged(w, h, oldw, oldh)
    // 销毁旧Bitmap，创建新的与View同尺寸的绘制画布
    if (::drawBitmap.isInitialized) {
        drawBitmap.recycle()
    }
    drawBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888)
    drawCanvas = Canvas(drawBitmap)
}

2. 修正橡皮擦Paint配置 #

确保橡皮擦的Xfermode仅作用于绘制层，同时关闭硬件加速（部分设备上CLEAR模式在硬件加速下可能异常）：

private fun setUpPaint() {
    // 画笔配置不变
    paintBrush.color = drawColor
    paintBrush.style = Paint.Style.STROKE
    paintBrush.strokeWidth = strokeSize
    paintBrush.strokeCap = Paint.Cap.ROUND
    paintBrush.isAntiAlias = true

    // 修正橡皮擦配置
    paintEraser.style = Paint.Style.STROKE
    paintEraser.strokeWidth = strokeSize
    paintEraser.strokeCap = Paint.Cap.ROUND
    paintEraser.xfermode = PorterDuffXfermode(PorterDuff.Mode.CLEAR)
    paintEraser.isAntiAlias = true
    paintEraser.alpha = 255 // 确保完全不透明，避免擦除不彻底

    paint = paintBrush
    // 关闭硬件加速，避免CLEAR模式异常
    setLayerType(LAYER_TYPE_SOFTWARE, null)
}

3. 重构onDraw逻辑 #

先绘制底层背景，再绘制用户专用的Bitmap和当前预览路径：

override fun onDraw(canvas: Canvas?) {
    super.onDraw(canvas) // 先绘制ImageView的背景或src内容
    canvas?.save()
    // 应用缩放变换
    canvas?.scale(mScaleFactor, mScaleFactor, focusX, focusY)
    // 绘制用户绘制的Bitmap
    canvas?.drawBitmap(drawBitmap, 0f, 0f, null)
    // 绘制当前正在操作的预览路径
    canvas?.drawPath(path, paint)
    canvas?.restore()
}

4. 修正触摸事件与绘制逻辑 #

触摸坐标需要转换为缩放前的原始坐标，并且将完成的路径绘制到专用Bitmap上：

override fun onTouchEvent(event: MotionEvent): Boolean {
    val handled = mGesture.onTouchEvent(event)
    if (isScaling) return handled

    // 将触摸坐标转换为缩放前的原始坐标
    val x = event.x / mScaleFactor
    val y = event.y / mScaleFactor

    when (event.action) {
        MotionEvent.ACTION_DOWN -> {
            path.reset()
            path.moveTo(x, y)
            downX = x
            downY = y
            tracing = true
        }
        MotionEvent.ACTION_MOVE -> {
            if (!tracing) return handled
            path.quadTo(downX, downY, (x + downX) / 2, (y + downY) / 2)
            downX = x
            downY = y
            invalidate()
        }
        MotionEvent.ACTION_UP -> {
            if (tracing) {
                tracing = false
                // 保存路径到列表，并绘制到专用Bitmap
                val stroke = Stroke(Path(path), Paint(paint), strokeSize)
                pathList.add(stroke)
                drawCanvas.drawPath(stroke.path, stroke.paint)
                path.reset()
                invalidate()
            }
        }
    }
    return true
}

5. 补充Stroke数据类 #

在CustomImageView类内部添加数据类存储路径信息：

data class Stroke(val path: Path, val paint: Paint, val strokeSize: Int)

为什么这个方案能解决问题 #

• 绘制层与背景层完全分离：用户的所有绘制（包括擦除）都在独立的Bitmap上进行，底层背景不受任何影响。
• 缩放同步：缩放变换同时作用于绘制Bitmap和预览路径，不会出现双View缩放不同步的问题。
• 擦除精准：PorterDuff.Mode.CLEAR仅清除绘制Bitmap上的像素，不会触碰到底层背景。

内容的提问来源于stack exchange，提问作者Phan Quang Thang