Robert Robert - 11 months ago 324
Android Question

Android canvas: draw transparent circle on image

I am creating a pixel-hunting game. So my activity shows an ImageView. And I want to create a hint "show me where is the object". For this I need to blur whole image except a circle around a point where the object is located. Instead of blur I can show a just semitransparent black background.
There is there is no problem to draw a semitransparent rectangle on the Canvas.
But I don't know how to crop a transparent circle from it.
The result should look like like this:
enter image description here

Please help me to achieve same result on Android SDK.

Answer Source

So finally I managed to do this.

Firstly I draw a semitransparent black rectangle on whole view. After that using PorterDuff.Mode.CLEAR I cut a transparent circle to show cat's position.

I had problem with PorterDuff.Mode.CLEAR: firstly I was getting a black circle instead of a transparent one.

Thanks to Romain Guy's comments here: comment here I understood that my window is opaque and I should draw on another bitmap. And only after draw on view's canvas.

Here is my onDraw method:

private Canvas temp;
private Paint paint;
private Paint p = new Paint();
private Paint transparentPaint;

private void init(){
    temp = new Canvas(bitmap);
    Bitmap bitmap = Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(), Bitmap.Config.ARGB_8888);
    paint = new Paint();
    transparentPaint = new Paint();
    transparentPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));

protected void onDraw(Canvas canvas) {
    temp.drawRect(0, 0, temp.getWidth(), temp.getHeight(), paint);
    temp.drawCircle(catPosition.x + radius / 2, catPosition.y + radius / 2, radius, transparentPaint);
    canvas.drawBitmap(bitmap, 0, 0, p);