iOS Development UI Chapter-quartz2d use (Matrix operations)

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:There are weaknesses in drawing rectangles in this way:The drawn rectangle is 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 object of the drawing (rotation, scaling, panning) method:CGCONTEXTROTATECTM (< #CGContextRef C#>, < #CGFloat angle#>)It takes two parameters (graphics context, radians)Note the point:Setting the matrix operation must be done before adding the graphic, if it is finished after adding the graphic, it is not valid at this time. 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):

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: 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, the scaling method:CGCONTEXTSCALECTM (< #CGContextRef C#>, < #CGFloat Sx#>, < #CGFloat sy#>)The method receives three parameters (the graph context, the X-direction scale, and the scaling code example 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, the translation method:CGCONTEXTTRANSLATECTM (< #CGContextRef C#>, < #CGFloat Tx#>, < #CGFloat ty#>)The method receives three parameters (graph context, offset in x direction, 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.