iOS Development UI Chapter-quartz2d use (Matrix operations)

first, about the matrix operation 1. Draw a quadrilateralA four-sided drawing is done by setting two endpoints (length and width). Code:

1-(void) DrawRect: (cgrect) Rect 2 {3//     Draw quadrilateral 4     //Get Graphics Context 5     cgcontextref ctx=uigraphicsgetcurrentcontext (); 6     //Drawing 7     cgcontextaddrect (CTX, CGRectMake (+,)); 8     //Render 9     Cgcontextstrokepath (CTX); 10}

Description: Drawing rectangles In this way has weaknesses: the drawn rectangles are always positive. Such as: 2. Draw a crooked quadrilateralHow to draw a crooked rectangle? (Done with a matrix operation, similar to a deformation operation) can be manipulated by the matrix to deform (rotate, scale, pan) the drawing of Things: CGCONTEXTROTATECTM (< #CGContextRef C#>, < #CGFloat Angle#>) This accepts two parameters (graphics context, radians) Note: The set matrix operation must be done before adding a graphic, if it is finished after adding a graphic, it is not valid at this point. Code:

1-(void) DrawRect: (cgrect) Rect 2 {3//     Draw quadrilateral 4     //Get Graphics Context 5     cgcontextref ctx=uigraphicsgetcurrentcontext (); 6     //matrix Operation 7     //Note point: Set matrix operation must be before adding drawing information 8     //Rotation 45 degrees 9     CGCONTEXTROTATECTM (CTX, m_pi_4);     Drawing     of Cgcontextaddrect (CTX, CGRectMake (15, +)); +     //Render     Cgcontextstrokepath (CTX);

Effect: Two, about rotation 1. Rotate the demo view to display the view because it has a layer on it, and the future graph is rendered to the layer. And, when rotating the entire layer is rotated, you can draw a circle to verify. Code 1 (not rotated):

1-(void) DrawRect: (cgrect) Rect 2 {3     //Get Graphics Context 4     cgcontextref ctx=uigraphicsgetcurrentcontext (); 5     //matrix operation 6     //NOTE: Set the matrix operation must be before adding drawing information 7     //Rotation 45 degrees 8     //    CGCONTEXTROTATECTM (CTX, m_pi_4); 9     //Drawing 11     //Draw quadrilateral     Cgcontextaddrect (CTX, CGRectMake (), +/-);     //Draw a circle     of Cgcontextaddellipseinrect (CTX, CGRectMake ($, (+), +);     //Render     Cgcontextstrokepath (CTX); 17}

Effect: Code 2 (rotation):

1-(void) DrawRect: (cgrect) Rect 2 {3     //Get Graphics Context 4     cgcontextref ctx=uigraphicsgetcurrentcontext (); 5     //matrix operation 6     //NOTE: Set the matrix operation must be before adding drawing information 7     //Rotation 45 degrees 8     CGCONTEXTROTATECTM (CTX, m_pi_4); 9     //Drawing one     // Draw the Quadrilateral     Cgcontextaddrect (CTX, CGRectMake (), (+), (+), and     /or draw a circle of     Cgcontextaddellipseinrect ( CTX, CGRectMake ($, N, +));/     /Render     Cgcontextstrokepath (CTX); 17}

Effect:

2. Additional instructions on rotation tip: When rotating, the entire layer is rotated. Three, scaling method: Cgcontextscalectm (< #CGContextRef C#>, < #CGFloat Sx#>, < #CGFloat sy#>) The method receives three parameters (the graphics context, Scaling in the x direction, example of scaling code in the y direction:

1-(void) DrawRect: (cgrect) Rect 2 {3     //Get Graphics Context 4     cgcontextref ctx=uigraphicsgetcurrentcontext (); 5     //matrix operation 6     //NOTE: Set the matrix operation must be before adding drawing information 7     //zoom, X-direction scaling 0.5 times times, y-direction scaling 1.5 times times 8     CGCONTEXTSCALECTM (CTX, 0.5, 1.5);     9     Drawing     One///Draw quadrilateral     (CTX, CGRectMake (Cgcontextaddrect, +,));     //Draw a circle     Cgcontextaddellipseinrect (CTX, CGRectMake ($, N, a));     //Render     Cgcontextstrokepath (CTX); 17}

Effect:

Four, translation method: Cgcontexttranslatectm (< #CGContextRef C#>, < #CGFloat Tx#>, < #CGFloat ty#>) The method receives three parameters (the graphics context, X-direction offset, offset in Y-direction) code example:

1-(void) DrawRect: (cgrect) Rect 2 {3     //Get Graphics Context 4     cgcontextref ctx=uigraphicsgetcurrentcontext (); 5     //matrix operation 6     //NOTE: Set the matrix operation must be before adding the drawing information 7     //translation, X-direction movement 50,y direction of movement of 8     CGCONTEXTTRANSLATECTM (CTX,;     Drawing     One///Draw quadrilateral     (CTX, CGRectMake (Cgcontextaddrect, +,));     //Draw a circle     Cgcontextaddellipseinrect (CTX, CGRectMake ($, N, a));     //Render     Cgcontextstrokepath (CTX); 17}

Effect:

Tip: The coordinate origin is the upper-left corner of the view.

iOS Development UI Chapter-quartz2d use (Matrix operations)