Custom Quartz2D download Control for IOS () UI of cat learning, iosquartz2d

Custom Quartz2D download Control for IOS () UI of cat learning, iosquartz2d

CAT/CAT sharing, must be excellent

Material address: http://blog.csdn.net/u013357243/article/details/45333795
For Original Articles, please reprint them. Reprinted Please note: Yan Nai-yu's blog
Http://blog.csdn.net/u013357243? Viewmode = contents

Effect

Custom Control Process

The main process is described in the previous article. Here we mainly introduce the code implementation.

First, we need to make a view and then implement it in four steps:
1: Get Context
2: splicing path
3: add the path to the context.
4: rendering the context to the view

// 1: Obtain the context CGContextRef ctx = UIGraphicsGetCurrentContext (); // 2: splicing path/* we need to draw a circular chart */CGPoint center = CGPointMake (50, 50 ); // center CGFloat radius = 43; // radius CGFloat startA =-M_PI_2; // start angle CGFloat endA =-M_PI_2 + _ progress * M_PI * 2; // end angle. UIBezierPath * path = [UIBezierPath bezierPathWithArcCenter: center radius: radius startAngle: startA endAngle: endA clockwise: YES]; // clockwise direction. // 3: add the path to the context. CGContextAddPath (ctx, path. CGPath); // set the color to red [[UIColor redColor] set]; // set the line width CGContextSetLineWidth (ctx, 10 ); // set the style at both ends to rounded CGContextSetLineCap (ctx, kCGLineCapRound); // 4: render the context to the view. CGContextStrokePath (ctx );

Quartz2D draw a straight line to learn and remember

Effect:

// When the custom view is displayed for the first time, the drawRect Method 15-(void) drawRect :( CGRect) rect16 {17 18 // 1 will be called. obtain the graphic context associated with the current view (because the graphic context determines the output target of the drawing) /19 // if you call the UIGraphicsGetCurrentContext method in the drawRect method, the context 20 CGContextRef ctx = UIGraphicsGetCurrentContext () is obtained. // No need *, same as id21 22 // 2. drawing (draw a straight line), save the drawing information 23 // set the starting point 24 CGContextMoveToPoint (ctx, 20,100); 25 // set the ending point 26 CGContextAddLineToPoint (ctx, 300,100 ); 27 28 29 // set the drawing status 30 // set the line color to Blue 31 CGContextSetRGBStrokeColor (ctx, 0, 1.0, 0, 1.0 ); 32 // set the line width 33 CGContextSetLineWidth (ctx, 15); 34 // set the line start and end style to rounded corner 35 CGContextSetLineCap (ctx, kCGLineCapRound ); 36 // set the corner style of the line to rounded corner 37 CGContextSetLineJoin (ctx, kCGLineJoinRound); 38 // 3. rendering (draw a blank line) 39 CGContextStrokePath (ctx); 40 41 /// note that the line cannot be rendered as a solid 42 // CGContextFillPath (ctx ); 43 44 45 46 // set the second line 47 // set the start point of the second line 48 CGContextMoveToPoint (ctx, 50,200 ); 49 // set the end point of the second antenna (the end point of the previous line is automatically used as the start point) 50 CGContextAddLineToPoint (ctx, 300, 60 ); 51 52 // set the drawing status 53 // CGContextSetRGBStrokeColor (ctx, 1.0, 0.7, 0.3, 1.0 ); 54 // Method 55 [[UIColor grayColor] set]; 56 // set the line width 57 CGContextSetLineWidth (ctx, 10 ); 58 // set the line start and end styles 59 CGContextSetLineCap (ctx, kCGLineCapButt ); 60 61 // render the second line graph to the view 62 // draw a hollow line 63 CGContextStrokePath (ctx); 64} 65

Draw triangle

Actually, the line is closed with a code.
// Close the start and end points

CGContextClosePath(ctx);

Effect:

