Ending with love paper ----- drawing the basic line of Quartz2D, and ending with love ----- quartz2d

Ending with love paper ----- drawing the basic line of Quartz2D, and ending with love ----- quartz2d

1. What is the role of the DrawRect method? When will it be called?
DrawRect: used for plotting in this method. The context associated with the View can be obtained only in this method.
DrawRect is automatically called by the system when the View is displayed.

2. Draw a line (basic step description)
2.1 obtain the context associated with the View
CGContextRef ctx = UIGraphicsGetCurrentContext ();

2.2 draw a path
UIBezierPath * path = [UIBezierPath bezierPath];

2.2.1 set the start point
[Path moveToPoint: CGPointMake (10,125)];

2.2.2 add a line to a point
[Path addLineToPoint: CGPointMake (200,125)];

2.3 Add a path to the context
CGContextAddPath (ctx, path. CGPath );

2.4 render the context content to the View.
CGContextStrokePath (ctx );

3. What if I want to add another line?
Method 1: reset the start point and add a line to a certain point. Multiple lines can exist in a UIBezierPath.
Method 2: add a line based on the original one. Use the last line as the starting point of the next line. Add a line to a certain point.
Directly in the following addLineToPoint:

4. How to set the line width, color, and style?
Setting these styles is called modifying the state of the graphic context.
Set the line width: CGContextSetLineWidth (ctx, 20 );
Set the connection style of a line segment: CGContextSetLineJoin (ctx, kCGLineJoinRound );
Add the top corner style: CGContextSetLineCap (ctx, kCGLineCapRound );
Set the line color: [[UIColor redColor] setStroke];

5. How to draw a curve?
A special control point is required to determine the bending degree of a curve. The method for drawing a curve is as follows:
First set the starting point of a curve
[Path moveToPoint: CGPointMake (10,125)];
Add it to the point to the end of the Curve. At the same time, a controlPoint is also required (the control point determines the method program of curve bending)
[Path addQuadCurveToPoint: CGPointMake (240,125) controlPoint: CGPointMake (125, 10)];

6. How to draw a rectangle and a rounded rectangle?
Draw a rectangle and use UIBezierPath to encapsulate the path.
(X, y) points determine the position of the top left corner of the rectangle.
(Width, height) is the width and height of the rectangle.
BezierPathWithOvalInRect: CGRectMake (x, y, width, height)

The method of the rounded rectangle has one more parameter, cornerRadius.
CornerRadius indicates the radius of the rounded corner of the rectangle.
You can draw a circle using the rounded rectangle. When the rectangle is a square, set the radius of the rounded corner to half the width, which is a circle.
BezierPathWithRoundedRect: CGRectMake (10,100, 50, 50) cornerRadius: 10

7. What if I draw an elliptical circle?
The method for drawing an ellipse is:
The first two parameters represent the center of the Code circle, and the last two parameters represent the width and height of the circle.
When the width and height are equal, a positive circle is drawn. If the width and height are not equal, an elliptic is drawn.
BezierPathWithOvalInRect: CGRectMake (10,100, 50, 50)

8. How to Use the context encapsulated by UIKit to draw images?
Click [path stroke.
Its underlying implementation is to obtain the context, splice the path, add the path to the context, and render it to the View.

9. How to draw an arc?
First, you must determine the circle to determine the Arc. The circle is an angle on the circle.

Center: Center
Radius: radius of the circle
StartAngle: Start Angle
EndAngle
Clockwise: clockwise, No counterclockwise

Note: The position of the startAngle angle is 0 degrees from the rightmost of the circle.

UIBezierPath * path = [UIBezierPath bezierPathWithArcCenter: CGPointMake (125,125)
Radius: 100
StartAngle: 0
EndAngle: M_PI * 2
Clockwise: YES];


10. If the image is slice-shaped.
To draw a sector: first draw a circle and then add a line to the center of the circle, and then close the path.
When the path is disabled, it is automatically closed from the end point of the path to the start point of the path.
If it is filled, it will create a closed path by default, from the end of the path to the start point.
Close path,
[Path closePath];
[Path fill];