IOS development and ios development tutorial

IOS development and ios development tutorial
Quartz 2D Introduction

Is a two-dimensional Drawing Engine that supports both iOS and Mac systems.
Jobs that can be completed by Quartz 2D
Drawing: lines, triangles, rectangles, circles, and Arcs
Draw text
Draw \ generate image (image)
Read \ generate PDF
\ Crop an image
Custom UI controls
... ...

DrawRect: Method usage
Draw common images: lines, polygon, and circle
Drawing status settings: text color, line width, etc.
Save and restore the graph context status
Graphical context Stack

To facilitate the construction of beautiful UI interfaces, iOS provides the UIKit framework, which contains a variety of UI controls
UILabel: display text
UIImageView: displays images
UIButton: displays images and text at the same time (can be clicked)
... ...

Quartz2D Value

Using the controls provided by the UIKit framework, you can combine them to build simple and common UI interfaces.

However, some UI interfaces are extremely complex and personalized, and cannot be implemented using common UI controls. In this case, you can use Quartz2D technology to draw the internal structure of the control and customize the display of the control.
In fact, most of the controls in iOS are drawn through Quartz2D.
Therefore, one important value of Quartz2D in iOS development is: Custom view (custom UI control

The Quartz2D API is a pure C language Quartz2D API from the Core Graphics framework data types and functions are basically prefixed with CG as CGContextRefCGPathRefCGContextStrokePath (ctx );......

Graphics Context)

Graphics Context: A CGContextRef type data.

Role of image Context
Save drawing information and drawing status
Determine the output target (where to draw ?)
(The output target can be a PDF file, Bitmap, or display window)

For the same set of drawing sequences, different Graphics Context can be specified to draw the same image to different targets.

Quartz2D provides the following types of Graphics Context: Bitmap Graphics ContextPDF Graphics ContextWindow Graphics ContextLayer Graphics ContextPrinter Graphics Context

Quartz2D custom view

How can I use Quartz2D to customize a view? (Custom UI control)

How to Use Quartz2D to draw things to the view?
First, there must be a graphical context, because it can save the drawing information and decide where to draw
Secondly, the image context must be associated with the view to draw the content to the view.

Procedure
Creates a class that inherits from UIView.
Implementation-(void) drawRect :( CGRect) rect method, and then in this method
Obtain the graph context associated with the current view
Draw the corresponding image content
Render all the drawn content to the view using the graphic Context
DrawRect:
Why do we need to implement drawRect: The method can be drawn to the view?
This is because the graphic context associated with the view can be obtained in the drawRect: method.

DrawRect: When will the method be called?
When the view is displayed on the screen for the first time (added to UIWindow)
When you call setNeedsDisplay or setNeedsDisplayInRect of view:

Quartz2D drawing code steps

// Obtain the graphic context CGContextRef ctx = UIGraphicsGetCurrentContext (); // splice the path (the following code is a line segment) CGContextMoveToPoint (ctx, 10, 10); CGContextAddLineToPoint (ctx, 100,100 ); // draw the path CGContextStrokePath (ctx); // CGContextFillPath (ctx );

Quartz2D common splicing path Functions

// Create a new starting point void CGContextMoveToPoint (CGContextRef c, CGFloat x, CGFloat y) // Add a new line segment to a certain point void CGContextAddLineToPoint (CGContextRef c, CGFloat x, CGFloat y) // Add a rectangle void CGContextAddRect (CGContextRef c, CGRect rect) // Add an elliptical void forward (CGContextRef context, CGRect rect) // Add an arc void CGContextAddArc (CGContextRef c, CGFloat x, CGFloat y, CGFloat radius, CGFloat startAngle, CGFloat endAngle, int clockwise)

// The Mode parameter determines the drawn mode void CGContextDrawPath (CGContextRef c, invalid Mode) // draws the void CGContextStrokePath (CGContextRef c) // draws the solid path void CGContextFillPath (CGContextRef c) // tip: Generally, functions starting with CGContextDraw, CGContextStroke, and CGContextFill are used to draw paths.

Quartz2D image context stack operations

// Copy the current context and save it to the top of the stack (the stack is called the "graphic context stack") void CGContextSaveGState (CGContextRef c) // output the context at the top of the stack to the stack, replace the current context void CGContextRestoreGState (CGContextRef c)

Quartz2D Basic Line Drawing example