-(Void) drawRect :( CGRect) rect15 {16 // 1. obtain the graphic Context 17 CGContextRef ctx = UIGraphicsGetCurrentContext (); 18 19 // 2. draw a triangle 20 // set the start point 21 CGContextMoveToPoint (ctx, 20,100); 22 // set the second point 23 CGContextAddLineToPoint (ctx, 40,300 ); 24 // set the third vertex 25 CGContextAddLineToPoint (ctx, 200,200); 26 // set the endpoint 27 // CGContextAddLineToPoint (ctx, 20,100 ); 28 // close start and end 29 CGContextClosePath (ctx); 30 31 // 3. render the graph to layer 32 CGContextStrokePath (ctx); 33 34}

Draw a quadrilateral

Effect:

-(Void) drawRect :( CGRect) rect15 {16 17 // 1. obtain the graphic Context 18 CGContextRef ctx = UIGraphicsGetCurrentContext (); 19 // 2. draw a quadrilateral 20 CGContextAddRect (ctx, CGRectMake (20, 20,150,100); 21 22 // to set the drawing state, you must 23 // CGContextSetRGBStrokeColor (ctx, 1.0, 0, 0, 1.0); 24 // specifies the type of image to be drawn (hollow or solid ). you need to set status 25 // CGContextSetRGBFillColor (ctx, 1.0, 0, 0, 1.0) using the method of what type ); 26 27 // call the OC method to set the drawing color 28 // [[UIColor purpleColor] setFill]; 29 // [[UIColor blueColor] setStroke]; 30 // call the OC method to set the drawing color (both solid and hollow) 31 // [[UIColor greenColor] set]; 32 [[UIColor colorWithRed: 1.0 green: 0 blue: 0 alpha: 1.0] set]; 33 34 35 // 3. render the image to layer 36 // hollow 37 CGContextStrokePath (ctx); 38 // solid 39 // CGContextFillPath (ctx); 40 41}

Circle

Effect: the simplest circle

-(Void) drawRect :( CGRect) rect {// 1. obtain the context CGContextRef ctx = UIGraphicsGetCurrentContext (); // draw the circle CGContextAddArc (ctx, 100,100, 50, 0, 2 * M_PI, 0); // 3. rendering (note that the draw line can only be drawn through hollow) // CGContextFillPath (ctx); CGContextStrokePath (ctx );}

If you change to CGContextFillPath (ctx );
Then it will become a solid heart. You will know about the frontend and backend contacts.

Effect: draw an ellipse

// Draw an ellipse // 1. obtain the context CGContextRef ctx = UIGraphicsGetCurrentContext (); // 2. circle CGContextAddEllipseInRect (ctx, CGRectMake (50,100,100,230); [[UIColor purpleColor] set]; // 3. rendering // CGContextStrokePath (ctx); CGContextFillPath (ctx );

Draw an arc

Effect:

// Draw an arc // 1. obtain the context CGContextRef ctx = UIGraphicsGetCurrentContext (); // 2. draw an arc // x/y center // radius // radian starting from startAngle // radian ending from endAngle // the direction of the arc drawn from clockwise (0 clockwise, 1) // CGContextAddArc (ctx, 100,100, 50,-M_PI_2, M_PI_2, 0); CGContextAddArc (ctx, 100,100, 50, M_PI_2, M_PI, 0); CGContextClosePath (ctx ); // 3. rendering // CGContextStrokePath (ctx); CGContextFillPath (ctx );

1/4 circle: used for pie chart

Effect:

// 1. obtain the context CGContextRef ctx = UIGraphicsGetCurrentContext (); // 2. draw a pie chart // draw a line CGContextMoveToPoint (ctx, 100,100); CGContextAddLineToPoint (ctx, 100,150); // draw an arc CGContextAddArc (ctx, 100,100, 50, M_PI_2, M_PI, 0 ); // CGContextAddArc (ctx, 100,100, 50,-M_PI, M_PI_2, 1); // close the path CGContextClosePath (ctx); [[UIColor brownColor] set]; // 3. rendering (note that the draw line can only be drawn through hollow) CGContextFillPath (ctx); // CGContextStrokePath (ctx );