Several Methods to draw circular images in Android

Several Methods to draw circular images in Android

There are often some requirements during development, such as displaying the Avatar and displaying some special requirements, and displaying the image as rounded or circular or other shapes. However, images on our hands or images obtained from servers are usually square. At this time, we need to process the image as needed. For example, there is more than one method of "NLP" in the text of Xiangxiang bean. After my research, there is no way to draw special pictures. I have found three methods and I will hear them one by one.

Intersection of Two Images Using Xfermode

By searching for information, we found that in android, you can set the Xfermode of the paint brush to the intersection mode, and then set the display mode after the intersection of the two images. For details about the mode, see. The source code can go to android apidemo. (SRC is the source image to be drawn to the target image, that is, the source image. DST is the target image)

We can see that if we need to draw a circular graph, we can first draw a circle of the same size as the target on the canvas, and then select SRC_IN for xfermode, let's talk about our profile picture or other pictures. You can also draw a graph first and then draw a circle. However, you must select DST_IN for xfermode. Both of them can achieve the desired effect. The sample code is as follows:

 
 

  
  
Paint p = new Paint ();
  
  
P. setAntiAlias (true); // de-sawtooth
  
  
P. setColor (Color. BLACK );
  
  
P. setStyle (Paint. Style. STROKE );
  
  
Canvas canvas = new Canvas (bitmap); // bitmap is our original image, such as the Avatar
  
  
P. setXfermode (new porterduxfermode (Mode. DST_IN); // DST_IN because the figure is drawn first
  
  
Int radius = bitmap. getWidth; // assume that the image is square.
  
  
Canvas. drawCircle (radius, p); // r = radius, center (r, r)
 
 

The above is a simple example. Based on the above 16 modes, you can actually make more results. In addition, as long as you give an intersection chart, the shape of the chart can be displayed.

Specifies the shape of the image by cropping the canvas area

In Android, Canvas provides methods such as ClipPath, ClipRect, and ClipRegion for cropping. By using different combinations of Path, Rect, and Region, Android supports cropping areas of almost any shape. Therefore, we can get almost any shape of the area, and then draw a picture on this area, we can get the image we want, directly look at the example.

 
 

  
  
Int radius = src. getWidth ()/2; // src indicates the image to be drawn, which is the same as bitmap in the 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, Path. Direction. CW );
  
  
C. clipPath (path); // specifies the cropping area.
  
  
C. drawBitmap (src, 0, 0, paint); // upload the picture
 
 

Use BitmapShader

Let's look at the example 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 paint brush Renderer. In essence, this method is actually a circle, but the rendering uses our image, and then we can get the specified shape. However, I think this is not suitable for drawing complex images, but the memory consumption should be much smaller than the first one. In addition, setting Shader. TileMode. MIRROR can also achieve the mirroring effect, which is also excellent.

The above three methods can be used to draw a lot of shapes. Of course, when there are very, very, and very complex situations, I suggest using the first method, at this time, the artist can give a last-shift shape chart, saving himself from coding. You can choose one based on 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, you can reply and tell me ^_^.

Original article address: several methods to draw a circular image in android