Draw a transparent circle outside

Question

I have a mapview that I want to draw a circle to focus on this area. But I want the circle to be turned upside down. That is, instead of filling inside the circle, it is transparent, and everything else is filled. Check out this image of what I mean (http://i.imgur.com/zxIMZ.png). The upper half shows what I can do with a normal circle. The “inverted” circle is shown below.

I tried to search, but it was hard to find what I want. Does anyone know how I could do something like this?

Answer 1

My answer is rather late, but may help someone achieve this. Here is an example of how to make a translucent look with a transparent circle corresponding to the size of the smallest size, located in the center with a small margin. It can be placed as an overlay for any kind.

/* * Copyright (c) 2015 Singularex Inc. */ package your_package.ui.widget; import android.annotation.TargetApi; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.PorterDuff; import android.graphics.PorterDuffXfermode; import android.graphics.RectF; import android.os.Build; import android.util.AttributeSet; import android.widget.LinearLayout; import android.widget.RelativeLayout; import your_package.R; /** * @author Victor Kosenko */ public class RadiusOverlayView extends LinearLayout { private Bitmap windowFrame; public RadiusOverlayView(Context context) { super(context); } public RadiusOverlayView(Context context, AttributeSet attrs) { super(context, attrs); } public RadiusOverlayView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @TargetApi(Build.VERSION_CODES.LOLLIPOP) public RadiusOverlayView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { super(context, attrs, defStyleAttr, defStyleRes); } @Override protected void dispatchDraw(Canvas canvas) { super.dispatchDraw(canvas); if (windowFrame == null) { createWindowFrame(); // Lazy creation of the window frame, this is needed as we don't know the width & height of the screen until draw time } canvas.drawBitmap(windowFrame, 0, 0, null); } protected void createWindowFrame() { windowFrame = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888); // Create a new image we will draw over the map Canvas osCanvas = new Canvas(windowFrame); // Create a canvas to draw onto the new image RectF outerRectangle = new RectF(0, 0, getWidth(), getHeight()); Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); // Anti alias allows for smooth corners paint.setColor(getResources().getColor(R.color.map_radius_outer)); // This is the color of your activity background paint.setAlpha(84); osCanvas.drawRect(outerRectangle, paint); paint.setColor(Color.TRANSPARENT); // An obvious color to help debugging paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT)); // A out B http://en.wikipedia.org/wiki/File:Alpha_compositing.svg float centerX = getWidth() / 2; float centerY = getHeight() / 2; float radius = Math.min(getWidth(), getHeight()) / 2 - getResources().getDimensionPixelSize(R.dimen.view_margin_small2); osCanvas.drawCircle(centerX, centerY, radius, paint); } @Override public boolean isInEditMode() { return true; } @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { super.onLayout(changed, l, t, r, b); windowFrame = null; // If the layout changes null our frame so it can be recreated with the new width and height } } 

And this is how it looks in my case:

Answer 2

You can create a new BufferedImage, fill it with gray, and then delete the circle in which you want.

And then, draw a BufferedImage on top of your view.

 BufferedImage img = new BufferedImage(sizeX, sizeY, BufferedImage.TYPE_INT_RGBA); Graphics2D g = img.createGraphics(); int ovalX = 50; int ovalY = 70; int ovalRadius = 20; /* Draw the grey rectangle */ g.setColor(Color.GRAY); g.fillRect(0, 0, sizeX, sizeY); /* Enable Anti-Alias */ g.setRenderingHint(RenderingHints.HINT_ANTIALIAS, RenderingHints.VALUE_ANTIALIAS_ON); /* Clear the circle away */ g.setComposite(AlphaComposite.CLEAR, 1.0f); g.fillOval(ovalX - ovalRadius, ovalY - ovalRadius, 2 * ovalRadius, 2 * ovalRadius); g.dispose(); 

Answer 3

Do as you would a normal circle, but with the location of the addition and the radius of the addition. Like:

 {0-Lat, (Long-180)%180, 20037508.34-Radius} 

Answer 4

This can be achieved with a polygon covering the entire map with a hole. Please check this answer .