[Original] Quartz2D for iOS Learning (1), z2d for ios Learning

[Original] Quartz2D for iOS Learning (1), z2d for ios Learning
What is Quartz2D?

1,Quartz 2DIs a two-dimensional Drawing Engine that supports both iOS and Mac systems.

2,Quartz 2DWhat can be done:

• Drawing: lines, triangles, rectangles, circles, and Arcs

• Draw text

• Draw \ generate image (image)

• Read \ generate PDF

• \ Crop an image

• Custom UI controls

Graphic Context

1. Graphics Context:CGContextRefType data

2. Role of the image context:

• Save drawing information and drawing status

• Determine the output target (where to draw ?)

 

The same set of drawing sequences, specifying differentGraphics ContextTo draw the same image to different targets.

3,Quartz2DProvides the following typesGraphics Context:

• BitmapGraphics Context

• PDFGraphics Context

• WindowGraphics Context

• LayerGraphics Context

• PrinterGraphics Context

Custom view

1. How to UseQuartz2DDraw somethingViewUpper?

• 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.

2. Step for custom view

• Create a new class that inherits fromUIView

• Implementation-(Void) drawRect :( CGRect) rectMethod, 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

3. Why?DrawRectDrawing inside

The layer associated with the View can be obtained only in this method.Graphic Context

When this View needsDisplayOnly whenCallDrawing drawing

Note: rect is the bounds of the current control.

Draw line

1. steps:

• Obtain the image Context

• Description path

• Add path to context

• Rendering context

2. Straight Line

Method 1: (original drawing method)

// 1. obtain the image context // The context we currently use is UIGraphics // CGContextRef Ref: Reference CG: currently, the types and functions used are generally started with CG CoreGraphics CGContextRef ctx = UIGraphicsGetCurrentContext (); // 2. description path // create path CGMutablePathRef path = CGPathCreateMutable (); // set the start point // path: Specify the path for which CGPathMoveToPoint (path, NULL, 0,250 ); // Add a line to a certain vertex CGPathAddLineToPoint (path, NULL, 250, 0); // 3. add the path to the context CGContextAddPath (ctx, path); // 4. rendering context CGContextStrokePath (ctx );

Method 2: (native)

// Obtain the context CGContextRef ctx = UIGraphicsGetCurrentContext (); // description path // set the start point CGContextMoveToPoint (ctx, 0, 0); CGContextAddLineToPoint (ctx, 250,250 ); // render context CGContextStrokePath (ctx );

Method 3: beser path

// UIKit has encapsulated some plotting functions // besell path // create path UIBezierPath * path = [UIBezierPath bezierPath]; // set the starting point [path moveToPoint: CGPointMake (0,125)]; // Add a line to a certain point [path addLineToPoint: CGPointMake (250,125)]; // draw the path [path stroke];

3. Wire-related operations

Native

// Obtain the context CGContextRef ctx = UIGraphicsGetCurrentContext (); // description path // start point CGContextMoveToPoint (ctx, 50, 50); CGContextAddLineToPoint (ctx, 100, 50 ); // set the start point CGContextMoveToPoint (ctx, 80, 60); // by default, the start point of the next line is the end point CGContextAddLineToPoint (ctx, 100,200) of the previous line; // set the drawing status, before rendering, be sure to // color [[UIColor redColor] setStroke]; // CGContextSetLineWidth (ctx, 5); // set the connection style CGContextSetLineJoin (ctx, kCGLineJoinBevel ); // set the top corner style CGContextSetLineCap (ctx, kCGLineCapRound); // render the context CGContextStrokePath (ctx );

Besell path

UIBezierPath * path = [UIBezierPath bezierPath]; [path moveToPoint: CGPointMake (50, 50)]; [path addLineToPoint: CGPointMake (200,200)]; // line width path. lineWidth = 10; // color [[UIColor redColor] set]; [path stroke]; UIBezierPath * path1 = [UIBezierPath bezierPath]; [path1 moveToPoint: CGPointMake (0, 0)]; [path1 addLineToPoint: CGPointMake (30, 60)]; [[UIColor greenColor] set]; path1.lineWidth = 3; [path1 stroke];

Comparison:

From the code, we can see that native line operations can only draw a line as a style, but the line operations of the besell path can draw lines of different styles according to different paths.

3. Curve

Method 1 (native)

// Native Rendering Method // obtain the context CGContextRef ctx = UIGraphicsGetCurrentContext (); // description path // set the start point CGContextMoveToPoint (ctx, 150, 50 ); // CGContextAddQuadCurveToPoint (CGContextRef cg_nullable c, CGFloat cpx, CGFloat cpy, CGFloat x, CGFloat y) // cpx: x of the control point // cpy: y of the control point/x, y is the coordinate CGContextAddQuadCurveToPoint (ctx, 50, 50, 50,150) of the end point of the line; // render the context CGContextStrokePath (ctx );

Method 2 (beser path)

// Arc // + (instancetype) bezierPathWithArcCenter :( CGPoint) center radius :( CGFloat) radius startAngle :( CGFloat) startAngle endAngle :( CGFloat) endAngle clockwise :( BOOL) clockwise; // Center: center/radius: radius // startAngle: Start angle // endAngle: end angle // clockwise: YES: clockwise NO: CGPoint center = CGPointMake (125,125 ); UIBezierPath * path = [UIBezierPath bezierPathWithArcCenter: center radius: 100 startAngle: 0 endAngle: M_PI_2 clockwise: YES]; [path stroke];

4. Slice

Not filled

// Sector CGPoint center = CGPointMake (125,125); UIBezierPath * path = [UIBezierPath bezierPathWithArcCenter: center radius: 100 startAngle: 0 endAngle: M_PI_2 clockwise: YES]; // Add a line to the center [path addLineToPoint: center]; // close the path to close the path: from the end of the path to the start point [path closePath]; [path stroke];

Code:

Fill

// Sector CGPoint center = CGPointMake (125,125); UIBezierPath * path = [UIBezierPath bezierPathWithArcCenter: center radius: 100 startAngle: 0 endAngle: M_PI_2 clockwise: YES]; // Add a line to the center [path addLineToPoint: center]; // fill: it must be a complete closed path. By default, the path [path fill] is automatically disabled.

Code:

5. rounded rectangle

// Rounded rectangle // + (instancetype) bezierPathWithRoundedRect :( CGRect) rect cornerRadius :( CGFloat) cornerRadius; // cornerRadius: radian of the rounded corner. When the value is half the length of the side, the image is a circular UIBezierPath * path = [UIBezierPath bezierPathWithRoundedRect: CGRectMake (20, 20,200,200) cornerRadius: 50]; [path stroke]; // fill: the path must be a complete closed path. By default, the path is automatically disabled. // [path fill];

Code:

　　

The related operations are similar to those related to the besell path. You can try it. If you have any suggestions for the above content, contact me directly. O (∩ _ ∩) O thank you!