IOS 2D Drawing (quartz2d) transform (Ctm,translate,rotate,scale)

Tag: Operation state launches nbsp span ini gray add quartz

Preface: Quartz default to the device-independent user space for drawing, when the context (artboard) is established, the default coordinate system origin and direction is confirmed, you can pass the CTM (current transformation Matrix) to fix the original point of the coordinate system. From the perspective of array image processing, the current context state is multiplied by a status matrix. One of the matrix operators can not understand

The initial state and code

#import "CustomView.h"@implementationCustomView- (void) DrawRect: (cgrect) rect {[Super Drawrect:rect]; //Draw a rectangleCgcontextref context =Uigraphicsgetcurrentcontext (); Cgcontextaddrect (Context, CGRectMake (Ten,Ten, +, -)); Cgcontextsetfillcolorwithcolor (Context,[uicolor Bluecolor].    Cgcolor); Cgcontextfillpath (context);}-(Instancetype) initWithFrame: (cgrect) frame{if(self =[Super Initwithframe:frame]) {Self.opaque=NO; Self.layer.borderColor=[Uicolor Lightgraycolor].        Cgcolor; Self.layer.borderWidth=1.0; }    returnSelf ;}@end

You can call it in the controller.

CustomView * CustomView = [[CustomView alloc] Initwithframe:cgrectmake (100 )]; [Self.view Addsubview:customview];

Graphic

Translate

What happens if we move the coordinate system before we draw it?

Code:

-(void) DrawRect: (cgrect) rect {    [super Drawrect:rect];     // Draw a rectangle    Cgcontextref context = uigraphicsgetcurrentcontext ();     // move coordinate system    Ten Ten );    Cgcontextaddrect (Context, CGRectMake (Ten,ten));    Cgcontextsetfillcolorwithcolor (Context,[uicolor Bluecolor]. Cgcolor);    Cgcontextfillpath (context);}

Effect:

In the code we still draw at (10,10) point, but notice that the origin of the current coordinate system has moved to (10,10).

Rotate

On the basis of transform, we rotate 45 degrees, note that the parameter CGCONTEXTROTATECTM passed in is radians.

Code

- (void) DrawRect: (cgrect) rect {[Super Drawrect:rect]; //Draw a rectangleCgcontextref context =Uigraphicsgetcurrentcontext (); //Move coordinate systemCGCONTEXTTRANSLATECTM (Context,Ten,Ten); //Rotate coordinate systemCGCONTEXTROTATECTM (context, m_pi_4); Cgcontextaddrect (Context, CGRectMake (Ten,Ten, +, -)); Cgcontextsetfillcolorwithcolor (Context,[uicolor Bluecolor].    Cgcolor); Cgcontextfillpath (context);}

Effect

Scale

Relative to scale, a good understanding of some, is nothing more than zoom in or zoom out

Code

- (void) DrawRect: (cgrect) rect {[Super Drawrect:rect]; //Draw a rectangleCgcontextref context =Uigraphicsgetcurrentcontext (); //Move coordinate systemCGCONTEXTTRANSLATECTM (Context,Ten,Ten); //Rotate coordinate systemCGCONTEXTROTATECTM (context, m_pi_4); //Zoom coordinate systemCGCONTEXTSCALECTM (Context,0.5,0.5); Cgcontextaddrect (Context, CGRectMake (Ten,Ten, +, -)); Cgcontextsetfillcolorwithcolor (Context,[uicolor Bluecolor].    Cgcolor); Cgcontextfillpath (context);}

Effect

State Save Recovery

In a complex drawing diagram, we may point to a subpath for a scaled move rotation. At this point, the state stack works.

Code

- (void) DrawRect: (cgrect) rect {[Super Drawrect:rect]; //Draw a rectangleCgcontextref context =Uigraphicsgetcurrentcontext (); //save state into Stackcgcontextsavegstate (context); //Move coordinate systemCGCONTEXTTRANSLATECTM (Context,Ten,Ten); //Rotate coordinate systemCGCONTEXTROTATECTM (context, m_pi_4); //Zoom coordinate systemCGCONTEXTSCALECTM (Context,0.5,0.5); Cgcontextaddrect (Context, CGRectMake ( -, -, +, -)); Cgcontextsetfillcolorwithcolor (Context,[uicolor Bluecolor].    Cgcolor);    Cgcontextfillpath (context); //roll up the top state of the stackcgcontextrestoregstate (context); //The coordinate system has returned to its very first state.Cgcontextaddrect (Context, CGRectMake (0,0, -, -)); Cgcontextfillpath (context);}

Effect

Affine Transforms

You can create a radiation matrix first, and then map the radiation matrix to the CTM

Cgaffinetransform
Cgaffinetransformtranslate
Cgaffinetransformmakerotation
Cgaffinetransformrotate
Cgaffinetransformmakescale
Cgaffinetransformscale

IOS 2D Drawing (quartz2d) transform (Ctm,translate,rotate,scale)