"Original" iOS Learning quartz2d (1)

What is quartz2d

1.Quartz 2D is a two-dimensional drawing engine that supports both iOS and Mac systems

2,Quartz 2D can complete the work:

• Drawing: lines \ triangles \ rectangles \ Circles \ Arcs, etc.

• Draw text

• Draw \ Generate picture (image)

• Read \ Generate PDF

• \ crop a picture

• Customizing UI Controls

Graphics context

1. Graphics context: is a cgcontextref type of data

2, the role of the graphics context:

• Save drawing information, drawing status

• Decide where to draw the output target (where to draw?) ）

The same set of drawing sequences, specifying different graphics Context, can draw the same image to different targets

3.quartz2d provides the following types of Graphics Context:

• Bitmapgraphics Context

• Pdfgraphics Context

• Windowgraphics Context

• Layergraphics Context

• Printergraphics Context

Custom View

1, how to use quartz2d to draw things to the view ?

• First, you have to have a graphical context, because it saves the drawing information and determines where to draw it.

• Second, the graphics context must be associated with the view to draw the content to the view

2. Steps to customize view

• Create a new class that inherits from UIView

• Implement -(void) DrawRect: (cgrect) Rect method, and then in this method

• Gets the graphics context associated with the current view

• Draw the appropriate graphic content

• Renders all rendered content to the view using a graphical context

3, why to draw inside the drawrect

Only in this method can you get the graphical context associated with the layer of the View

DrawRect drawing is called when the view is to be displayed

Note: Rect is the bounds of the current control

Draw Line

1. Steps:

• Get the graphics context

• Description path

• To add a path to the context

• Render context

2. Straight Line

Mode 1: (Most primitive drawing method)

    //1. Get the graphics context//the context in which we are currently using Uigraphics//cgcontextref Ref: Reference CG: The types and functions currently used are usually the beginning of CG CoregraphicsCgcontextref CTX =Uigraphicsgetcurrentcontext (); //2. Description Path//Create PathCgmutablepathref Path =cgpathcreatemutable (); //set the starting point//Path : Set the starting point for which pathCgpathmovetopoint (Path, NULL,0, -); //add a line to a pointCgpathaddlinetopoint (Path, NULL, -,0); //3. Add a path to the contextCgcontextaddpath (CTX, path); //4. Render ContextCgcontextstrokepath (CTX);

Mode 2: (native)

    // Get Context    Cgcontextref CTX = uigraphicsgetcurrentcontext ();        // Description Path     // set the starting point    0 0 );         -  - );        // Render Context    Cgcontextstrokepath (CTX);

Mode 3: Bethel Path

 //  Uikit already encapsulates the functionality of some drawings  //  Bethel path  //  create path  uibezierpath *path = [Uibezierpath Bezierpath];  //  Set the starting point  [path moveToPoint: Cgpointmake (0 , 125         //  add a line to a point  [path Addlinetopoint: Cgpointmake (250 , 125         //  draw path  [path stroke]; 

3, the related operation of the line

Native

    //Get ContextCgcontextref CTX =Uigraphicsgetcurrentcontext (); //Description Path//starting pointCgcontextmovetopoint (CTX, -, -); Cgcontextaddlinetopoint (CTX, -, -); //set the starting pointCgcontextmovetopoint (CTX, the, -); //The starting point of the default next line is the end of the previous lineCgcontextaddlinetopoint (CTX, -, $); //to set the drawing state, be sure to//Color[[Uicolor Redcolor] setstroke]; //line widthCgcontextsetlinewidth (CTX,5); //Setting the connection styleCgcontextsetlinejoin (CTX, kcglinejoinbevel); //set the vertex styleCgcontextsetlinecap (CTX, Kcglinecapround); //Render ContextCgcontextstrokepath (CTX);

　Bethel Path

Uibezierpath *path =[Uibezierpath Bezierpath]; [Path Movetopoint:cgpointmake ( -, -)]; [Path Addlinetopoint:cgpointmake ( $, $)]; //line widthPath.linewidth =Ten; //Color[[Uicolor Redcolor]Set];        [Path stroke]; Uibezierpath*path1 =[Uibezierpath Bezierpath]; [Path1 Movetopoint:cgpointmake (0,0)]; [Path1 Addlinetopoint:cgpointmake ( -, -)]; [[Uicolor Greencolor]Set]; Path1.linewidth=3; [path1 stroke];

Comparison:

As can be seen from the code, native line operations can only draw lines as a style, but the alignment of the Bethel path allows different styles of lines to be drawn depending on the path.

3. Curve

Mode 1 (native)

    //Native Drawing Method//Get ContextCgcontextref CTX =Uigraphicsgetcurrentcontext (); //Description Path//set the starting pointCgcontextmovetopoint (CTX, Max, -); //Cgcontextaddquadcurvetopoint (Cgcontextref cg_nullable C, CGFloat CPX, CGFloat cpy, CGFloat x, cgfloat y)//CPX: X of Control Point//cpy: Y of Control Point//x, y is the coordinate of the point at which the line endsCgcontextaddquadcurvetopoint (CTX, -, -, -, Max); //Render ContextCgcontextstrokepath (CTX);

Mode 2 (Bethel Path)

    //Arc//+ (Instancetype) Bezierpathwitharccenter: (cgpoint) Center radius: (cgfloat) Radius startangle: (cgfloat) startangle    Endangle: (cgfloat) Endangle clockwise: (BOOL) clockwise; //Center: Center//Radius : Radius//startangle: Starting angle//endangle: End Angle//clockwise:yes: Clockwise NO: CounterclockwiseCgpoint Center= Cgpointmake ( the, the); Uibezierpath*path = [Uibezierpath bezierpathwitharccenter:center radius: -StartAngle:0endangle:m_pi_2 Clockwise:yes]; [path stroke];

4. Fan

Not populated

    // Fan    Cgpoint Center = cgpointmake (a);     *path = [Uibezierpath bezierpathwitharccenter:center radius: startangle:0  endangle:m_pi_2 Clockwise:yes];         // add a line to the center of the Circle     [path addlinetopoint:center];         // closed path: From the end of the path to the starting point     [path Closepath];        [path stroke];

Code:

Fill

    // Fan    Cgpoint Center = cgpointmake (a);     *path = [Uibezierpath bezierpathwitharccenter:center radius: startangle:0  endangle:m_pi_ 2 clockwise:yes];         // add a line to the center of the Circle     [path addlinetopoint:center];         // fill: Must be a complete closed path, the path    is automatically closed by default [Path fill];

　　Code:

5. Rounded Corners Rectangle

    // Rounded Rectangle     // + (Instancetype) Bezierpathwithroundedrect: (cgrect) Rect Cornerradius: (cgfloat) Cornerradius;     // Cornerradius: Rounded arc, when the value is half the length of the edge, the picture is drawn as a circle    Uibezierpath *path = [Uibezierpath bezierpathwithroundedrect:cgrectmake £ cornerradius);    [path stroke];     // fill: Must be a complete closed path, the path is automatically closed by default //     [path fill];

Code:

　　

Related operations similar to the operation of the Bezier path, you can try, the above content has any suggestions can contact me directly, O (∩_∩) o Thank you!

"Original" iOS Learning quartz2d (1)