IOS 2D plotting (Quartz 2D) path (point, straight line, dotted line, curve, arc, elliptical, rectangle)

IOS 2D plotting (Quartz 2D) path (point, straight line, dotted line, curve, arc, elliptical, rectangle)

 

A path can contain one or more shapes and subpaths. quartz provides many convenient shapes that can be called directly. For example, point, line, Arc, Curves, Ellipse, and Rectangle ).

You can perform stroke or fill on these paths, or use path to intercept a region (clip ).

For example, you can intercept a circular area.

If you still have no idea about the basic concepts of Quartz, I strongly recommend that you read this article. Otherwise, you cannot understand it.

IOS 2D plotting (Quartz 2D) Overview

Points/Lines

Quartz, usageCGContextMoveToPointMove the paint brush to a point to start a new sub-path. UseCGContextAddLineToPointTo add a line from the current start point to the end point. Note that after CGContextAddLineToPoint is called, the start point is reset, which indicates the end point.

For example

Code

-(Void) drawRect :( CGRect) rect {CGContextRef context = UIGraphicsGetCurrentContext (); // obtain the current context // set the color CGContextSetFillColorWithColor (context, [UIColor whiteColor]. CGColor); CGContextSetStrokeColorWithColor (context, [UIColor lightGrayColor]. CGColor); // CGContextFillRect (context, rect); CGContextStrokeRect (context, rect); // the actual line and point code CGContextSetStrokeColorWithColor (context, context, [UIColor redColor]. CGColor); // set the stroke color CGContextSetLineWidth (context, 4.0); // CGContextSetLineCap (context, kCGLineCapRound); // CGContextSetLineJoin (context, kCGLineJoinRound) at the top of the line ); // line Intersection Mode CGContextMoveToPoint (context, 10, 10); CGContextAddLineToPoint (context, 40, 40); CGContextAddLineToPoint (context, 10, 80); CGContextStrokePath (context );}

Here we will refer to the line top mode and useCGContextSetLineCapIn three ways

Line Intersection Mode, useCGContextSetLineJoinThere are also three

Dotted Line
Effect

Code

    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);    CGContextSetLineWidth(context, 1.0);    CGContextSetLineCap(context, kCGLineCapRound);    CGContextSetLineJoin(context, kCGLineJoinRound);    CGFloat lengths[] = {2};    CGContextSetLineDash(context, 1, lengths, 1);    CGContextMoveToPoint(context,10,10);    CGContextAddLineToPoint(context, 40, 40);    CGContextAddLineToPoint(context, 10, 80);    CGContextStrokePath(context);

UsageCGContextSetLineDashParameter Details

void CGContextSetLineDash (   CGContextRef _Nullable c,   CGFloat phase,   const CGFloat * _Nullable lengths,   size_t count);

The context drawn by c. This does not need to mention phase. Where does the first dotted line start? For example, if 3 is input, then lengths starts from the third unit, a C array, it indicates the assignment of the draw part and the blank part. For example, if [2, 2] is input, two units are drawn, and two blank units are created to repeat the count lengths count. Arc

Quartz provides two methods to draw an arc.

CGContextAddArc, a common section of an arc (with a center, a radius, and an arc in a radian) CGContextAddArcToPoint, used to draw a rounded corner.

CGContextAddArcParameters

void CGContextAddArc (   CGContextRef _Nullable c,   CGFloat x,   CGFloat y,   CGFloat radius,   CGFloat startAngle,   CGFloat endAngle,   int clockwise);

C. You do not need to specify the coordinate origin radius, startAngle/endAngle, and clockwise for a certain radian. 1 indicates clockwise, 0 indicates counterclockwise.
For example
This function is very simple.

  CGContextAddArc(context,50,50, 25,M_PI_2,M_PI,1);  CGContextStrokePath(context);

CGContextAddArcToPoint is complicated, but it is not that difficult to understand
Function body

void CGContextAddArcToPoint (   CGContextRef _Nullable c,   CGFloat x1,   CGFloat y1,   CGFloat x2,   CGFloat y2,   CGFloat radius);

Parameters

C context x1, y1 and the current vertex (x0, y0) determine the first tangent (x0, y0)-> (x1, y1) x2, y2 and (x1, y1) determines the radius of the second tangent.

That is to say,
Draw an arc with the radius, which is tangent to the preceding two straight lines.

Code

    CGContextMoveToPoint(context, 100, 50);    CGContextAddArcToPoint(context,100,0,50,0, 50);    CGContextStrokePath(context);

Effect

Why

The two red lines in the figure are the above two lines, respectively (x0, y0)-> (x1, y1) and (x1, y1)-> (x2, y2 ), so what we want to cut between the two lines is naturally the blue arc in the figure.

Elliptical/rectangular

Relatively simple. I will not repeat it here

Example

    CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);    CGContextAddEllipseInRect(context, CGRectMake(10, 10,40, 20));    CGContextAddRect(context, CGRectMake(10, 10,40, 20));    CGContextStrokePath(context);

Effect

Curve

Quartz uses polynomials in computer graphics to draw curves. It supports quadratic and cubic curves.
You can use CGContextAddCurveToPoint to draw a cubic curve,
Function body

void CGContextAddCurveToPoint (   CGContextRef _Nullable c,   CGFloat cp1x,   CGFloat cp1y,   CGFloat cp2x,   CGFloat cp2y,   CGFloat x,   CGFloat y);

Parameters

C context cp1x, cp1y the first control point cp2x, cp2y the second control point x, y the end point
Effect

UsageCGContextAddQuadCurveToPointTo draw a quadratic curve,
Function body,

void CGContextAddQuadCurveToPoint (   CGContextRef _Nullable c,   CGFloat cpx,   CGFloat cpy,   CGFloat x,   CGFloat y);

Parameters

C context cpx, cpy control point x, y end point
Effect