iOS Learning--quartz2d Learning (1)

This paper mainly discusses the related content of quartz2d in question and answer form, and the reference content is the learning video material downloaded online.

1. What is quartz2d?

He is a two-dimensional drawing engine that supports both iOS and Mac systems  

2, quartz2d can complete the work

draw basic lines, draw text, pictures, custom UIView.

3, the value of quartz2d in the development

when our control style is extremely complex, we can draw the structure inside the control, that is, the custom control.

4. What is a graphics context

The graphical context is used to hold the user-drawn content state and decide where to draw it.

The user saves the well-drawn content to the graphics context first,

then, depending on the graphics context you choose, the content you draw is not the same as the location, that is, the output target is not the same.

5. What are the types of contexts?

The types of graphics contexts are:

Bitmap Graphics Context (bitmap contexts)

PDF Graphics Context

Window Graphics Context

the layer Graphics context (the layer context, the custom UIView context is the layers context. )

UIView was able to show it because he had a layer inside .

Printer Graphics Context

6. How do I customize UIView and what are the steps?

The first thing to do is to have context, and the context to decide where to put the drawing. Cgcontextref CTX = Uigraphicsgetcurrentcontext ();

the second is that the context must be associated with the view. To draw content to the view. In the DrawRect method method

steps:

1. To set a custom UIView first

2. Implementing the DrawRect Method

3. Get the context associated with the view in the DrawRect method.

4. Draw the path (describe what the path looks like).

5. Save the well-described path to the context (i.e. add path to context)

6. Render the contents of the context to the view

7, DrawRect method function? When to call.

DrawRect Effect: Dedicated to drawing in this method. The context associated with the view can only be obtained in this method .

DrawRect is called by the system itself, and it is called automatically when the view is displayed.

8. Draw line (Basic step description)

//1. Get the context associated with the viewCgcontextref CTX=Uigraphicsgetcurrentcontext ();//2. Draw the pathUibezierpath*path =[Uibezierpath Bezierpath]; //2.1 Setting the starting point[Path Movetopoint:cgpointmake (Ten, the)]; //2.2 Add a line to a point[Path Addlinetopoint:cgpointmake ( $, the)];//3. Add a path to the contextCgcontextaddpath (Ctx,path. Cgpath);//4. Render the contents of the context to the view.Cgcontextstrokepath (CTX);

9. What if I want to add another line?

The first method: Reset the starting point, add a line to a point, a uibezierpath path can have more than one line.

The second method: Add lines directly to the original base. Take the end of the previous line as the starting point for the next one. Add a line to a point directly below the Addlinetopoint:

10, how to set the width of the line, color, style?

setting These styles is what we call the state of modifying the graphics context .

Set line width: Cgcontextsetlinewidth (CTX, a);

to set the connection style for a segment: Cgcontextsetlinejoin (CTX, kcglinejoinround);

add vertex style: Cgcontextsetlinecap (CTX, kcglinecapround);

set the color of the line: [[Uicolor Redcolor] setstroke];

11, how to draw curves?

a special control point is required to draw a curve to determine the degree of curvature of the curve. The drawing curve method is:

// set the starting point of a curve first [Path Movetopoint:cgpointmake]; // add to the point to the end of the curve. Also need a controlpoint (control point determines the curve of the method program) [Path Addquadcurvetopoint:cgpointmake (controlpoint:cgpointmake) (10 )];

12, how to draw rectangle, rounded rectangle?

Draw rectangle directly using Uibezierpath to give us a well-encapsulated path method Bezierpathwithrect:cgrectmake (x, y, Width,height)

The (x, y) point determines where the point in the upper-left corner of the rectangle
(Width,height) is the width height of the rectangle

The rounded rectangle is drawn with one more parameter, Cornerradius, Bezierpathwithroundedrect:cornerradius:

Cornerradius It is the rounded radius of the rectangle.

a circle can be drawn by a rounded rectangle. When the rectangle is a square, the radius of the fillet is set to half the width, which is a circle.

Bezierpathwithroundedrect:cgrectmake (Ten, +, +) cornerradius:25

13, if draw ellipse, circle?

The ellipse is drawn in the following way:bezierpathwithovalinrect:cgrectmake (x, y, width,height)

The center of the first two parameters (x, y) for each code circle

The following two parameters (Width,height) represent the width of the circle, respectively, and the height.

when the width and height are equal, a positive circle is drawn, and an ellipse is drawn when it is not equal .

Bezierpathwithovalinrect:cgrectmake (Ten , +, +)

14, how to use the content of rendering Bezierpath object?

after creating a Uibezierpath object, we can use its stroke and fill method to render it in the current graphics context, both of which the bottom-level implementation is to get the context , stitching the path, adding the path to the context, rendering to view. Before invoking these methods, we will do some other tasks to ensure that the path is drawn correctly and the path is set. Use the Uicolor class method to stroke and fill the desired color. when rendering using the Stroke and fill methods, it is not necessary for us to get the context manually, which will customize the context of the view and then draw the path corresponding to the render path on that view, and the stroke is the drawing line , fill is the enclosing area that fills the path.

//set the path of a rectangleUibezierpath *path = [Uibezierpath bezierpathwithrect:cgrectmake (Ten, -, -, -)];//Set Border color[[Uicolor Greencolor] setstroke];//Set Fill Color[[Uicolor Redcolor] setfill];//set the line width of the borderPath.linewidth =5;//Draw Border[path stroke];//Fill Interior[Path fill];

15, how to draw arc?

First of all to determine the circle to determine the arc , Circular solitary it on the circle of an angle . or use the Uibezierpath's own initialization method. bezierpathwitharccenter: (cgpoint) Radius: (cgfloat) StartAngle: (cgfloat) Endangle: (cgfloat) Clockwise: (BOOL)

CEnter: Center

Radius: radius of Circle

StartAngle: Starting angle

Endangle: End Angle

Clockwise:yes clockwise, no counter-clockwise

Note: The position of thestartangle angle is 0 degrees from the far right of the circle, i.e. the three o'clock direction of the clock is the starting point .

// Draw a semicircle counter-clockwise Uibezierpath *path = [Uibezierpath bezierpathwitharccenter:cgpointmake (radius):100 startangle:0  endangle:m_pi Clockwise:no]; [path stroke];         // 4 points of 1 round solitary Uibezierpath *path = [Uibezierpath bezierpathwitharccenter:cgpointmake (radius):  startangle:0 endangle:-m_pi_2 Clockwise:no]; [path stroke];

16. How to draw a fan

A fan is filled on the basis of an arc, but the fill requires a closed path to fill, so the method of drawing the fan is:

1. Draw an arc first

2. Add one more line to the center of the circle:

3. Then close the path:[path Closepath], which automatically closes from the end of the path to the beginning of the path , forming a closed path

4. Last fill:[path fill];

//drawing the 1/4 Circle example//drawing ArcsUibezierpath *path = [Uibezierpath bezierpathwitharccenter:cgpointmake ( the, the) Radius: -StartAngle:0endangle:-m_pi_2 Clockwise:no];//add a line to the center of the Circle[Path Addlinetopoint:cgpointmake ( the, the)];//close the path, from the end of the path to the beginning of the path[path Closepath];//draw a scalloped border[path stroke];//with padding, it will default to a closed path, from the end of the path to the starting point.[Path fill];

 

iOS Learning--quartz2d Learning (1)