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:
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 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,
, 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 a
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 a
object, which is the
of the third line
, 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
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?
is the overall drawing radius of the picture with a border, Drawing a circle requires a radius, This is it!
is the x and y of the center coordinates
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
Populate the current context, What fill?is of course the fill color! Here we get a radius of
, 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
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
- Three ways to achieve the frosted glass effect of iOS and the blur effect of pictures
- The road to iOS development-imitation Netease drawer effect
- The realization of animation effect when IOS waits
- IOS uses UICollectionView to achieve infinite carousel effect
- Introduction of ViewController Transition Effect Implementation in iOS Development
- The effect of the pull-down zoom-in and pull-up blur of the view in iOS development
- IOS custom prompt popup box achieves UIAlertView-like effect
- Wave effect in iOS
- python - you may need to restart the kernel to use updated packages error
- php - coincheck api authentication doesn't work
- php - i would like to introduce the coincheck api so that i can make payments with bitcoin on my ec site
- [php] i want to get account information using coincheck api
- the emulator process for avd pixel_2_api_29 was killed occurred when the android studio emulator was started, so i would like to
- i want to call a child component method from a parent in vuejs
- python 3x - typeerror: 'method' object is not subscriptable
- dart - flutter: the instance member'stars' can't be accessed in an initializer error
- xcode - pod install [!] no `podfile 'found in the project directory