iOS drawing--uibezierpath and Core Graphics

Objective

The iOS system itself provides two sets of drawing frames, the uibezierpath and Core graphics. The former belongs to Uikit, in fact, the core graphics framework on the path of the further encapsulation, so it is relatively simple to use. But after all, the core graphics are closer to the bottom, so it's more powerful.

Uibezierpath

You can create a vector-based path, such as an ellipse or a rectangle, or a shape that consists of multiple lines and curved segments.

With Uibezierpath, you can only draw in the current context, so if you are currently in the Uigraphicsbeginimagecontextwithoptions function or DrawRect: method, You can draw directly using the method provided by Uikit. If you hold a context: parameter, you must convert the context parameter to the current context before using the method provided by Uikit. Fortunately, the call to the Uigraphicspushcontext function makes it easy to convert the context: parameter into the current one, and remember to call the Uigraphicspopcontext function to restore the context in the end.

In short: We generally use Uibezierpath in the Drawrecrt method of rewriting this situation. The steps for its drawing are this:

• 1. Override the DrawRect method. But we do not need to get the current context for ourselves.
• 2. Create the Uibezierpath object of the corresponding graphic and set some cosmetic properties;
• 3. Render, finish drawing.

- (void) DrawRect: (CGRect) rect//1. Overriding the DrawRect method {uibezierpath* apath = [uibezierpath bezierpathwithrect:cgrectmake ( 20, 20, 100, 50)]; //2. Create a corresponding Uibezierpath object //3. Set some cosmetic properties Apath.linewidth = Span class= "Hljs-number" >8.0; Apath.linecapstyle = Kcglinecapround; Apath.linejoinstyle = Kcglinecapround; uicolor *color = [uicolor colorwithred: 0 green:0 blue:0.7 Alpha:1]; [Color set]; [Apath stroke]; //4. Render, Finish drawing}            

There is not much to understand, mainly because some code needs memory. So do not write code, directly look at someone's code: drawing 1-uibezierpath

Core Graphics

This is a drawing-specific API family, which is often referred to as quartz or quartz 2D. The Core graphics are the cornerstone of all the drawing features on iOS, including Uikit.

To figure out the core graphics, you need to understand the following questions:

* * 1. Drawing requires cgcontextref**
Cgcontextref is the graphical context. As you can see, our drawing requires a vector or output target, which is used to display the drawing information and decide where the output of the drawing will be. Can be image of the metaphor context is like an "artboard", we have to draw the graph onto this artboard. Therefore, the drawing must first have a context.
* * 2. How to get the context? **

The first approach is to take advantage of the graphical context that cocoa generates for you. When you subclass a UIView and implement your own drawrect: Once the drawRect： method is called, Cocoa will create a graphical context for you, and all of your drawing operations on the graphics context will appear on the UIView.

The second method is to create a context for a picture type. UIGraphicsBeginImageContextWithOptionsThe function is called to get a graphical context for working with the picture. With this context, you can draw on it and generate pictures. The calling UIGraphicsGetImageFromCurrentImageContext function gets a UIImage object from the current context. Remember to call the function to close the graphics context after all your drawing operations UIGraphicsEndImageContext .

Simply:

• Rewrite the method of UIView drawRect , in this method can get context;
• The calling UIGraphicsBeginImageContextWithOptions method gets the context;

* * 3. Note * *
Not to mention drawing, you have to rewrite the DrawRect method, just because generally we use the DrawRect method to get the context of the way.

* * When the 4.drawRect method triggers * *

• 1. When the view is first displayed on the screen;
• 2. When you invoke the setNeedsDisplay或者setNeedsDisplayInRect: method of view.

Steps:

• 1. First obtain the contextual context in the DrawRect method;
• 2. Draw graphics (lines, graphics, pictures, etc.);
• 3. Set some modifier properties;
• 4. Render to context, complete the drawing.

#import"CustomView.h"@implementationcustomview-(void) DrawRect: (CGRect) rect{1. Get contextCgcontextref CTX =Uigraphicsgetcurrentcontext ();--------------------------Solid Circle2. DrawingCgcontextaddellipseinrect (CTX,CGRectMake (10,10,50,50)); [[Uicolor Greencolor] set];3. RenderingCgcontextfillpath (CTX);--------------------------Hollow CircleCgcontextaddellipseinrect (CTX,CGRectMake (70,10,50,50)); [[Uicolor Redcolor] set];Cgcontextstrokepath (CTX);--------------------------EllipseLike the ellipse and the circle method, the ellipse just sets a different length and widthCgcontextaddellipseinrect (CTX,CGRectMake (130,10,100,50)); [[Uicolor Purplecolor] set];Cgcontextfillpath (CTX);--------------------------LineCgcontextmovetopoint (CTX,20,80);Starting pointCgcontextaddlinetopoint (CTX,Self.frame.size.width-10,80);EndCgcontextsetrgbstrokecolor (CTX, 0, 1.0, 0, 1.0); color [[Uicolor Redcolor] set];Both ways to set the color can beCgcontextsetlinewidth (CTX,2.0f);The width of the lineCgcontextsetlinecap (CTX, Kcglinecapround);Starting point and focus filletCgcontextsetlinejoin (CTX, Kcglinejoinround);Corner filletCgcontextstrokepath (CTX);Render (the line can only be drawn hollow, cannot call Cgcontextfillpath (CTX);)--------------------------TrianglesCgcontextmovetopoint (CTX,10,150);First pointCgcontextaddlinetopoint (CTX,60,100);A second pointCgcontextaddlinetopoint (CTX,100,150);A third point [[Uicolor Purplecolor] set];Cgcontextclosepath (CTX);Cgcontextstrokepath (CTX);--------------------------RectangleCgcontextaddrect (CTX,CGRectMake (20,170,100,50)); [[Uicolor Orangecolor] set];Cgcontextstrokepath (CTX); HollowCgcontextfillpath (CTX);--------------------------ArcCgcontextaddarc (CTX,200,170,M_PI, M_pi_4,0);Cgcontextclosepath (CTX);Cgcontextfillpath (CTX);--------------------------textNSString *str =@ "You are in the Red House, I am traveling in the West";Nsmutabledictionary *dict = [Nsmutabledictionary dictionary]; dict[Nsforegroundcolorattributename] = [Uicolor Whitecolor];Text color dict[Nsfontattributename] = [Uifont systemfontofsize:14]; //font [str drawinrect:cgrectmake ( 20, 250, 300, 30) withattributes:dict]; //--------------------------picture uiimage *img = [uiimage imagenamed:@" Yingmu "]; //[img Drawaspatterninrect:cgrectmake (20, 280, 300, 300)];//Multiple Tiles //[img Drawatpoint:cgpointmake (20, 280)];//Draw to a specified point, the size of the picture shows how big [img Drawinrect:cgrectmake (20, 280, 80, 80)]; //extrude}             

Drawing what can it do? Why do you study it?

We use drawings to customize some of the view controls to meet our individual needs.
If the custom view control: We can subclass a uiview and then rewrite its DrawRect method. Graphically draw in DrawRect to implement a custom control and complete a cool, personalized control.

End

On the drawing, in fact, I am currently in contact with the project very little, but will definitely come into contact. Like this less common but more important content, I think to do a preliminary understanding, and then comb the summary, to the final depth of understanding. So write this article.

Wang66
Links: https://www.jianshu.com/p/8e6e960eea7d
Source: Pinterest
Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.

iOS drawing--uibezierpath and Core Graphics