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:

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, which requires the intersection, the second line is covered by the first line. 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.   The complete process of drawing is started, and the custom view is displayed. 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, it will save the drawing status area to find the corresponding state information (line width, fillet, color), and then draw the first line in the drawing area to complete. 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.     Draw the second bar, if you do not reset the drawing state, then you can find the first antenna when the drawing state is also saved in the graphics context, before the second line is rendered, according to the first line (the previous drawing state) The second line is set accordingly, 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 one copy Initial Graphics Context 6 cgcontextsavegstate (CTX);     7 8//Draw 9///First line Cgcontextmovetopoint (CTX,, +); Cgcontextaddlinetopoint (CTX, 100, 320); 12 13//Set the status of the first line 14//Set the width of the line cgcontextsetlinewidth (CTX, 12); 16//Set the color of the line [[Uicolor Browncolor]set     ];18//sets the style at both ends of the line is rounded cgcontextsetlinecap (ctx,kcglinecapround); 20//Render the line Cgcontextstrokepath (CTX); 22 23//Restore the most pure graphical context saved at the beginning of the cgcontextrestoregstate (CTX); 25//Second line Cgcontextmovetopoint (CTX, 40, 200 ); Cgcontextaddlinetopoint (CTX, 80, 100); 28 29//emptying status of//Cgcontextsetlinewidth (CTX, 1);//[[Uicol or blackcolor]set];32//Cgcontextsetlinecap (Ctx,kcglinecapbutt); 33 34//Render 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). Original link: http://www.cnblogs.com/wendingding/p/3782489.html

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