Making touched area of bitmap to transparent

Question

I have 2 bitmaps on a canvas. ontouching the top bitmap , the lower bitmap should be visible and the top bitmap should be erased. I took help from this thread. Make certain area of bitmap transparent on touch. I can see the bottom bitmap through the circle, but the top bitmap is not erasing on touching. How to erase the the bitmap on touching. I know that this question has been asked before, but i am not able to solve the problem.

this is my code:

public class MainActivity extends Activity {

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(new Panel(this));
}

class Panel extends View {
    Bitmap bmOverlay;
    private Paint mPaint;
    Bitmap bm2, bm1;
    Bitmap bitmap;
    Canvas pcanvas;

    int x = 0;
    int y = 0;
    int r = 0;

    public Panel(Context context) {
        super(context);
        setFocusable(true);
        setBackgroundColor(Color.TRANSPARENT);

        // setting paint
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.TRANSPARENT);
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT));
        mPaint.setAntiAlias(true);

        bm1 = BitmapFactory.decodeResource(getResources(), R.drawable.aa);
        bm2 = BitmapFactory.decodeResource(getResources(), R.drawable.aaa);

        bmOverlay = Bitmap.createBitmap(bm1.getWidth(), bm1.getHeight(),
                Bitmap.Config.ARGB_8888);
        pcanvas = new Canvas(bmOverlay);

    }

    @Override
    protected void onDraw(Canvas canvas) {
        // draw a circle that is erasing bitmap
        super.onDraw(canvas);
        canvas.drawBitmap(bm2, 0, 0, null);
        pcanvas.drawBitmap(bm1, 0, 0, null);
        pcanvas.drawCircle(x, y, 40, mPaint);
        canvas.drawBitmap(bmOverlay, 0, 0, null);

    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        // set parameter to draw circle on touch event

        switch (ev.getAction()) {

        case MotionEvent.ACTION_DOWN: {

            x = (int) ev.getX();
            y = (int) ev.getY();
            invalidate();

            break;
        }

        case MotionEvent.ACTION_MOVE: {

            x = (int) ev.getX();
            y = (int) ev.getY();
            invalidate();
            break;

        }

        case MotionEvent.ACTION_UP:

            break;

        }
        return true;
    }



}
}

score 1 · Accepted Answer · answered Dec 22 '14 at 08:29

1

You need to make two changes to get the top bitmap to erase. First, make it a mutable Bitmap so that you can change the contents as it is erased:

Bitmap temp = BitmapFactory.decodeResource(getResources(), R.drawable.aa);
bm1 = temp.copy(Bitmap.Config.ARGB_8888, true); // mutable = true

Be careful about out of memory errors here.

Secondly, in your onDraw function, update the bitmap contents by writing back to bm1:

@Override
protected void onDraw(Canvas canvas) {
    // draw a circle that is erasing bitmap
    super.onDraw(canvas);
    canvas.drawBitmap(bm2, 0, 0, null);
    pcanvas.drawBitmap(bm1, 0, 0, null);
    pcanvas.drawCircle(x, y, 40, mPaint);
    canvas.drawBitmap(bmOverlay, 0, 0, null);

    // erase the top bitmap:
    Canvas bitmapCanvas = new Canvas(bm1);
    bitmapCanvas.drawBitmap(bm2, 0, 0, null);
    bitmapCanvas.drawBitmap(bmOverlay, 0, 0, null);
}

Also, to stop a circle being erased in the top left corner when you start the app, create a boolean with a default value of false and set it inside onTouchEvent when you have valid co-ordinates, and check it before calling drawCircle.

answered Dec 22 '14 at 08:29

samgak

23,944
4
60
82

when i save the bmoverlay, the saved image has a black dot on the position where it was touched last. How can i remove this black dot from the saved image???? – Madhav Dec 23 '14 at 13:34
Are trying to save a screenshot? Try saving bm1 instead of bmOverlay. – samgak Dec 24 '14 at 01:37
if i try saving bm1 only the first image gets saved. i have to save bmoverlay which comprises of both the images. The problem is just that there is a black dot on the area which was touched last. the rest of the image is erased properly. – Madhav Dec 24 '14 at 05:28
call pcanvas.drawBitmap(bm1, 0, 0, null); (but don't call drawCircle) immediately before saving bmOverlay and the black dot should hopefully be gone. – samgak Dec 24 '14 at 05:54
Make sure you are saving bmOverlay and not bm1 – samgak Dec 24 '14 at 06:02
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/67593/discussion-between-madhav-and-samgak). – Madhav Dec 24 '14 at 06:03

Making touched area of bitmap to transparent

1 Answers1