iOS Drawing Tutorials (Personal learning Summary)

iOS Drawing tutorial: http://www.cocoachina.com/applenews/devnews/2014/0115/7703.html

This blog post is to comb the learning process of the framework, the top link is Cocoachina tutorial, more detailed

iOS supports two sets of graphics API families: Core Graphics/quartz and OpenGL ES

The path is used to describe a 2D geometric shape consisting of a sequence line and a Bézier curve

There are also handy functions for creating simple paths, such as rectangles and ellipses, in the Core graphics. For more complex paths, you must create them yourself with the functions provided by the core graphics framework

The Bézier curve is the French mathematician "Bessel" found in the work that any curve can be defined by the position of the point at both ends of the control line tangent to it.

Bézier curve

The first of two methods to create radians

void Cgcontextaddarc (Cgcontextref C, CGFloat x,//center x coordinate cgfloat y,//x coordinate of the center cgfloat radius,//half of Circle Diameter cgfloat startangle,//Start Radian cgfloat endangle,//end radian int clockwise//0 for clockwise, 1 for counterclockwise);

The second Kind

void Cgcontextaddarctopoint (Cgcontextref C, cgfloat x1,//x-coordinate of endpoint 1 cgfloat y1,//y-coordinate of endpoint 1 cgfloat x2,//x-coordinate of endpoint 2 Cgflo At Y2,//y-coordinate of Endpoint 2 cgfloat radius//RADIUS); CurvesDraw a curve, usually a straight line, and then define several control points to bend the line. Three-time curve function void Cgcontextaddcurvetopoint (Cgcontextref C, CGFloat cp1x,//Control point 1 x coordinate cgfloat cp1y,//Control point 1 y-coordinate cgfloat cp2x, Control point 2 x coordinate cgfloat cp2y,//Control point 2 y-coordinate cgfloat x,///end of line x coordinate cgfloat y//Line end y-coordinate); quadratic curve function void Cgcontextaddquadcurvetopoi NT (cgcontextref C, CGFloat CPX,//control point x coordinate cgfloat cpy,//Control point Y coordinate cgfloat x,//end of line x coordinate cgfloat y//end of line y coordinate); ellipsesvoid Cgcontextaddellipseinrect (Cgcontextref context, CGRect rect//a rectangle); If the rectangle is a square, then the drawing is a circle execution function appears to be current Point does not change, no specific tests have been rectanglesvoid Cgcontextaddrect (Cgcontextref C, CGRect rect); One-time drawing of multiple rectangles void cgcontextaddrects (cgcontextref C, const CGRect rects[], size_t count); It is important to note that the draw rectangle has some special, the current point does not occur Change Creating a PathCall function Cgcontextbeginpath Start creating the path, line call function Cgcontextmovetopoint set the starting point and start drawing the path you want to draw, notice the points: 1.Lines, arcs, and curves, are from current Point starts at 2. If you want to close a path, call the function Cgcontextclosepath to connect the current and starting points to 3. When painting arcs, Quartz draws a line from point to starting Point4. There is no third line when you draw a rectangle. 5. After you create the path, you must call the painting function fill or stroke the path, or you will not draw the above stuff on the corresponding device "6. When you start creating a new path, use the function Cgcontextbeginpath. The correlation functions and data types of the reuse paths are supported by two large drawing frames and three ways to get a graphical context (DrawRect:, Drawrect:incontext:, uigraphicsbeginimagecontextwithoptions). Then we have 6 kinds of drawing forms. If you're a little confused, don't be afraid, I'll explain these 6 things next. Without worrying about specific drawing commands, you just have to focus on how the context is created and whether we're using Uikit or core Graphics. The first form of drawing:In UIView's Subclass method DrawRect: Draw a blue circle, using Uikit to complete the drawing task in the current context that cocoa gives us.

1. -(void) DrawRect: (cgrect) rect {
3. uibezierpath* p = [Uibezierpathbezierpathwithovalinrect:cgrectmake (0,0,100,100)];
5. [[Uicolor Bluecolor] setfill];
7. [P fill];
9. }

second form of drawing: Use the core graphics to draw a blue circle.

1. -(void) DrawRect: (cgrect) rect {
3. Cgcontextref con = Uigraphicsgetcurrentcontext ();
5. Cgcontextaddellipseinrect (Con, CGRectMake (0,0,100,100));
7. Cgcontextsetfillcolorwithcolor (Con, [Uicolor Bluecolor]. Cgcolor);
9. Cgcontextfillpath (con);
11. }

The first of these two methods is to use the Uibezierpath method to automatically draw a graph in the current view.

The second approach is to use the core graphics to draw the context after you have drawn cgcontextref

The third form of drawing: I will implement the drawing task in the Drawlayer:incontext: Method of the UIView subclass. Drawlayer:incontext: Method is a proxy method that paints the contents of a layer. To be able to invoke the Drawlayer:incontext: method, we need to set the proxy object for the layer. Note, however, that the UIView object should not be set as the delegate object for the display layer, because the UIView object is already a proxy object for the implicit layer, and setting it to another layer's delegate object will cause problems. The lightweight approach is to write a proxy class that is responsible for drawing shapes. Declare the following code in the MyView.h file:

1. @Interface Mylayerdelegate:nsobject
3. @end

Then implement the interface code in the MYVIEW.M file:

1. @implementation Mylayerdelegate
3. -(void) Drawlayer: (calayer*) layer Incontext: (cgcontextref) CTX {
5. Uigraphicspushcontext (CTX);
7. uibezierpath* p = [Uibezierpath bezierpathwithovalinrect:cgrectmake (0,0,100,100)];
9. [[Uicolor Bluecolor] setfill];
11. [P fill];
13. Uigraphicspopcontext ();
15. }
17. @end

Put the implementation code of the proxy class directly under the #import code of the myview.m file, so it feels as if you are using a private class to complete the drawing task (although this is not a private class). It is important to note that the context we are referencing is not the current context, so in order to be able to use uikit, we need to turn the context of the reference into the current context. Because the layer's proxy is a assign memory management policy, it is not possible to assign a Mylayerdelegate instance object to the layer proxy as a local variable. Here you choose to add an instance variable in MYVIEW.M because the instance variable defaults to strong:

1. @Interface MyView () {
3. Mylayerdelegate* _layerdeleagete;
5. }
7. @end

Use this layer proxy:

1. MyView *myview = [[MyView alloc] Initwithframe:cgrectmake (0, 0, 320, 480)];
3. Calayer *mylayer = [Calayer layer];
5. _layerdelegate = [[Mylayerdelegate alloc] init];
7. Mylayer.delegate = _layerdelegate;
9. [Myview.layer Addsublayer:mylayer];
11. [MyView Setneedsdisplay]; //Call this method, Drawlayer:incontext: Method will be called.

The fourth form of drawing:Use the core graphics to do the same in the Drawlayer:incontext: method, with the following code:

1. -(void) Drawlayer: (calayer*) Lay Incontext: (Cgcontextref) con {
3. Cgcontextaddellipseinrect (Con, CGRectMake (0,0,100,100));
5. Cgcontextsetfillcolorwithcolor (Con, [Uicolor Bluecolor]. Cgcolor);
7. Cgcontextfillpath (con);
9. }

Finally, the use of uigraphicsbeginimagecontextwithoptions is demonstrated and a UIImage object is generated from the context. The code that generates the UIImage object does not have to wait for some methods to be called or in the UIView subclass to do so. The fifth form of drawing:Using the Uikit implementation:

1. Uigraphicsbeginimagecontextwithoptions (Cgsizemake (100,100), NO, 0);
3. uibezierpath* p = [Uibezierpath bezierpathwithovalinrect:cgrectmake (0,0,100,100)];
5. [[Uicolor Bluecolor] setfill];
7. [P fill];
9. uiimage* im = Uigraphicsgetimagefromcurrentimagecontext ();
11. Uigraphicsendimagecontext ();

Explain the meaning of the uigraphicsbeginimagecontextwithoptions function parameter: The first parameter represents the size of the picture you want to create, and the second parameter specifies whether the background of the generated picture is opaque, as above we use Yes instead of no, Then we get the picture background will be black, obviously this is not what I want; the third parameter specifies the scaling factor for the generated picture, which is consistent with the meaning of the UIImage scale attribute. Passing in 0 means that the zoom factor of the picture changes depending on the resolution of the screen, so the image we get will look good either on a single resolution or on the retina screen.

The sixth form of drawing:Using the core graphics implementation:

1. Uigraphicsbeginimagecontextwithoptions (Cgsizemake (100,100), NO, 0);
3. Cgcontextref con = Uigraphicsgetcurrentcontext ();
5. Cgcontextaddellipseinrect (Con, CGRectMake (0,0,100,100));
7. Cgcontextsetfillcolorwithcolor (Con, [Uicolor Bluecolor]. Cgcolor);
9. Cgcontextfillpath (con);
11. uiimage* im = Uigraphicsgetimagefromcurrentimagecontext ();
13. Uigraphicsendimagecontext ();

The Uikit and core graphics can be mixed in the same graphical context. Prior to iOS 4.0, the use of Uikit and Uigraphicsgetcurrentcontext was considered to be thread insecure. After iOS4.0, Apple lets the drawing operation in the second thread resolve the problem. And then you don't write it ~ you can read the original