How to erase part of a Bitmap using PorterDuff Xfermodes and Alpha Mask?

Question

I have an alpha mask and I want to use this mask as a rubber, when user touch on the screen that part of bitmap should be erased as the shape of the alpha mask. I have tried it but it always get the whole bitmap as mask not the alpha part. Later, user will save the bitmap so those erased parts should be transparent.

Here is the code that I use:

    paintMask.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));

    Canvas canvas = new Canvas(bitmapOriginal);
    int sc = canvas.saveLayer(0, 0, width, height, null, Canvas.ALL_SAVE_FLAG);
    canvas.drawBitmap(bitmapOriginal, 0, 0, null);
    canvas.drawBitmap(bitmapMask, 0, 0, paintMask);
    canvas.restoreToCount(sc);

Answer 1

public class DrawingView extends View implements View.OnTouchListener {

    private int x = 0;
    private int y = 0;

    Bitmap bitmap;
    Path circlePath;
    Paint circlePaint;

    private final Paint paint = new Paint();
    private final Paint eraserPaint = new Paint();


    public DrawView(Context context){
        super(context);
        setFocusable(true);
        setFocusableInTouchMode(true);
        this.setOnTouchListener(this);

        // Set background
        this.setBackgroundColor(Color.CYAN);
        bp = BitmapFactory.decodeResource(getResources(), R.drawable.bg);

        // Set bitmap
        bitmap = Bitmap.createBitmap(320, 480, Bitmap.Config.ARGB_8888);
        bitmapCanvas = new Canvas();
        bitmapCanvas.setBitmap(bitmap);
        bitmapCanvas.drawColor(Color.TRANSPARENT);
        bitmapCanvas.drawBitmap(bp, 0, 0, null);

        circlePath = new Path();
        circlePaint = new Paint();
        circlePaint.setAntiAlias(true);
        circlePaint.setColor(Color.BLUE);
        circlePaint.setStyle(Paint.Style.STROKE);
        circlePaint.setStrokeJoin(Paint.Join.MITER);
        circlePaint.setStrokeWidth(4f);

        // Set eraser paint properties
        eraserPaint.setAlpha(0);
        eraserPaint.setStrokeJoin(Paint.Join.ROUND);
        eraserPaint.setStrokeCap(Paint.Cap.ROUND);
        eraserPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
        eraserPaint.setAntiAlias(true);

    }

    @Override
    public void onDraw(Canvas canvas) {

        canvas.drawBitmap(bitmap, 0, 0, paint);
        bitmapCanvas.drawCircle(x, y, 30, eraserPaint);

        canvas.drawPath(circlePath, circlePaint);
    }

    public boolean onTouch(View view, MotionEvent event) {
        x = (int) event.getX();
        y = (int) event.getY();

        bitmapCanvas.drawCircle(x, y, 30, eraserPaint);

        circlePath.reset();
        circlePath.addCircle(x, y, 30, Path.Direction.CW);

        int ac=event.getAction();
        switch(ac){
            case MotionEvent.ACTION_UP:
                Toast.makeText(MainActivity.this, String.valueOf(x), Toast.LENGTH_SHORT).show();
                circlePath.reset();
                break;
        }
        invalidate();
        return true;
    }
}

and in your layout file ...

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#00ff00"
tools:context=".MainActivity">
<DrawingView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/ln1"
    android:orientation="vertical"
    /></LinearLayout>

hope it help