First look at the renderings ↓

There are many ways to show the effect:

Method one:use two pictures, As the background picture and middle picture of the border,Then use the cornerradius of imageview to make a circle, the specific code is as follows:


But obviously, Today's protagonist is not the method above.The above method requires two pictures to complete the circle picture with borders.The method to be introduced next does not require two pictures. All it takes is a picture!

Method two:use the graphics context, Generate a circular picture with a border, Ado, code show as below:

// borderwidth indicates the width of the border
cgfloat imagew=image.size.width + 2 * borderwidth;
cgfloat imageh=imagew;
cgsize imagesize=cgsizemake (imagew, imageh);
uigraphicsbeginimagecontextwithoptions (imagesize, no, 0.0);
cgcontextref context=uigraphicsgetcurrentcontext ();
// bordercolor represents the color of the border
[bordercolor set];
cgfloat bigradius=imagew * 0.5;
cgfloat centerx=bigradius;
cgfloat centery=bigradius;
cgcontextaddarc (context, centerx, centery, bigradius, 0, m_pi * 2, 0);
cgcontextfillpath (context);
cgfloat smallradius=bigradius-borderwidth;
cgcontextaddarc (context, centerx, centery, smallradius, 0, m_pi * 2, 0);
cgcontextclip (context);
[image drawinrect:cgrectmake (borderwidth, borderwidth, image.frame.size.width, image.frame.size.height)];
uiimage * newimage=uigraphicsgetimagefromcurrentimagecontext ();
uigraphicsendimagecontext ();

Next explain the code above

1.First is the principle:Draw a circle,width borderwidth , and then put the picture into this ring, Make it show only part of the ring.

2.The first three lines of code:Get the overall width and height of the picture with a border (because to get a round picture, So you need the same width and height), and get acgsize The object is left behind


uigraphicsbeginimagecontextwithoptions (imagesize, no, 0.0);

Means turn on the graphics context, Let's look at the method declarations in some header files:

uigraphicsbeginimagecontextwithoptions (cgsize size, bool opaque, cgfloat scale)

The first parameter needs to be filled in acgsize object, which is theof the third line imagesize , which indicates the scope of drawing graphics

The Boolean value of the second parameter indicates whether it is transparent, Select no

if the opaque parameter is yes, the alpha channel is ignored and the bitmap is treated as fully opaque

The scale of the third parameter is the scale factor, We fill in 0.0, which means it is calculated based on the proportion of the screen

if you specify a value of 0.0, the scale factor is set to the scale factor of the device "s main screen


cgcontextref context=uigraphicsgetcurrentcontext ();

Since we are going to use the context to draw the picture, Of course you have to get the current context object


[bordercolor set];

First look at the header file comments for this set

// sets the fill and stroke colors in the current drawing context

Set the fill and stroke colors for the current context, Speaking of the fill color, did you think of the fill in the drawing software?Friends who have used ps should be very clear.To put it plainly, the meaning of this line of code is to set the color, Color the ring later...


cgfloat bigradius=imagew * 0.5;
cgfloat centerx=bigradius;
cgfloat centery=bigradius;
cgcontextaddarc (context, centerx, centery, bigradius, 0, m_pi * 2, 0);

What do you need to draw a circle in normal terms?Requires radius and center, right?

bigradius is the overall drawing radius of the picture with a border, Drawing a circle requires a radius, This is it!

centerx andcentery is the x and y of the center coordinates

cgcontextaddarc This method means to draw an arc to the current context, Let's look at the method declaration of the header file

void cgcontextaddarc (cgcontextref cg_nullable c, cgfloat x, cgfloat y, cgfloat radius, cgfloat startangle, cgfloat endangle, int clockwise)

More parameters, I list the meaning of each:

@param c context

@param x x of arc center point

@param y y of the center point of the arc

@param radius radius of the arc (bigradius)

@param startangle the angle of the starting point

@param endangle The angle of the end point m_pi * 2 means one week

@param clockwise Draw circular arc clockwise fill 1 counterclockwise fill 0


cgcontextfillpath (context);

Populate the current context, What fill?is of course the fill color! Here we get a radius ofbigradius , the circular context whose color is the fill color


cgfloat smallradius=bigradius-borderwidth;
cgcontextaddarc (context, centerx, centery, smallradius, 0, m_pi * 2, 0);

The meaning is the same as -code 6-, add an arc to the current context (a colored circle), Where smallradius is the radius of the intermediate image


cgcontextclip (context);

The header file says this:intersect the context "s path with the current clip path and use the

resulting path as the clip path for subsequent rendering operations.

The idea is to clip the current context with the current clipping path (the arc drawn by code 8), Then use the edited path (the arc obtained by code 8) for subsequent coloring operations.

To put it simply, use the middle part of the circle context obtained by -Code 7- for subsequent drawing...


[image drawinrect:cgrectmake (borderwidth, borderwidth, image.frame.size.width, image.frame.size.height)];

This method is to draw the picture into the current graphics context with a given range. -Code 9- has obtained the path for drawing operations, That is, This picture only keeps the parts in the path in -Code 9-. Note that the context has now become a circular picture with a border!


uiimage * newimage=uigraphicsgetimagefromcurrentimagecontext ();
uigraphicsendimagecontext ();

Get the picture from the current context and close the graphics context

Even if it is over here, We got a round picture with borders, In terms of method complexity, method two is more complicated. Graphics context is used. But in terms of getting round pictures, they have different meanings.

The first method is to use the principle of superposition to get a visual border with

Method two completely generates a circular picture with a border

Concluding remarks

  • Previous Analysis of package and import of personal understanding of java entry concepts
  • Next Summary of JavaScript lodash common usage series