SoFunction
Updated on 2025-04-11

iOS development CGContextRef drawing usage summary

This article summarizes the iOS development CGContextRef drawing usage for your reference. The specific content is as follows

1. Create a canvas

CGContextRef ctx = UIGraphicsGetCurrentContext();

2. Set properties

//Rotation, Note: The setting operation must be before adding the graphics. If it is set after adding the graphics, it has been drawn at this time and is invalid//When rotating, the entire layer rotates//Swipe 45 degreesCGContextRotateCTM(ctx, M_PI_4);
//Scaling: Scaling 0.5 times in the x direction, and scaling 1.5 times in the y directionCGContextScaleCTM(ctx, 0.5, 1.5);
//Plant: 50 in the x direction, 100 in the y directionCGContextTranslateCTM(ctx, 50, 100);
CGContextSetLineJoin(ctx, kCGLineJoinRound);
//Line widthCGContextSetLineWidth(ctx, 1.0);
//The corners of the starting point and end pointCGContextSetLineCap(ctx, kCGLineCapRound);
//Round cornersCGContextSetLineJoin(ctx, kCGLineJoinRound);
//transparencyCGContextSetAlpha(ctx, 0.5)

3. Draw a straight line

//starting pointCGContextMoveToPoint(ctx, 10.0, 100.0);
//endCGContextAddLineToPoint(ctx, -20.0, 100.0);
//Color Both ways to set color are OK//CGContextSetRGBStrokeColor(ctx, 0, 1.0, 0, 1.0);
[[UIColor redColor] set];
// Rendering, straight lines can only be drawn hollow, and CGContextFillPath(ctx) cannot be called// Or use this method: CGContextDrawPath(ctx, kCGPathStroke);CGContextStrokePath(ctx);

Or use the following method to draw a straight line

CGPoint point[2];//Coordinate pointspoint[0] = CGPointMake(10.0, 100.0);//First pointpoint[1] = CGPointMake(-20.0, 100.0);//End point//points[] coordinate array, and count sizeCGContextAddLines(context, aPoints, 2);//Add lineCGContextDrawPath(context, kCGPathStroke);

4. Draw dotted lines

//Set the dotted line colorCGContextSetStrokeColorWithColor(ctx, [UIColor redColor].CGColor);
//Set the dotted line to draw the starting pointCGContextMoveToPoint(ctx, 10.0, 50.0);
//Set the dotted line to draw the end pointCGContextAddLineToPoint(ctx, -20.0, 50.0);
//Set the width interval of the dotted line arrangement: The numbers in the arr below represent drawing 3 points first and then drawing 1 pointCGFloat arr[] = {3, 2};
//The last parameter "2" below represents the number of arrangements.CGContextSetLineDash(ctx, 0, arr, 2);
CGContextDrawPath(ctx, kCGPathStroke);

5. Draw a triangle

//starting pointCGContextMoveToPoint(ctx, , 200.0);
//Inflection point 1CGContextAddLineToPoint(ctx, -50.0, 250.0);
//endCGContextAddLineToPoint(ctx, +50.0, 250.0);
//Color Both ways to set color are OK//CGContextSetRGBStrokeColor(ctx, 0, 1.0, 0, 1.0);
[[UIColor redColor] set];
//Merge trianglesCGContextClosePath(ctx);
CGContextFillPath(ctx);

6. Draw a rectangle

CGRect rectangle = CGRectMake(10.0, 300.0, -20.0, 60.0);
CGContextAddRect(ctx, rectangle);
CGContextSetFillColorWithColor(ctx, [UIColor redColor].CGColor);
CGContextFillPath(ctx);

7. Draw a circle

/**
 c               Current graphic
 x               Center coordinate x
 y                                                                                   � 
 radius       radius
 startAngle  The angle between the starting point of the arc and the positive X-axis
 endAngle    The angle between the end point of the arc and the positive X-axis
 clockwise   Specify 0 to create a clockwise arc, or specify 1 to create a counterclockwise arc
 */
CGContextAddArc(ctx, , 100.0, 75.0, 0.0, M_PI+0.5, 0);
CGContextSetFillColorWithColor(ctx, [UIColor redColor].CGColor);
CGContextFillPath(ctx);

8. Draw an ellipse

CGContextAddEllipseInRect(ctx, CGRectMake(x, y, 100.0, 60.0));
CGContextSetFillColorWithColor(ctx, [UIColor redColor].CGColor);
CGContextFillPath(ctx);

9. Draw a fan shape

CGContextMoveToPoint(ctx, x, y);
CGContextAddArc(ctx, x, y, 75.0, 0.0, M_PI+0.5, 0);
CGContextSetFillColorWithColor(ctx, [UIColor redColor].CGColor);
CGContextSetStrokeColorWithColor(ctx, [UIColor blueColor].CGColor);
CGContextDrawPath(ctx, kCGPathFillStroke);

10. Draw a quadratic Bezier curve

CGContextMoveToPoint(context, 120, 300);//Set the starting point of PathCGContextAddQuadCurveToPoint(context,190, 310, 120, 390);//Set the control point coordinates and end point coordinates of the Bezier curveCGContextStrokePath(context);

11. Draw the cubic Bezier curve

CGContextMoveToPoint(context, 200, 300);//Set the starting point of PathCGContextAddCurveToPoint(context,250, 280, 250, 400, 280, 300);//Set the control point coordinates and control point coordinates of the Bezier curve.CGContextStrokePath(context);

12. Draw text

// Set the attributes of the textNSMutableDictionary *dict = [NSMutableDictionary dictionary];
dict[NSForegroundColorAttributeName] = [UIColor whiteColor];
dict[NSFontAttributeName] = [UIFont systemFontOfSize:14];
[@"I Love iOS" drawInRect:rect withAttributes:dict];

13. Draw pictures

UIImage *image = [UIImage imageNamed:@""];  
[image drawInRect:CGRectMake(60, 340, 20, 20)];//Draw pictures in coordinates//[image drawAtPoint:CGPointMake(100, 340)];// Keep the image size and start drawing the picture at point point. You can remove the comments and seeCGContextDrawImage(context, CGRectMake(100, 340, 20, 20), );//Use this to make the picture upside down//CGContextDrawTiledImage(context, CGRectMake(0, 0, 20, 20), );//Tile picture 

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.