I am working on a drawing application for Android. Now I want to implement an eraser to erase parts of the downloaded bitmap using touch input and make the bitmap transparent along the path of the finger.
A very good example of what I'm trying to achieve is shown in the Steamy Window app for Android. Steamy Window simulates a foggy window where the user can wipe parts of the fog using touch input.
Any suggestions how could I implement this feature?
UPDATE: I have posted the most important sections of my current code below. I am not very happy with this for the following reasons:
The drawing is pretty sluggish. What can I improve here?
I am looking for a way to use an alpha mask to set the transparency of pixels / alpha pixels since I want to simulate a brush. Any suggestions on how this can be achieved?
public DrawView (Context context, String imageName) {
super (context);
// Get the overlay image and its dimensions
Bitmap overlayImageOriginal = BitmapFactory.decodeResource (
getResources (), R.drawable.overlay);
width = overlayImageOriginal.getWidth ();
height = overlayImageOriginal.getHeight ();
// Get a copy of the overlay image and recycle the original
overlayImage = overlayImageOriginal.copy (Config.ARGB_8888, true);
overlayImageOriginal.recycle ();
// Get background image of this level
int resId = getResources (). getIdentifier (imageName, "drawable",
"com.xxx");
backgroundImage = BitmapFactory.decodeResource (getResources (), resId);
// Copy pixels
overlayImagePixels = new int [width * height];
overlayImage.getPixels (overlayImagePixels, 0, width, 0, 0, width,
height);
getHolder (). addCallback (this);
_thread = new DrawThread (getHolder (), this);
setFocusable (true);
}
@Override
public boolean onTouchEvent (MotionEvent event) {
synchronized (_thread.getSurfaceHolder ()) {
switch (event.getAction ()) {
case MotionEvent.ACTION_DOWN:
touchStart (event.getX (), event.getY ());
return true;
case MotionEvent.ACTION_MOVE:
touchMove (event.getX (), event.getY ());
return true;
case MotionEvent.ACTION_UP:
touchStop ();
return true;
}
return false;
}
}
@Override
public void onDraw (Canvas canvas) {
// draw the image to guess
canvas.drawBitmap (backgroundImage, 0, 0, null);
// apply user input to the overlay-image
setRegionTransparency ((int) mTouchX, (int) mTouchY, 20, 0);
// draw the overlay-image (hiding the image to guess)
canvas.drawBitmap (overlayImage, 0, 0, null);
}
/ **
*
* @param posX
* @param posY
* @param radius
* @param alpha - 0: full transparent, 255: full opaque
* /
private void setRegionTransparency (int posX, int posY, int radius, int alpha) {
int left = posX - radius;
int right = posX + radius;
int top = posY - radius;
int bottom = posY + radius;
int color = 0;
// onDraw () is called before any user input
// -> assume 0/0 as invalid arguments
if (posX == 0 && posY == 0) {
return
}
// TODO currently only rectangular area is supported
// but we need circular
// we should use a pre-made alpha mask with smoothed edges
// we should take into account: pressure and / or duration of touch
for (int y = top; y = 0 && y = 0 && x = TOUCH_TOLERANCE || dy> = TOUCH_TOLERANCE) {
mPath.quadTo (mTouchX, mTouchY, (x + mTouchX) / 2, (y + mTouchY) / 2);
mTouchX = x;
mTouchY = y;
}
}
}