iOS Development UI Chapter-quartz2d use (Graphics context stack

Transferred from: http://www.cnblogs.com/wendingding/p/3782489.html

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:

1-(void) DrawRect: (cgrect) Rect 2 {3     //Get Context 4     cgcontextref ctx=uigraphicsgetcurrentcontext (); 5     //Drawing 6     //First line 7     Cgcontextmovetopoint (CTX, 20, 100); 8     Cgcontextaddlinetopoint (CTX, +, 9)     ///second line     cgcontextmovetopoint (CTX, Max, max);     Cgcontextaddlinetopoint (CTX, +);     //Render     Cgcontextstrokepath (CTX);     16}

: Sets 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)

1-(void) DrawRect: (cgrect) Rect 2 {3     //Get Context 4     cgcontextref ctx=uigraphicsgetcurrentcontext (); 5     //Drawing 6     //First line 7     Cgcontextmovetopoint (CTX, 20, 100); 8     Cgcontextaddlinetopoint (CTX, +, +); 9     //Set the status of the first line one at a     //Set the width     of the line Cgcontextsetlinewidth (CTX, n);     //Set the color of the line     [[Uicolor browncolor]set];15     //Set the style at both ends of the line to fillet     Cgcontextsetlinecap (ctx,kcglinecapround); +/     /render lines     Cgcontextstrokepath (CTX);     The second line is     cgcontextmovetopoint (CTX, Max, max);     Cgcontextaddlinetopoint (CTX, +);     Cgcontextstrokepath (CTX);     26}

：

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

1-(void) DrawRect: (cgrect) Rect 2 {3     //Get Context 4     cgcontextref ctx=uigraphicsgetcurrentcontext (); 5     //Drawing 6     //First line 7     Cgcontextmovetopoint (CTX, 20, 100); 8     Cgcontextaddlinetopoint (CTX, +, +); 9     //Set the status of the first line one at a     //Set the width     of the line Cgcontextsetlinewidth (CTX, n);     //Set the color of the line     [[Uicolor browncolor]set];15     //Set the style at both ends of the line to fillet     Cgcontextsetlinecap (ctx,kcglinecapround); +/     /render lines     Cgcontextstrokepath (CTX);     The second line is     cgcontextmovetopoint (CTX, Max, max);     Cgcontextaddlinetopoint (CTX, +);     Empty state     Cgcontextsetlinewidth (CTX, 1);     [[Uicolor blackcolor]set];27     cgcontextsetlinecap (CTX, Kcglinecapbutt);/     /Render     Cgcontextstrokepath (CTX);     32}

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.

1-(void) DrawRect: (cgrect) Rect 2 {3     //Get Context 4     cgcontextref ctx=uigraphicsgetcurrentcontext (); 5     //Drawing 6      7     //second line 8     cgcontextmovetopoint (CTX, 11); 9     cgcontextaddlinetopoint (CTX,     //Empty state/     /    cgcontextsetlinewidth (CTX, 1);     //    [[Uicolor blackcolor]set];14     15     //    Cgcontextsetlinecap (Ctx,kcglinecapbutt); +     /     /Render     Cgcontextstrokepath (CTX);     /First line     Cgcontextmovetopoint (CTX, +, +);     Cgcontextaddlinetopoint (CTX, +, +);     Set the state of the first line     //Set the width of the line     cgcontextsetlinewidth (CTX, n);     //Set the color of the line     [[Uicolor Browncolor] set];29     //sets the style at both ends of the line to rounded corners of     cgcontextsetlinecap (ctx,kcglinecapround);     //Render     lines Cgcontextstrokepath (CTX); 33}

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, gets the graphics context (in memory), and then uses the graphical context to save the drawing information, which can be understood as an area in the graphical context to hold the drawing information, An area is used to save the state of the drawing (line width, fillet, color). The straight line is not drawn directly to the view, it can be understood that there is a separate area in the graphics context to draw the graph first, when the rendering method is called, and then the drawing of the graph displayed to the view up. 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 block 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:

1-(void) DrawRect: (cgrect) Rect 2 {3     //Get Context 4     cgcontextref ctx=uigraphicsgetcurrentcontext (); 5     //Drawing 6     //First line 7     Cgcontextmovetopoint (CTX, 20, 100); 8     Cgcontextaddlinetopoint (CTX, +, +); 9     //Set the status of the first line one at a     //Set the width     of the line Cgcontextsetlinewidth (CTX, n);     //Set the color of the line     [[Uicolor browncolor]set];15     //Set the style at both ends of the line to fillet     Cgcontextsetlinecap (ctx,kcglinecapround); +/     /render lines     Cgcontextstrokepath (CTX);     The second line is     cgcontextmovetopoint (CTX, Max, max);     Cgcontextaddlinetopoint (CTX, +);     Cgcontextstrokepath (CTX); 25}

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:

1-(void) DrawRect: (cgrect) Rect 2 {3     //Get Context 4     cgcontextref ctx=uigraphicsgetcurrentcontext (); 5     //Drawing 6     //First line 7     Cgcontextmovetopoint (CTX, 20, 100); 8     Cgcontextaddlinetopoint (CTX, +, +); 9     //Set the status of the first line one at a     //Set the width     of the line Cgcontextsetlinewidth (CTX, n);     //Set the color of the line     [[Uicolor browncolor]set];15     //Set the style at both ends of the line to fillet     Cgcontextsetlinecap (ctx,kcglinecapround); +/     /render lines     Cgcontextstrokepath (CTX);     The second line is     cgcontextmovetopoint (CTX, Max, max);     Cgcontextaddlinetopoint (CTX, +);     Empty state     Cgcontextsetlinewidth (CTX, 1);     [[Uicolor blackcolor]set];27     cgcontextsetlinecap (CTX, Kcglinecapbutt);/     /Render     Cgcontextstrokepath (CTX); 31}

Third, the graphics context stack 1. Simple description After getting the graphics context,

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:

1-(void) DrawRect: (cgrect) Rect 2 {3     //Get Context 4     cgcontextref ctx=uigraphicsgetcurrentcontext (); 5     // Save a copy of the original graphical context 6     cgcontextsavegstate (CTX); 7      8     //Drawing 9     //First line     Cgcontextmovetopoint (CTX, 20, 100) ;     one cgcontextaddlinetopoint (CTX, +);     set the state of     the first line     //Set the width     of the line Cgcontextsetlinewidth (CTX), +     //Set the color of the line     [[Uicolor browncolor]set];18     //Set the style of the line to rounded corners     Cgcontextsetlinecap (Ctx,kcglinecapround);/     /Render lines     Cgcontextstrokepath (CTX);     Restore the most pure graphical context saved at the beginning of the     cgcontextrestoregstate (CTX); +     //second line     Cgcontextmovetopoint (CTX, 40, 200 )     (CTX, cgcontextaddlinetopoint);/     /Empty status//    Cgcontextsetlinewidth (CTX, 1); 31/ /    [[Uicolor blackcolor]set];32//    Cgcontextsetlinecap (Ctx,kcglinecapbutt);     Cgcontextstrokepath (CTX); 36}

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: In the stack saved several times, then you can take a few times (such as can not save 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