iOS Development UI Chapter-quartz2d use (graphics context stack)

iOS Development UI Chapter-quartz2d use (graphics context stack)

Qurza2d is how to draw the drawing information and drawing properties into the graphical context?

Description

After you create a new project, customize a view class and storyboard association, override the Drowrect method in the class. Three steps to draw a line: (1) Get Context (2) drawing (3) rendering requirements: Draw two separate line codes and:

- (void) DrawRect: (cgrect) rect{//Get ContextCgcontextref ctx=Uigraphicsgetcurrentcontext (); //Drawing//First lineCgcontextmovetopoint (CTX, -, -); Cgcontextaddlinetopoint (CTX, -, the); //Second LineCgcontextmovetopoint (CTX, +, $); Cgcontextaddlinetopoint (CTX, the, -); //RenderingCgcontextstrokepath (CTX); }

：

Set the width of the segment: round, color, and so on. Code and (Find the second line is also rendered as the first line style and state)

- (void) DrawRect: (cgrect) rect{//Get ContextCgcontextref ctx=Uigraphicsgetcurrentcontext (); //Drawing//First lineCgcontextmovetopoint (CTX, -, -); Cgcontextaddlinetopoint (CTX, -, the); //set the state of the first line//set the width of a lineCgcontextsetlinewidth (CTX, A); //set the color of a line[[Uicolor Browncolor]Set]; //set the style at both ends of the line to rounded cornersCgcontextsetlinecap (Ctx,kcglinecapround); //to render a lineCgcontextstrokepath (CTX); //Second LineCgcontextmovetopoint (CTX, +, $); Cgcontextaddlinetopoint (CTX, the, -); //RenderingCgcontextstrokepath (CTX); }

：

New requirement: To make the color of the two lines different, ask the second line to become the original appearance. To achieve the above requirements, there are several practices:

The first approach: when setting the second line, clear its state

- (void) DrawRect: (cgrect) rect{//Get ContextCgcontextref ctx=Uigraphicsgetcurrentcontext (); //Drawing//First lineCgcontextmovetopoint (CTX, -, -); Cgcontextaddlinetopoint (CTX, -, the); //set the state of the first line//set the width of a lineCgcontextsetlinewidth (CTX, A); //set the color of a line[[Uicolor Browncolor]Set]; //set the style at both ends of the line to rounded cornersCgcontextsetlinecap (Ctx,kcglinecapround); //to render a lineCgcontextstrokepath (CTX); //Second LineCgcontextmovetopoint (CTX, +, $); Cgcontextaddlinetopoint (CTX, the, -); //Empty StateCgcontextsetlinewidth (CTX,1); [[Uicolor Blackcolor]Set];        Cgcontextsetlinecap (Ctx,kcglinecapbutt); //RenderingCgcontextstrokepath (CTX); }

The second approach: the first line from the beginning to the rendering of the code cut to the second line after rendering finished, so that the first draw and render a line, the line does not set the drawing information, the display of the second line to the throne system default effect.

- (void) DrawRect: (cgrect) rect{//Get ContextCgcontextref ctx=Uigraphicsgetcurrentcontext (); //Drawing//Second LineCgcontextmovetopoint (CTX, +, $); Cgcontextaddlinetopoint (CTX, the, -); //Empty State//Cgcontextsetlinewidth (CTX, 1); //[[Uicolor Blackcolor]set]; //Cgcontextsetlinecap (Ctx,kcglinecapbutt); //RenderingCgcontextstrokepath (CTX); //First lineCgcontextmovetopoint (CTX, -, -); Cgcontextaddlinetopoint (CTX, -, the); //set the state of the first line//set the width of a lineCgcontextsetlinewidth (CTX, A); //set the color of a line[[Uicolor Browncolor]Set]; //set the style at both ends of the line to rounded cornersCgcontextsetlinecap (Ctx,kcglinecapround); //to render a lineCgcontextstrokepath (CTX);}

The same effect is done in both ways:

However, in some cases, you must first draw the first line and then draw the second line, the intersection is required, the second line is covered by the first line above. If this is the case, then only the first approach can be used, but if there is a new requirement now, it is required to draw two lines on this basis, it will need to empty the CTX state many times, very troublesome. To solve this problem, let's introduce the graph context stack. Second, the complete process of drawing the program starts, displays the custom view. When the program first appears in front of us, the program calls the DrawRect: method, acquires the graphics context (in memory), and then saves the drawing information using the graphical context, which can be understood asan area to hold the drawing information，there is an area to save the state of the drawing(line width, fillet, color). Straight lines are not drawn directly to the view, and can be understood in the context of the graphA separate area is used to draw the graph first, when the rendering method is called, the drawing is displayed to the view. In the drawing area, you will find the corresponding status information (line width, fillet, color) in the plot status area, and then draw the first line in the drawing area. In fact, before rendering, the line has been drawn in the drawing area.Description:These and the program code blocks in this article do not have a one by one correspondence, just to illustrate the complete process of drawing. When the rendering method is called, the drawing graphics area is displayed directly on the view, which is what we see. When you draw the second bar, if you do not reset the drawing state, you can find that the drawing state you used to draw the first antenna is also saved in the graphics context, and the second line is set according to the first line (previous drawing state) before the second line is rendered. After rendering, the second line is displayed on the screen. Reference code:

- (void) DrawRect: (cgrect) rect{//Get ContextCgcontextref ctx=Uigraphicsgetcurrentcontext (); //Drawing//First lineCgcontextmovetopoint (CTX, -, -); Cgcontextaddlinetopoint (CTX, -, the); //set the state of the first line//set the width of a lineCgcontextsetlinewidth (CTX, A); //set the color of a line[[Uicolor Browncolor]Set]; //set the style at both ends of the line to rounded cornersCgcontextsetlinecap (Ctx,kcglinecapround); //to render a lineCgcontextstrokepath (CTX); //Second LineCgcontextmovetopoint (CTX, +, $); Cgcontextaddlinetopoint (CTX, the, -); //RenderingCgcontextstrokepath (CTX);}

If the state is cleared, the second line is drawn in the drawing area before rendering, and the current drawing information is searched (changed-emptied), the second line is drawn according to the drawing information, and the second line is displayed on the view when the rendering method is called. Reference code:

- (void) DrawRect: (cgrect) rect{//Get ContextCgcontextref ctx=Uigraphicsgetcurrentcontext (); //Drawing//First lineCgcontextmovetopoint (CTX, -, -); Cgcontextaddlinetopoint (CTX, -, the); //set the state of the first line//set the width of a lineCgcontextsetlinewidth (CTX, A); //set the color of a line[[Uicolor Browncolor]Set]; //set the style at both ends of the line to rounded cornersCgcontextsetlinecap (Ctx,kcglinecapround); //to render a lineCgcontextstrokepath (CTX); //Second LineCgcontextmovetopoint (CTX, +, $); Cgcontextaddlinetopoint (CTX, the, -); //Empty StateCgcontextsetlinewidth (CTX,1); [[Uicolor Blackcolor]Set];        Cgcontextsetlinecap (Ctx,kcglinecapbutt); //RenderingCgcontextstrokepath (CTX);}

Third, the graphics context stack 1. Simple description After obtaining the graphics context, pass cgcontextsavegstate (CTX);
method to copy the currently acquired context and save a copy of the most pure graphical context. Before drawing the second line, use the Cgcontextrestoregstate (CTX) method to restore the most pure graphical context saved at the beginning. Code:

- (void) DrawRect: (cgrect) rect{//Get ContextCgcontextref ctx=Uigraphicsgetcurrentcontext (); //save a copy of the original graphics contextcgcontextsavegstate (CTX); //Drawing//First lineCgcontextmovetopoint (CTX, -, -); Cgcontextaddlinetopoint (CTX, -, the); //set the state of the first line//set the width of a lineCgcontextsetlinewidth (CTX, A); //set the color of a line[[Uicolor Browncolor]Set]; //set the style at both ends of the line to rounded cornersCgcontextsetlinecap (Ctx,kcglinecapround); //to render a lineCgcontextstrokepath (CTX); //The purest graphic context saved at the beginning of the restorecgcontextrestoregstate (CTX); //Second LineCgcontextmovetopoint (CTX, +, $); Cgcontextaddlinetopoint (CTX, the, -); //Empty State//Cgcontextsetlinewidth (CTX, 1);//[[Uicolor blackcolor]set];//Cgcontextsetlinecap (Ctx,kcglinecapbutt); //RenderingCgcontextstrokepath (CTX);}

2. Graphical context stack mechanism when you draw the first line, a copy of the current graphics context is saved to the graphics context stack. When the second line is drawn, the drawing information of the top of the stack is taken out of the graph context stack, and as the state information of the second line, the state information of the second line is drawn accordingly (the first saved graphical context).

Note:Save a few times in the stack, then you can take a few times (such as can not be saved 1 times, take two times, in the second time, the stack is empty will directly hang off).

iOS Development UI Chapter-quartz2d use (graphics context stack)