使用 canvas 的橡皮擦效果

Question

我有一个扩展视图的自定义视图 class。我正在使用过度使用的 onDraw 方法在 canvas 上涂鸦。我有一个 POJO 列表，其中包括 Path 和 Paint，借助它们我可以重新创建绘制的旧路径，如下所示：

@Override
protected void onDraw(Canvas canvas){
for (POJO pojo : pojoList {
  canvas.drawPath(pojo.path, pojo.paint);
}
canvas.drawPath(path, paint);
}

我想实现擦除功能，它应该像正确的擦除一样工作。我知道一种方法是写入位图并使用 setXfermode 来清除它可以正常工作。但是像素化在较小分辨率的设备上看起来并不好。我不想使用白色颜料，因为在这个视图下面我有一个 ImageView，所以将它着色为白色也会影响 ImageView。非常感谢任何解决此问题的想法或片段。

Answer 1

这很好用。如果有人找到更好的解决方案。请更新

private Context mContext;
private ArrayList<Draw> mDrawList;
private Paint mPaint;
private Path mPath;
private boolean isErase;
private float mX, mY;
private static final float TOUCH_TOLERANCE = 4;

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

public EraseDoodleView(Context context, AttributeSet attributeSet) {
    super(context, attributeSet);
    init(context);
}

private void init(Context context) {
    mContext = context;
    mDrawList = new ArrayList<Draw>();
    mPath = new Path();
    setupPaint();
    setLayerType(View.LAYER_TYPE_HARDWARE, mPaint);
}

private void setupPaint() {
    mPaint = new Paint();
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeJoin(Paint.Join.ROUND);
    mPaint.setStrokeCap(Paint.Cap.ROUND);
    mPaint.setFilterBitmap(true);
    mPaint.setAntiAlias(true);
    mPaint.setStrokeWidth(4);
    mPaint.setColor(ContextCompat.getColor(mContext, android.R.color.black));
    if (isErase) {
        mPaint.setXfermode(new PorterDuffXfermode(
                PorterDuff.Mode.CLEAR));
        mPaint.setStrokeWidth(16);
    }
}

public void setErase(boolean isErase) {
    this.isErase = isErase;
    setupPaint();
}

public boolean getErase() {
    return this.isErase;
}

@Override
protected void onDraw(Canvas canvas) {
    for (Draw draw : mDrawList) {
        canvas.drawPath(draw.path, draw.paint);
    }
}

@Override
public boolean onTouchEvent(MotionEvent event) {

    float x = event.getX();
    float y = event.getY();

    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            touchStart(x, y);
            invalidate();
            break;
        case MotionEvent.ACTION_MOVE:
            touchMove(x, y);
            invalidate();
            break;
        case MotionEvent.ACTION_UP:
            touchUp();
            invalidate();
            break;
    }
    return true;
}

private void touchStart(float x, float y) {
    mPath.reset();
    mPath.moveTo(x, y);
    mDrawList.add(new Draw(mPath, mPaint));
    mX = x;
    mY = y;
}
private void touchMove(float x, float y) {
    float dx = Math.abs(x - mX);
    float dy = Math.abs(y - mY);
    if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
        mPath.quadTo(mX, mY, (x + mX)/2, (y + mY)/2);
        mX = x;
        mY = y;
    }
}

private void touchUp() {
    mPath.lineTo(mX, mY);
    mPath = new Path();
}


class Draw {
    Path path;
    Paint paint;

    public Draw(Path path, Paint paint) {
        this.paint = paint;
        this.path = path;
    }
}

使用 canvas 的橡皮擦效果

Eraser effect using canvas

java

android

canvas

eraser