Recently, I want to create a transparent circular overlay view, which is often used when doing applications. As shown below:

I think what most people usually use is to design an image like this, which is easy and easy, but there is a problem that the image is dead, and the transparent circle in the middle can’t move. I’ve compiled the following four tips,

One, is the above said with pictures

This method is that the picture is dead and not easy to move.

Two, is their own painting, (this way should be said to be the most simple, but also can follow one’s inclinations)

Create a custom view with a transparent background and draw a circle on the view

So implementation

If you need a transparent circle with radius B, do the following: first define Paint mPaint = new Paint(); Then define the color you want

mPaint.setAntiAlias(true);
mPaint.setColor(ContextCompat.getColor(context, R.color.jasper));
mPaint.setStyle(Paint.Style.STROKE);
Copy the code

Redefine your brush width mPaint. SetStrokeWidth (a+b); A is the height of the top of the circle, and B is the radius of the circle, which is actually half the height of the canvas

The key to the

DrawCircle (x, y, b, mPaint); If you draw a circle, you’re going to get the wrong size of the circle, and you’re going to have to expand the radius of the circle to get the one you want, which is radius B, so how do you expand it? I’m essentially changing the radius to the size of the original radius plus half the brush width. DrawCircle (x, y, raduis, mPaint); drawCircle(x, y, raduis, mPaint); So the radius of the circle is b.

The nice thing about this is that you can draw the circle anywhere you want, and it can be anything else.

Third, is also painting, according to the user said, take path difference set can be

Define brush

val mPaint = Paint() mPaint.isAntiAlias = true mPaint.color = ContextCompat.getColor(context!! , R.color.colorWhite) mPaint.style = Paint.Style.FILL mPaint.strokeWidth = 5fCopy the code

Then open the drawing and define two paths, mPath and mPath1.

var mPath = Path() var mPath1 = Path() val rectf = RectF(0F, 0F, getDisplayWidth().toFloat(), getDisplayHeight().toFloat()) mPath.addRect(rectf, Path.Direction.CW) mPath1.addCircle(x, y, mRadius, Path.direction. CW) val Path = mPath. Minus (mPath1)// Canvas? .drawPath(path, mPaint)Copy the code

Four, or painting, this way complex point

Define the brush to fill up the outside of the circle, leaving the circle unpainted, and that’s it. This needs to be done with path. The first thing to do is define the brush

val mPaint = Paint() mPaint.isAntiAlias = true mPaint.color = ContextCompat.getColor(context!! , R.color.colorWhite) mPaint.style = Paint.Style.FILL mPaint.strokeWidth = 5fCopy the code

And then I start drawing, like my center is in the middle of the width,

MPath. MoveTo (getDisplayWidth() / 2-mradius, mMarginTop + mRadius)// The first point is on the left edge of the center of the circle mPath. LineTo (0F, MMarginTop + mRadius)// Move the second dot to the far left mPath. LineTo (0F, 0F)// Move the third dot to the top left of the screen mPath. LineTo ((getDisplayWidth() / 2).tofloat (), LineTo ((getDisplayWidth() / 2).tofloat (), mmargintop.tofloat ())) Circle edges mpath.cubicto ((getDisplayWidth() / 2).tofloat (), mmarginTop.tofloat (), getDisplayWidth() / 2-mradius, Mmargintop.tofloat (), getDisplayWidth() / 2-mradius, mMarginTop + mRadius) .drawPath(mPath, mPaint)Copy the code

That’s what it looks like

In fact, it is not so round after drawing it, but I still need to change and draw a slightly wider circle, which is more troublesome, so I suggest using the second one.

Four, in fact, there is a method, but this method has requirements on the layout, there are defects will be talked about below

For example, in my last post, there is a very useful page guide tool guideView that draws a transparent graph. The first is defining the brush

mPaint.isAntiAlias = true
mPaint.style = Paint.Style.FILL_AND_STROKE
mPaint.xfermode = PorterDuffXfermode(PorterDuff.Mode.CLEAR)
Copy the code

And then just draw the shape you want to canvas, okay? .drawcircle (x,y,mRaduis,mPaint) You can also define a translucent background setBackgroundColor(contextCompat.getColor (context!! , R.color.translucence))

So the view that’s defined like this is going to have that effect. However, the view cannot be placed directly in the layout. It is a black opaque shape. It only works when placed in a popupWindow or dialog. (I don’t know why at this point, I tried to make all the activities transparent backgrounds, but still nothing worked.)

I think the above three methods are enough. Later, I will create a library, which can draw transparent pictures of any graphics at any position by setting the padding, margin, radius or graphics selection. Now I don’t have time, I have a project in progress.

All right, that’s it for today.