iOS Development quzrtz2d 10: Drawing of circular pictures and drawing of framed circular pictures

One: Drawing of a circular picture

@interfaceViewcontroller () @property (weak, nonatomic) Iboutlet Uiimageview*Imagev;@end@implementationViewcontroller- (void) viewdidload {[Super viewdidload]; /** * Uibezierpath: Draw a path to construct a graphics context based on a path*/    //0. Loading picturesUIImage *image = [UIImage imagenamed:@"Ali Avatar"]; //1. Turn on the same size context as the original imageUigraphicsbeginimagecontextwithoptions (Image.size, NO,0); //2. Set a circular cropping area//2.1 Draw a circleUibezierpath *path = [Uibezierpath bezierpathwithovalinrect:cgrectmake (0,0, Image.size.width, Image.size.height)]; //2.2. Set the circular path to the clipping area[Path Addclip];//crop out beyond the cropping area//3. Draw the picture into context (the content is cropped out of the clipping area)[Image Drawatpoint:cgpointzero]; //4. Remove the image from the contextUIImage *newimage =Uigraphicsgetimagefromcurrentimagecontext (); //5. Close the contextUigraphicsendimagecontext (); Self.imageV.image=NewImage; }@end

Cut the picture ideas.

Opens a picture context.

The size of the context remains the same as the original picture. To prevent the picture from being stretched and placed.

Adds a circular clipping area above the context. The radius of the circular cropping area is as large as the width of the picture.

Draw the picture you want to crop into the picture context.

Remove the image from the context.

Closes the context.

1. How do I set a circular path?

Uibezierpath *path = [Uibezierpath bezierpathwithovalinrect:

cgrectmake (0, 0, Image.size.width, image.size.width)];

 

2. How do I set a path to the clipping area?

[path Addclip];

Two: Circular picture drawing with border

#import <UIKit/UIKit.h>@interface  UIImage (image)  /* * * Create a circular picture with a border * *  @param borderw     Border Width *  @param bordercolor Border color * @param image       to add a border picture * *  
    */+ (UIImage *) Imagewithborder: (cgfloat) Borderw color: (Uicolor *) bordercolor Image: (UIImage *) Image; @end

#import "uiimage+image.h"@implementationUIImage (image)+ (UIImage *) Imagewithborder: (cgfloat) Borderw color: (Uicolor *) bordercolor Image: (UIImage *) image{//0. Loading pictures//UIImage *image = [UIImage imagenamed:@ "Ali Avatar"]; //1. Determine the width of the border//cgfloat borderw = 5; //2. Open a contextCgsize size = Cgsizemake (Image.size.width +2* Borderw, Image.size.height +2*borderw); Uigraphicsbeginimagecontextwithoptions (Size, NO,0); //3. Draw a great circle and show itUibezierpath *path = [Uibezierpath bezierpathwithovalinrect:cgrectmake (0,0, Size.width, Size.Height)]; [BorderColorSet];    [Path Addclip]; [path fill];//to automatically add a path to the context//4. Draw a small circle and set the small circle to the clipping areaUibezierpath *clippath =[Uibezierpath bezierpathwithovalinrect:cgrectmake (Borderw, Borderw, Image.size.width, Image.size.height)]; [Clippath Addclip];//The path is automatically added to the context, and the path over the clipping area is cut off directly, and this method cuts out the part that is larger than the big circle//5. Draw the picture into context, drawatpoint the image size and image size[Image Drawatpoint:cgpointmake (Borderw, BORDERW)]; //6. Remove the image from the contextUIImage *newimage =Uigraphicsgetimagefromcurrentimagecontext (); //7. Close the contextUigraphicsendimagecontext (); returnnewimage;}@end

Concrete Realization Idea:

1. Assume that the border width is borderw

2. The size of the open picture context should be the width of the original image plus twice times the borderw, so that the purpose of the opening is to keep the original picture distorted.

3. Add a circular fill path above the context. Position starting from 0, 0 o'clock, the width is as large as the context size. Sets the color of the border to set.

4. Continue to add a circular path to the context, which is a clipping path.

Its x, Y starts from borderw. The width and height are as large as the width of the original picture, respectively.

Sets the drawn path to the clipping area.

5. Draw the original path to the context. The location of the drawing is the same as the clipping area, and X, Y is drawn from border.

6. Remove the image from the context state.

7. Close the context state.

iOS Development quzrtz2d 10: Drawing of circular pictures and drawing of framed circular pictures