Several ways to draw circular pictures in Android

There are often some requirements in development, such as displaying avatars, displaying some special requirements, and displaying pictures in rounded corners or circles or other shapes. But often the pictures we have or the pictures obtained from the server are square. At this time, we need to process the pictures ourselves and process them into the required shapes. Just as there is more than one way to write the word "卉" in fennel beans, after my research, there is more than one way to draw special pictures. I found three ways. Let me tell you one by one.

Use Xfermode to intersect two images

By searching for information, I found that in Android, you can set the Xfermode of the brush, that is, the intersection mode, to set the display mode after the two images intersect. The specific mode is shown in the figure below. The source code can be found in Android apidemo. (SRC is the image we want to draw on the target image, that is, the original image, and DST is the target image)

As can be seen from the above figure, if we need to draw a circular image, we can first draw a circle of the same size as the target on the canvas, then select SRC_IN for xfermode, and then draw our avatar or other pictures. We can also draw our picture first, then draw the circle, but select DST_IN for xfermode. Both can achieve the desired effect. The sample code is as follows:

 Paint p = new Paint();
 p.setAntiAlias( true ); //anti-aliasing  
 p.setColor(Color.BLACK);
 p.setStyle(Paint.Style.STROKE);
 Canvas canvas = new Canvas(bitmap); //bitmap is our original image, such as avatar  
 p.setXfermode( new PorterDuffXfermode(Mode.DST_IN)); //Because we drew the picture first, so DST_IN  
 int radius = bitmap.getWidth; //Assume the image is square  
 canvas.drawCircle(radius, radius, radius, p); //r=radius, circle center (r, r)  

The above is a simple example. You can actually create more effects based on the above 16 modes. In addition, as long as you give us an intersecting graph, our graph can be displayed in the same shape as the graph.

Achieve graphics of specified shapes by clipping the canvas area

Canvas in Android provides methods such as ClipPath, ClipRect, ClipRegion for clipping. Through different combinations of Path, Rect, and Region, Android can support clipping regions of almost any shape. Therefore, we can obtain a region of almost any shape, and then draw on this region to get the image we want. Let's take a look at the example.

 int radius = src.getWidth() / 2 ; //src is the image we want to draw, the same as the bitmap in the previous example.  
 Bitmap dest = Bitmap.createBitmap(src.getWidth(), src.getHeight(), Bitmap.Config.ARGB_8888);
 Canvas c = new Canvas(dest);
 Paint paint = new Paint();
 paint.setColor(Color.BLACK);
 paint.setAntiAlias( true );
 Path path = new Path();
 path.addCircle(radius, radius, radius, Path.Direction.CW);
 c.clipPath(path); //Clipping area  
 c.drawBitmap(src, 0 , 0 , paint); //Draw the picture  

Using BitmapShader

Let’s look at the examples first

 int radius = src.getWidth() / 2 ;
 BitmapShader bitmapShader = new BitmapShader(src, Shader.TileMode.REPEAT,
 Shader.TileMode.REPEAT);
 Bitmap dest = Bitmap.createBitmap(src.getWidth(), src.getHeight(), Bitmap.Config.ARGB_8888);
 Canvas c = new Canvas(dest);
 Paint paint = new Paint();
 paint.setAntiAlias( true );
 paint.setShader(bitmapShader);
 c.drawCircle(radius,radius, radius, paint);

Shader is the renderer of the brush. In essence, this method is actually drawing a circle, but the rendering uses our picture, and then we can get the specified shape. But I think this is not suitable for drawing very complex graphics, but in terms of memory consumption, it should be much smaller than the first method. At the same time, setting Shader.TileMode.MIRROR can also achieve a mirror effect, which is also excellent.

The above are three methods of implementation. All three methods can draw a lot of shapes. Of course, if you encounter very very very very complex situations, I recommend using the first method. At this time, you can ask the artist to give you a last-shift shape diagram, saving yourself the trouble of drawing it with code. You can choose according to your needs.

On github, CustomShapeImageView is drawn using the first method we mentioned. RoundedImageView and CircleImageView are completed using bitmapshader. Of course, there may be some other controls and some other implementation methods. If you know, please reply and tell me ＾＿＾.

Original address: Several ways to draw circular pictures in Android