Basic example of drawing basic graphics with CGContextRef in iOS App development

Graphics Context is the graphic context, which can also be understood as a canvas on which we can draw. After drawing, we can put the canvas into our view for display, and view is regarded as a frame.
CGContextRef is so powerful that we can draw all kinds of shapes with it. Being flexible with these techniques during development can help us provide code levels.

Start by creating a custom CustomView class that integrates with UIView.
Implement the code in CustomView.m.

#import <QuartzCore/QuartzCore.h>

Override the DranRect method, in which the graph is drawn.
Once CustomView is written, you need to use it in your view controller.
Usage:

  CustomView *customView = [[CustomView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];

    [self.view addSubview:customView];

Write a word

- (void)drawRect:(CGRect)rect

{

    // Gets the current artboard 

    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // color 

    CGContextSetRGBStrokeColor(ctx, 0.2, 0.2, 0.2, 1.0);

    // Draw the width of the line 

    CGContextSetLineWidth(ctx, 0.25);

    // Began to write 

    [@" I am writing " drawInRect:CGRectMake(10, 10, 100, 30) withFont:font];  

    [super drawRect:rect];

}

This code can be very beautiful to write four words: I am the word. It's easy to understand. Every sentence is annotated.

Draw a straight line

- (void)drawRect:(CGRect)rect

{

    // Gets the current artboard 

    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // color 

    CGContextSetRGBStrokeColor(ctx, 0.2, 0.2, 0.2, 1.0);

    // Draw the width of the line 

    CGContextSetLineWidth(ctx, 0.25);

    // At the top of the dash 

    CGContextMoveToPoint(ctx, 0, 10);

    CGContextAddLineToPoint(ctx, self.bounds.size.width, 10);

    CGContextStrokePath(ctx);

    [super drawRect:rect];

}

Draw arc

CGContextSetRGBStrokeColor(context, 0, 0, 1, 1);// Change the brush color 

     

    CGContextMoveToPoint(context, 140, 80);// To coordinate p1

     

    //CGContextAddArcToPoint(CGContextRef c, CGFloat x1, CGFloat y1,CGFloat x2, CGFloat y2, CGFloat radius)

    //x1,y1 with p1 The formation of 1 The coordinates of the bar p2 . x2,y2 End coordinates p3 The formation of 1 The line p3,radius The radius of , Pay attention to ,  We need to figure out the length of the radius ,

    CGContextAddArcToPoint(context, 148, 68, 156, 80, 10);

     

    CGContextStrokePath(context);// Painting path 

A circle

- (void)drawRect:(CGRect)rect

{

    // Gets the current artboard 

    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // color 

    CGContextSetRGBStrokeColor(ctx, 0.2, 0.2, 0.2, 1.0);

    // Draw the width of the line 

    CGContextSetLineWidth(ctx, 0.25);

    //void CGContextAddArc(CGContextRef c,CGFloat x, CGFloat y,CGFloat radius,CGFloat startAngle,CGFloat endAngle, int clockwise)1 Radians = 180 ° / PI.   (material 57.3  ° )   Degrees are radians times PI 180 ° / PI.  360  °  = 360 * PI. /180  = 2 PI.   radian 

    // x,y Is the dot coordinate, radius Radius, startAngle Is the initial radian, endAngle for   The radian at the end, clockwise 0 Is clockwise, 1 It's counterclockwise. 

    CGContextAddArc(ctx, 100, 20, 20, 0, 2*M_PI, 0); // add 1 A round 

    CGContextDrawPath(ctx, kCGPathStroke); // Draw the path 

    [super drawRect:rect];

}

Do you remember the formula for drawing a circle? Do you know what M_PI is? Is that equal to what? Imagine 1!

Draw a large circle and fill it with color

UIColor *aColor = [UIColor colorWithRed:1 green:0.0 blue:0 alpha:1];

     

    CGContextSetFillColorWithColor(context, aColor.CGColor);// Fill color 

     

    CGContextSetLineWidth(context, 3.0);// The width of the line 

     

    CGContextAddArc(context, 250, 40, 40, 0, 2 * M_PI, 0); // add 1 A round 

    //kCGPathFill Fill non-zero winding rule ,kCGPathEOFill The notation is odd and even ,kCGPathStroke The path ,kCGPathFillStroke Path to fill ,kCGPathEOFillStroke Represents a stroke line, not a fill 

     

    CGContextDrawPath(context, kCGPathFillStroke); // Draw path and fill 

Draw a rectangular

- (void)drawRect:(CGRect)rect

{

    // Gets the current artboard 

    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // color 

    CGContextSetRGBStrokeColor(ctx, 0.2, 0.2, 0.2, 1.0);

    // Draw the width of the line 

    CGContextSetLineWidth(ctx, 0.25);

    CGContextAddRect(ctx, CGRectMake(2, 2, 30, 30));

    CGContextStrokePath(ctx);

    [super drawRect:rect];

}

Painting fan

  // Draw a fan, also draw a circle, just set the size of the Angle, form 1 A fan 

    aColor = [UIColor colorWithRed:0 green:1 blue:1 alpha:1];

    CGContextSetFillColorWithColor(context, aColor.CGColor);// Fill color 

    // In order to 10 Specify an Angle sector for the radius to draw around the center of the circle 

    CGContextMoveToPoint(context, 160, 180);

    CGContextAddArc(context, 160, 180, 30,  -60 * PI / 180, -120 * PI / 180, 1);

    CGContextClosePath(context);

    CGContextDrawPath(context, kCGPathFillStroke); // Draw the path 

 

Let me draw the Bessel curve

 //2 Time curve 

    CGContextMoveToPoint(context, 120, 300);// Set up the Path The starting point of the 

    CGContextAddQuadCurveToPoint(context,190, 310, 120, 390);// Set the control point coordinates and end point coordinates of Bessel curve 

    CGContextStrokePath(context);

    //3 Subcurvilinear function 

    CGContextMoveToPoint(context, 200, 300);// Set up the Path The starting point of the 

    CGContextAddCurveToPoint(context,250, 280, 250, 400, 280, 300);// Set the control point coordinates and control point coordinates terminal coordinates of bezier curve 

    CGContextStrokePath(context);