Cat Learn iOS (28) UI quartz2d Custom Download controls

Cat Share, must boutique

Material code Address: http://download.csdn.net/detail/u013357243/8614731
Original articles, welcome reprint. Reprint Please specify: Sanayu's Blog
Address: http://blog.csdn.net/u013357243?viewmode=contents

Effect

Custom control Procedures

The main process is described in the previous article, here is the main introduction of code implementation

The first thing to do is to put the view and realize it is mainly four steps:
1: Get Context
2: Stitching Path
3: Add the path to the context.
4: Render the context to the view

//1: Get ContextCgcontextref CTX = Uigraphicsgetcurrentcontext ();//2: Stitching path    / * We need to draw a circle chart * /    CgpointCenter = Cgpointmake ( -, -);//Center    CGFloatRadius = +;//Radius    CGFloatStarta =-m_pi_2;//Starting angle    CGFloatEnda =-m_pi_2 + _progress * M_PI *2;//End angle. Uibezierpath *path = [Uibezierpath bezierpathwitharccenter:center radius:radius Startangle:starta EndAngle:endA Clockwise:YES];//clockwise clockwise direction.     ///3: Add the path to the context. Cgcontextaddpath (CTX, Path. Cgpath);//Set color to red[[UicolorRedcolor] set];//Set the width of the lineCgcontextsetlinewidth (CTX,Ten);//Set the styles on both sides to rounded cornersCgcontextsetlinecap (Ctx,kcglinecapround);///4: Renders the context to the view. Cgcontextstrokepath (CTX);

Quartz2d to learn the place to remember to draw a straight line

Effect:

 //The DrawRect method is called when the custom view is first displayed-(void) DrawRect:(cgrect) rect ( 1). Gets the graphics context associated with the current view (because the drawing context determines the output target to be drawn)/   If the Uigraphicsgetcurrentcontext method is called in the DrawRect method, the context of the layer  is obtained cgcontextref ctx= Uigraphicsgetcurrentcontext ();//No need *, same ID21 22//2. Drawing (drawing lines), saving drawing information23//Set the starting point24Cgcontextmovetopoint (CTX, +) ; 25//Set end point26Cgcontextaddlinetopoint (CTX, +) ; 27 28 29//Set the state of the drawing30//Set the color of the line to blue31Cgcontextsetrgbstrokecolor (CTX, 0, 1.0, 0, 1.0); 32//Set the width of the line33cgcontextsetlinewidth (CTX, ); 34//Set the line start and end style to rounded corners35Cgcontextsetlinecap (CTX, Kcglinecapround); 36//Set the corner of the line to a rounded corner37Cgcontextsetlinejoin (CTX, Kcglinejoinround); 38//3. Rendering (drawing a hollow line)39Cgcontextstrokepath (CTX); 40 41//// Note that the line cannot be rendered as solid42//Cgcontextfillpath (CTX);43 44 45 46//Set second line47//Set the starting point of the second line48Cgcontextmovetopoint (CTX, ,) ; 49//Set the end of the second antenna (automatically the end of the previous line as the starting point)50Cgcontextaddlinetopoint (CTX, +) ; 51 52//Set the state of the drawing53//Cgcontextsetrgbstrokecolor (CTX, 1.0, 0.7, 0.3, 1.0);54//The second way of setting colors55[[Uicolor Graycolor]set];56//Set the width of the line57cgcontextsetlinewidth (CTX, ten); 58//Set style for start and end of line59Cgcontextsetlinecap (CTX, Kcglinecapbutt); 60 61//Render the graph of the second line to the view62//Draw a hollow line63Cgcontextstrokepath (CTX); 64}65

Draw a triangle

is actually the line off a code
Close start and end points

CGContextClosePath(ctx);

Effect:

-(void) DrawRect:(cgrect) rect {1. Get the graphics context cgcontextref Ctx=uigraphicsgetcurrentcon  Text ();18 19//2. Drawing triangles20//Set the starting point21stCgcontextmovetopoint (CTX, +) ; 22//Set a second point23Cgcontextaddlinetopoint (CTX, +) ; 24//Set a third point25Cgcontextaddlinetopoint (CTX, @) ; 26//Set end point27//Cgcontextaddlinetopoint (CTX, +);28//Close start and end29Cgcontextclosepath (CTX); 30 31//3. Render the graphic onto the layer32Cgcontextstrokepath (CTX); 33 34}

Draw Quadrilateral

Effect:

-(void) DrawRect:(cgrect) rect 1.  Get the graphics context cgcontextref CTX=UIGRAPHICSG  Etcurrentcontext ();19//2. Drawing quadrilateral20Cgcontextaddrect (CTX, cgrectmake ()    ; 21 22//If you want to set the state of the drawing must be before rendering23//Cgcontextsetrgbstrokecolor (CTX, 1.0, 0, 0, 1.0);24//Draw what type of graphic (hollow or solid). What type of method will be used to set the state25//Cgcontextsetrgbfillcolor (CTX, 1.0, 0, 0, 1.0);26 27//Call OC method to set the color of the drawing28//[[Uicolor Purplecolor] setfill];29//[[Uicolor Bluecolor] setstroke];30//Call OC method to set the drawing color (both solid and hollow are set)31//[[Uicolor Greencolor] set];32[[Uicolor colorwithred:1.0 green:0 blue:0 alpha:1.0]Set];33 34 35//3. Rendering a graphic onto a layer36//Hollow37Cgcontextstrokepath (CTX); 38//Solid39//Cgcontextfillpath (CTX);40 41}

Draw a Circle

Effect: The simplest round

- (void)drawRect:(CGRect)rect{    // 1.获取上下文    CGContextRef ctx = UIGraphicsGetCurrentContext();    // 画圆    10010050020);    // 3.渲染 (注意, 画线只能通过空心来画)//    CGContextFillPath(ctx);    CGContextStrokePath(ctx);}

If changed to Cgcontextfillpath (CTX);
Then it will become a solid circle. Before and after the contact will know, not much to say.

Effect: Draw an Ellipse

// 画椭圆    // 1.获取上下文    CGContextRef ctx = UIGraphicsGetCurrentContext();    // 2.画圆    CGContextAddEllipseInRect(ctx, CGRectMake(50100100230));    set];    // 3.渲染    //    CGContextStrokePath(ctx);    CGContextFillPath(ctx);

Drawing arcs

Effect:

 //draw arc      1. Get context  Cgcontextref CTX = Uigraphicsgetcurrentcontext ();    //2. Draw Arc     //x/y Center     //radius radius     //startangle start of radians     //endangle end of radians     //clockwise draw the direction of the arc (0 clockwise, 1 counterclockwise)     //Cgcontextaddarc (CTX,-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);  

One-fourth Circle: For pie chart

Effect:

 //1. Get ContextCgcontextref CTX = Uigraphicsgetcurrentcontext ();//2. Appeased-shaped Image    //Draw lineCgcontextmovetopoint (CTX, -, -); Cgcontextaddlinetopoint (CTX, -, Max);//Draw arcCgcontextaddarc (CTX, -, -, -, M_pi_2, M_PI,0);//Cgcontextaddarc (CTX,-m_pi, m_pi_2, 1);    //close pathCgcontextclosepath (CTX); [[Uicolor Browncolor]Set];//3. Rendering (note that the line can only be drawn by hollow)Cgcontextfillpath (CTX);//Cgcontextstrokepath (CTX);

Cat Learn iOS (28) UI quartz2d Custom Download controls