Swift Operations Quartz 2d A tutorial on simple mapping and coordinate transformation _swift

Quartz 2D Introduction
Quartz 2D is a two-dimensional graphics-drawing engine developed by Apple, which supports both iOS and Mac systems.

It is a C-based API framework that provides low level, lightweight, high-fidelity 2D rendering. The work it can accomplish is:

• Drawing graphics: line \ triangle \ Rectangle \ Circle Arc etc.
• Draw text
• Drawing \ Generating pictures (images)
• Read \ Build PDF
• Screenshot \ Crop Picture
• Customizing UI Controls
• ...

Quartz 2d for drawing
iOS Graphics technology mainly has Uikit,quartz 2d,core animation and OpenGL ES. We should not be unfamiliar with uikit, and the difference between quartz 2D and Uikit is:
The coordinate origin of the Quartz 2D is in the lower-left corner, and the uikit's coordinate origin is in the upper-left corner.
Get ready before you start: Create a new cocoa touch class, inherit from UIView, and then go storyboard to associate the View view with the newly created class.

1. Fill and stroke
rewrite the drawing Method DrawRect (), adding code:

Copy Code code as follows:

Override func DrawRect (rect:cgrect) {
Fill background
Uicolor.browncolor (). Setfill ()
Fill Rectangle
Uirectfill (Rect)
Uicolor.whitecolor (). Setstroke ()
Rectangle Stroke
Let frame = CGRectMake (10, 24, 100, 300)
Uirectframe (frame)
}

Operation Effect:

2. Draw Triangles
It is possible to draw a triangle with three points, and of course other graphics (such as rectangles) are similar.
Add code to DrawRect ():

Copy Code code as follows:

Override func DrawRect (rect:cgrect) {
Let context = Uigraphicsgetcurrentcontext ()
Draw Start point
Cgcontextmovetopoint (context, 120, 104)
From the start point to this point
Cgcontextaddlinetopoint (context, 150, 204)
Cgcontextaddlinetopoint (context, 200, 104)
Closed path
Cgcontextclosepath (context)
Uicolor.blackcolor (). Setstroke ()
Uicolor.greencolor (). Setfill ()
Draw Path
Cgcontextdrawpath (context, Cgpathdrawingmode.fillstroke)
}

Operation Effect:

And so on, you can try how to draw rectangles, squares, and irregular polygons.

3. Draw pictures and text
first prepare a picture into the project, pay attention not to put in the Assets.xcassets folder, because the path is looking for in the engineering folder. And if you put the picture in the Assets.xcassets folder, you need to use another method.
Add code to DrawRect ():

Copy Code code as follows:

Override func DrawRect (rect:cgrect) {
Draw pictures and text
This way to add a picture needs to put the picture in the root directory, not under Assets.xcassets
Let ImagePath = Nsbundle.mainbundle (). Pathforresource ("Avatar 004", OfType: "JPG")
Let image = UIImage (contentsoffile:imagepath!)
The exact location is adjusted according to your picture.
Image?. Drawinrect (CGRectMake (100,100, 200, 200))
Let title = "Avatar"
Let font = uifont.systemfontofsize (44)
Let attr = [Nsfontattributename:font]
Title.drawatpoint (Cgpointmake), withattributes:attr)
}

Operation Effect:

coordinate transformation in the Quartz 2D
Note: The coordinate transformation operation must not be valid until the graphic is added, if it is set after the graphic is added.

Let's draw a square first to finish the reference:

Copy Code code as follows:

Override func DrawRect (rect:cgrect) {
Let context = Uigraphicsgetcurrentcontext ()
Cgcontextsetlinewidth (context, 2.0)
Cgcontextsetstrokecolorwithcolor (Context, Uicolor.redcolor (). Cgcolor)
Let rectangle = CGRectMake (125, 50, 50, 50)
Cgcontextaddrect (context, Rectangle)
Cgcontextstrokepath (context)
}

1, translation
func CGCONTEXTTRANSLATECTM (C:cgcontext?, _ Tx:cgfloat, _ Ty:cgfloat)
The method is equivalent to translating the coordinates of the original position (0, 0) to the (TX, Ty) point. When drawing a graphic on a translational coordinate system, the x-coordinate of all the coordinates points is equivalent to the addition of TX, and the Y-coordinate of all points equals the addition of Ty.

Copy Code code as follows:

Override func DrawRect (rect:cgrect) {
Let context = Uigraphicsgetcurrentcontext ()
Cgcontextsetlinewidth (context, 2.0)
Cgcontextsetstrokecolorwithcolor (Context, Uicolor.redcolor (). Cgcolor)
CGCONTEXTTRANSLATECTM (context,-50, 25)//left-down translation
Let rectangle = CGRectMake (125, 50, 50, 50)
Cgcontextaddrect (context, Rectangle)
Cgcontextstrokepath (context)
}

2, Zoom
func CGCONTEXTSCALECTM (C:cgcontext?, _ Sx:cgfloat, _ Sy:cgfloat)
This method controls the scaling of the coordinate system in both horizontal and vertical directions. When drawing on a scaled coordinate system, the x-coordinate of all points is equal to the SX factor, and the Y-coordinate of all points is multiplied by the SY factor.

Copy Code code as follows:

Override func DrawRect (rect:cgrect) {
Let context = Uigraphicsgetcurrentcontext ()
Cgcontextsetlinewidth (context, 2.0)
Cgcontextsetstrokecolorwithcolor (Context, Uicolor.redcolor (). Cgcolor)
CGCONTEXTSCALECTM (context, 0.5, 1)
Let rectangle = CGRectMake (125, 50, 50, 50)
Cgcontextaddrect (context, Rectangle)
Cgcontextstrokepath (context)
}

3. Rotate
Func CGCONTEXTROTATECTM (C:cgcontext?, _ Angle:cgfloat)
This method controls the rotation angle radian of the coordinate system. When you draw a graphic on a scaled coordinate system, all coordinate points have the X and Y coordinates equal to the coordinates after the angle radians are rotated.

Copy Code code as follows:

Override func DrawRect (rect:cgrect) {
Let context = Uigraphicsgetcurrentcontext ()
Cgcontextsetlinewidth (context, 2.0)
Cgcontextsetstrokecolorwithcolor (Context, Uicolor.redcolor (). Cgcolor)
CGCONTEXTROTATECTM (Context, CGFloat (M_pi_4))
Let rectangle = CGRectMake (125, 50, 50, 50)
Cgcontextaddrect (context, Rectangle)
Cgcontextstrokepath (context)
}

Note: When rotated, the entire layer is rotated, so the layer should look like this:

This time, if you want to move view, you should follow this rotating coordinate system to move:

Copy Code code as follows:

Override func DrawRect (rect:cgrect) {
Let context = Uigraphicsgetcurrentcontext ()
Cgcontextsetlinewidth (context, 2.0)
Cgcontextsetstrokecolorwithcolor (Context, Uicolor.redcolor (). Cgcolor)
CGCONTEXTROTATECTM (Context, CGFloat (M_pi_4))
CGCONTEXTTRANSLATECTM (context, 0,-100)//Move up 100 points up in the new coordinate system, and the view looks like it's moving right and up.
Let rectangle = CGRectMake (125, 50, 50, 50)
Cgcontextaddrect (context, Rectangle)
Cgcontextstrokepath (context)
}