IOS Customized personal Avatar _ios

This article introduces the iOS customization of their own personality head method, share for everyone to reference, the specific content as follows

One, the effect chart
1. Cut a picture into a circle
2, around the picture to display the specified width and color of the border

Second, the realization of ideas
1, the effect of the picture is mainly composed of two parts of different sizes

• Blue background area, size equal to the size of the picture plus the size of the border
• Picture area, size equal to the size of the picture
  

2, draw a circular background area, fill with the border color
3, draw a circular picture area, setting does not show the excess part
Third, the realization step
1, load need to display the picture

UIImage *image = [UIImage imagenamed:@ "The name of the picture in the resource"];

2, initialization of the use of variables

The width and height of the picture
cgfloat imagewh = image.size.width;
Width of the border
cgfloat border = 1;
Background area of the wide-high
cgfloat OVALWH = imagewh + 2 * border;

3, open the graphics context (size of the background area of the size)

Set the dimensions of the graphics context
cgsize size = Cgsizemake (OVALWH, OVALWH);
Open Graphics Context
uigraphicsbeginimagecontextwithoptions (size, NO, 0);

4. Draw the background area

Draw closed circular paths
uibezierpath *path = [Uibezierpath bezierpathwithovalinrect:cgrectmake (0, 0, OVALWH, OVALWH)];
Sets the fill color
[[Uicolor Bluecolor] set];
Render the area that is drawn
[path fill];

5, draw the picture area

Draw enclosed circular area
uibezierpath *clippath = [Uibezierpath bezierpathwithovalinrect:cgrectmake (Border, border, IMAGEWH, IMAGEWH)];
Set the content beyond the area cut (not shown)
[Clippath Addclip];
See picture drawn into a rounded area, starting from point (border, border)
[image drawatpoint:cgpointmake (Border, border)];

6, from the graphics context to take out the drawing of the picture

UIImage *clipimage = Uigraphicsgetimagefromcurrentimagecontext ();

7, display the picture on the ImageView

Self.imageView.image = Clipimage;

8. Close the graphics context

Uigraphicsendimagecontext ();

The above is the entire content of this article, I hope to help you learn.