Scratch the screen to display an image in android

Question

i am working on a android project for my assignment. i am trying to make a scratch image application, you know it's like we scratch the screen to get rid the blocking layer to display the image. but the problem is i don't know where to start.

i have searching in stackoverflow's questions that related to this but that's not help. from my search there, i found a clue for this project is using Bitmap.getPixel(int x, int y).

so, in my thought i have to get pixel from bitmap and paint it to canvas. but i don't know how to implement it? or anyone has a better method for this?

Could anyone please help me? Any tutorials on this kind of thing or related topics?

Thanks in advance!

---

here's my sample code:

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    tw = w;
    th = h;
    eraseableBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
    mCanvas = new Canvas(eraseableBitmap);
    Bitmap muteableBitmap = Bitmap.createBitmap(eraseableBitmap.getWidth(), eraseableBitmap.getHeight(), Bitmap.Config.ARGB_8888);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
    static_x = event.getX();
    static_y = event.getY();

    if (event.getAction() == MotionEvent.ACTION_DOWN) {
        touch_start(static_x, static_y);

    } if (event.getAction() == MotionEvent.ACTION_MOVE) {
            touch_move(static_x, static_y);

    } if (event.getAction() == MotionEvent.ACTION_UP) {
            touch_up(); 
        }
    return true;
}

---

Here's the appearance of my project:

Answer 1

Interesting question. My theoretical plan:

You have 2 bitmaps, the 'erasable' bitmap and the 'hidden' bitmap. Erasing pixels from an existing bitmap is not possible because Bitmap's in Android are immutable. So instead of erasing pixels from the 'erasable' bitmap to reveal the bitmap underneath, first draw the 'erasable' bitmap. Then create an empty, mutable Bitmap. Loop over all of the pixels in the 'hidden' bitmap, displaying only where the 'erasable' bitmap has been 'erased'.

Bitmap mutableBitmap = Bitmap.create(erasableBitmap.getWidth(),erasableBitmap.getHeight(), Bitmap.Config.ARGB_8888);

for(Pixel erasedPixel : erasedList)
{
  mutableBitmap.setPixel(x,y, hiddenBitmap.getPixel(erasedPixel.x, erasedPixel.y));
}

...
// in a different file
class Pixel{
  int x, y;

}

you'll have to fill the erasedList yourself.

Once you are done, draw to the canvas like so:

canvas.drawBitmap(0,0,eraseableBitmap);
canvas.drawBitmap(0,0,mutableBitmap);

making sure that you draw the 'erasable' bitmap first so that it is drawn over with the new pixels.

If you need help figuring out how to set the erased pixels, let me know in the comments and I'll help you out.

EDIT

To actually figure out which pixels the user tried to erase: In your view, capture the onTouch event and you'll get a coordinate of where the user touched the screen. Save that to a some sort of map or hashtable and you should be good to go. Create a Pixel object and add it to a global List of pixels.

EDIT 2

To increase the size of the "scratch" what you have to do is a little complicated. You need some way to create an area around the x,y point touched to also count as erased. A circle would be ideal but it will be easier to use a square.

for(Pixel erasedPixel: erasedList)
{
  //it's actually more complicated than this, since you need to check for boundary conditions.
  for(int i = -SQUARE_WIDTH/2; i < SQUARE_WIDTH/2; i++){
    for(int j = -SQUARE_WIDTH/2; j < SQUARE_WIDTH/2; j++){
      mutableBitmap.setPixel(erasedPixel.x+i, erasedPixel.y+j, hiddenBitmap.getPixel(erasedPixel.x+i, erasedPixel.y+j));
    }
  }
}

Answer 2

I created a library call WScrarchView where you can implement scratch view just few lines in layout xml. Hope this can help those who are still looking for the similar solution https://github.com/winsontan520/Android-WScratchView

of course you are welcome to copy the codes and customize based on your needs :)