iOS Development journal 10-Draw pie slices with cashaplayer

ios-drawing sector with Cashaplayer

To increase the sense of application experience, we dynamically draw pie-shaped or pie chart effects.

Here we use the cashapelayer, so we don't have to draw the graph inside the draw function again (void)

Reference Code

-(void) ReDraw

{

Cashapelayer *chartline;

if (chartline!=nil)

{

[chartline removeallanimations];//So you can draw a pie chart again.

}

Else

{

chartline = [cashapelayerlayer];

Chartline. linewidth = 40;//The width of the fill line is set here, this parameter is important

chartline. LineCap = Kcalinecapbutt; Set line end style, this is also a very important parameter

Chartline. Strokecolor = [[uicolor Redcolor] Cgcolor]; The color of the drawn line

Chartline. FillColor = nil;

self. Clipstobounds = NO; This property indicates if the range of the container to which the drawing is drawn is cropped, and here we set to YES to trim out the out-of-range drawing

[Self. layer Addsublayer:chartline];

}

cgmutablepathref pathref = cgpathcreatemutable ();

Cgpathaddarc(pathref, &cgaffinetransformidentity,

cgrectgetwidth (self. FRAME)/2, cgrectgetheight (self. FRAME)/2, 0, m_pi*3/2, NO);

Chartline. path = pathref;

Cabasicanimation *pathanimation = [cabasicanimation animationwithkeypath:@ "Strokeend"];

Pathanimation. Duration = 1.1;//Sets the duration of the drawing animation

Pathanimation.timingfunction = [camediatimingfunction functionwithname: Kcamediatimingfunctioneaseout];

Pathanimation. fromvalue = [nsnumber numberwithfloat:0.0f];

Pathanimation. tovalue = [nsnumber numberwithfloat:1.0f];

Pathanimation. autoreverses = no;//Whether to flip drawing

Pathanimation.fillmode = Kcafillmodeforwards;

Pathanimation. repeatcount = 1;

[chartline addanimation:pathanimation forkey:@ "Strokeendanimation"];

chartline. Strokeend=1.0f;//indicates how much to stop drawing to a percentage, which we use 1 for full drawing

}

Let's take a look at the drawing:

Here we need to say, fan (pie chart principle), we are not actually drawn fan-shaped, can be said to be circular, we just make the circular edge width is very wide, such as: we want to draw the radius of the circle is R = 100, if we want to draw a fan can be set to the width of 200, because, The line is calibrated from the center to the center of the radius, so that the edge width = 200, then the distance from the edge back to the center is 200/2 = 100, so you see, 100==r, so that the effect looks like we are drawing a pie chart. Instead of a real pie chart, we draw the effect of a pie chart in a different way, and here we particularly need the main thing, if you want to make a successful pie chart, you need to have a good grasp of the width of the circle radius and circular edges, and the proportional relationship between them, Because the relationship between them determines the effect and shape of the pie chart you want to draw, such as: when there is hollow in the middle, and the size of the hollow.

iOS Development journal 10-draw a fan with Cashaplayer