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) Rect2 {3     // Draw Quadrilateral4     // Get the graphics context5Cgcontextref CTX =Uigraphicsgetcurrentcontext ();6     // Drawing7Cgcontextaddrect (CTX, CGRectMake ( -, -, -, -));8     // Rendering9 Cgcontextstrokepath (CTX);Ten}

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) Rect2 {3     // Draw Quadrilateral4     // Get the graphics context5Cgcontextref CTX =Uigraphicsgetcurrentcontext ();6     // Matrix Operations7     // Note: The set matrix operation must be preceded by the addition of the drawing information.8     // Rotate 45 degrees9 CGCONTEXTROTATECTM (CTX, m_pi_4);Ten      One     // Drawing ACgcontextaddrect (CTX, CGRectMake ( Max, -, -, -)); -     // Rendering - Cgcontextstrokepath (CTX); the}

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

- (void) DrawRect: (cgrect) rect{// Get the graphics contextCgcontextref CTX =Uigraphicsgetcurrentcontext (); // Matrix Operations// Note: The set matrix operation must be preceded by the addition of the drawing information.// Rotate 45 degrees//CGCONTEXTROTATECTM (CTX, m_pi_4); // Drawing// Draw QuadrilateralCgcontextaddrect (CTX, CGRectMake ( Max, -, -, -)); // Draw a circleCgcontextaddellipseinrect (CTX, CGRectMake ( $, $, -, -)); // RenderingCgcontextstrokepath (CTX);}

Effect: Code 2 (rotation):

1- (void) DrawRect: (cgrect) Rect2 {3     // Get the graphics context4Cgcontextref CTX =Uigraphicsgetcurrentcontext ();5     // Matrix Operations6     // Note: The set matrix operation must be preceded by the addition of the drawing information.7     // Rotate 45 degrees8 CGCONTEXTROTATECTM (CTX, m_pi_4);9     Ten     // Drawing One     // Draw Quadrilateral ACgcontextaddrect (CTX, CGRectMake ( Max, -, -, -)); -     // Draw a circle -Cgcontextaddellipseinrect (CTX, CGRectMake ( $, $, -, -)); the     // Rendering - Cgcontextstrokepath (CTX); -}

Effect:

2. Additional Notes on rotationTips:When rotated, 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) Rect2 {3     // Get the graphics context4Cgcontextref CTX =Uigraphicsgetcurrentcontext ();5     // Matrix Operations6     // Note: The set matrix operation must be preceded by the addition of the drawing information.7     // Scaling , X-direction scaling 0.5 times times, y-direction scaling 1.5 times times8CGCONTEXTSCALECTM (CTX,0.5,1.5);9     Ten     // Drawing One     // Draw Quadrilateral ACgcontextaddrect (CTX, CGRectMake ( Max, -, -, -)); -     // Draw a circle -Cgcontextaddellipseinrect (CTX, CGRectMake ( $, $, -, -)); the     // Rendering - Cgcontextstrokepath (CTX); -}

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) Rect2 {3     // Get the graphics context4Cgcontextref CTX =Uigraphicsgetcurrentcontext ();5     // Matrix Operations6     // Note: The set matrix operation must be preceded by the addition of the drawing information.7     // Shift , X-direction move 50,y direction8CGCONTEXTTRANSLATECTM (CTX, -, -);9     Ten     // Drawing One     // Draw Quadrilateral ACgcontextaddrect (CTX, CGRectMake ( Max, -, -, -)); -     // Draw a circle -Cgcontextaddellipseinrect (CTX, CGRectMake ( $, $, -, -)); the     // Rendering - Cgcontextstrokepath (CTX); -}

Effect:

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

iOS Development UI Chapter-quartz2d use (Matrix operations)