Two ways to achieve a circular picture effect in IOS _ios

Let's take a look at the effect chart ↓

There are many ways to display this effect:

Method One: Use two pictures, as the background picture of the border and the picture in the middle, then use ImageView Cornerradius to do the circle, the specific code is as follows:

BackImageView.layer.cornerRadius = BACKIMAGEVIEW.FRAME.SIZE.WIDTH/2;
BackImageView.layer.masksToBounds = YES;
FrontImageView.layer.cornerRadius = FRONTIMAGEVIEW.FRAME.SIZE.WIDTH/2;
FrontImageView.layer.masksToBounds = YES;

But it is clear that today's protagonist is not the way it is. The above method requires two pictures to complete the round picture with a border, and the next step to introduce the method does not need two pictures, only need a picture can!

Method Two: Using the graphics context, to generate a circular picture with a border, not much to say, the code is as follows:

BorderWidth represents 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 the ring, so that it only shows the part of the ring.

2, the first three lines of code: get the picture with a border overall width and height (because to get a circular picture, so you need width and height of the same), and get an CGSize object left behind with

3, Code:

Uigraphicsbeginimagecontextwithoptions (ImageSize, NO, 0.0);

To open the graphics context, let's look at some of the method declarations in the header file:

Uigraphicsbeginimagecontextwithoptions (cgsize size, BOOL opaque, cgfloat scale)

The first parameter needs to fill in an object, which is the CGSize third row imageSize , that represents the scope of the drawing.

The Boolean value of the second argument indicates whether it is transparent and select No

If the opaque parameter is YES, the alpha channel are ignored and the bitmap is treated as fully

The scale of the third parameter is the proportional factor, and we fill in 0.0, indicating that the screen is calculated as a percentage

If you specify a value of 0.0, the scale factor are set to the scale factor of the the device ' s main screen

4, Code:

Cgcontextref context = Uigraphicsgetcurrentcontext ();

Since you want to use context to draw a picture, of course you have to get the current context object

5, Code:

[BorderColor set];

Let's take a look at this set's header file comment

Sets the fill and stroke colors in the current drawing context

Sets the color of the fill and stroke to the current context. Did you think of the fill in the drawing software? Friends who have used PS should be very clear. The meaning of this line of code is to set the color, to be used to paint the ring ...

6, Code:

CGFloat Bigradius = Imagew * 0.5;
CGFloat CenterX = Bigradius;
CGFloat centery = Bigradius;
Cgcontextaddarc (context, CenterX, CenterY, Bigradius, 0, M_PI * 2, 0);

What does it take to draw a circle normally? Need radius and center, right?

bigRadius With the border of the picture as a whole drawing radius, the circle needs to draw a radius, this is!

centerX and the centerY x and y of the center coordinates.

CGContextAddArc This method represents a circular arc to the current context, and we look at the method declaration of the bottom file

void Cgcontextaddarc (Cgcontextref cg_nullable C, CGFloat x, cgfloat y, cgfloat radius, cgfloat startangle, CGFloat EndAngl e, int clockwise)

Parameters are more, I listed the meaning of its expression:

@param c Context

X of @param x Arc Center Point

Y of the center point of the @param y arc

@param radius of Radius arc (Bigradius)

@param the angle of the starting point of the StartAngle

@param the angle of the endangle end point M_PI * 2 means a week

@param clockwise clockwise draw arc fill 1 counter-clockwise 0

7, Code:

Cgcontextfillpath (context);

Populate the current context, with what padding? Of course, the fill color! Here we get a circular context with a radius of bigRadius color for the fill color

8, Code:

CGFloat Smallradius = bigradius-borderwidth;
Cgcontextaddarc (context, CenterX, CenterY, Smallradius, 0, M_PI * 2, 0);

Meaning and-code 6, add an arc to the current context (a colored circle), where the Smallradius is the radius of the middle picture.

9, Code:

Cgcontextclip (context);

The header file says: Intersect The context's path with the current clip path and use the
Resulting path as the clip path for subsequent rendering operations.

The effect is to clip the current context with the current clipping path (the arc drawn by code 8), and then use the path after the clip (the Arc of Code 8) for subsequent shading operations.

In short, it is to use-code 7-Get the middle part of the circle context for subsequent rendering ...

10, Code:

[Image Drawinrect:cgrectmake (BorderWidth, BorderWidth, Image.frame.size.width, Image.frame.size.height)];

This method is to draw the picture to the current graphics context in the given range-code 9-where the path to the drawing operation has been obtained, that is, the graph retains only the portion of the path within the code 9. Notice that the context has already become a rounded picture with a border!

11, Code:

UIImage *newimage = Uigraphicsgetimagefromcurrentimagecontext ();
Uigraphicsendimagecontext ();

To get a picture from the current context and close the graphics context

It's over here, and we've got a round picture with a border, and from the complexity of the method, method two is more complex, using the graphics context. But they have different meanings when they get a circular picture.

Method one is to use the principle of superposition to get the visual border

Method two completely generates a circular picture with a border

Conclusion

In the daily development of the completion of a function needs to decide how to implement, the same, the above two methods is also, if you want a picture of the circle with a circular two can be used, the above is the entire content of this article, I hope that the development of learning can help.