/*** Is called once when the view is displayed on the screen for the first time */-(void) drawRect :( CGRect) rect {// 1. obtain the graphic context CGContextRef ctx = UIGraphicsGetCurrentContext (); // 2. concatenate the graphic path // set the line segment width CGContextSetLineWidth (ctx, 5); // set the style CGContextSetLineCap (ctx, kCGLineCapRound) at the end of the line segment header ); // set the style CGContextSetLineJoin (ctx, kCGLineJoinRound) for the line segment turning point; // The first line (set color) CGContextSetRGBStrokeColor (ctx, 1, 0, 0, 1 ); // set a starting point CGContextMoveToPoint (ctx, 10, 10); // Add a line segment to (100,100) CGContextAddLineToPoint (ctx, 100,100); // render CGContextStrokePath (ctx ); // CGContextSetRGBStrokeColor (ctx, 0, 0, 1, 1); CGContextMoveToPoint (ctx, 30, 30); CGContextAddLineToPoint (ctx, 140, 40); CGContextAddLineToPoint (ctx, 180,150); CGContextStrokePath (ctx); // CGContextSetRGBStrokeColor (ctx, 0, 1, 1); CGContextMoveToPoint (ctx, 160,260); CGContextAddLineToPoint (ctx, 100, 40); CGContextAddLineToPoint (ctx, 100,200); CGContextAddLineToPoint (ctx, 50,100); CGContextSetLineWidth (ctx, 10); CGContextStrokePath (ctx); // CGContextSetRGBStrokeColor (ctx, 0, 1, 0, 1); CGContextMoveToPoint (ctx, 90,340); CGContextAddLineToPoint (ctx, 200,340); CGContextSetLineWidth (ctx, 2); CGContextStrokePath (ctx);} @ end

Quartz2D shape drawing example

-(Void) drawRect :( CGRect) rect {drawTriangle (); drawQuadrilateral ();}/*** quadrilateral */void drawQuadrilateral () {// 1. obtain the graphic context CGContextRef ctx = UIGraphicsGetCurrentContext (); // 2. graph CGContextAddRect (ctx, CGRectMake (50,150,150,200); [[UIColor orangeColor] set]; // 3. draw a graph // CGContextFillPath (ctx); // fill CGContextStrokePath (ctx); // unfilled};/*** triangle */void drawTriangle () {// 1. obtain the graphic context CGContextRef ctx = UIGraphicsGetCurrentContext (); // 2. draw the triangle CGContextMoveToPoint (ctx, 10,120); CGContextAddLineToPoint (ctx, 250,120); CGContextAddLineToPoint (ctx,); // close the path CGContextClosePath (ctx); CGContextSetLineWidth (ctx, 8 ); CGContextSetRGBStrokeColor (ctx, 0, 1, 0, 1); // 3. draw the graph CGContextStrokePath (ctx );}

-(Void) drawRect :( CGRect) rect {drawCircle (); drawArc ();}/*** draw an arc */void drawArc () {// 1. obtain the context CGContextRef ctx = UIGraphicsGetCurrentContext (); // 2. draw an arc // x/y: center // radius: radius // startAngle: Start angle // endAngle: end angle // clockwise: Stretch direction of the arc (0: clockwise, 1: counter-clockwise) CGContextAddArc (ctx, 100,300, 50, M_PI_2, M_PI, 0); CGContextSetRGBStrokeColor (ctx, 1, 1, 0, 0.8); // 3. display and draw CGContextStrokePath (ctx); // draw 1/4 circles CGContextMoveToPoint (ctx, 100,100); CGContextAddLineToPoint (ctx, 100,150); CGContextAddArc (ctx, 100,100, 50,-M_PI_2, M_PI, 1); CGContextClosePath (ctx); [[UIColor redColor] set]; CGContextFillPath (ctx);}/*** circle */void drawCircle () {// 1. obtain the context CGContextRef ctx = UIGraphicsGetCurrentContext (); // 2. circle CGContextAddEllipseInRect (ctx, CGRectMake (50, 10,150,150); CGContextSetLineWidth (ctx, 10); CGContextSetRGBStrokeColor (ctx, 1, 0, 1, 1); // 3. show painting CGContextStrokePath (ctx );}

Quartz2D image and text drawing example

/*** Draw image */void drawImage () {// 1. obtain the image UIImage * image = [UIImage imageNamed: @ "square"]; // [image drawAtPoint: CGPointMake (50, 50)]; // [image drawInRect: CGRectMake (0, 0,150,150)]; [image drawAsPatternInRect: CGRectMake (10, 10,240,240)]; // Add the watermark NSString * str = @ "Author: Mr. W"; [str drawInRect: CGRectMake (160,200,100, 30) withAttributes: nil];}/*** draw text */void drawText () {// 1. obtain the context CGContextRef ctx = UIGr AphicsGetCurrentContext (); // you can specify a background CGRect bgRect = CGRectMake (80,300,100,100); CGContextAddRect (ctx, bgRect); CGContextFillPath (ctx ); // draw the text NSString * str = @ "love programming, love drawing, do not explain !! "; Optional * attrs = [NSMutableDictionary dictionary]; // set the text color attrs [identifier] = [UIColor orangeColor]; // set the text font attrs [NSFontAttributeName] = [UIFont systemFontOfSize: 25]; [str drawInRect: bgRect withAttributes: attrs];}

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.