Close the love paper tail-----quartz2d Draw the download progress bar, pie chart

Draw the download progress bar

1. Build the interface.

2. Drag the slider to allow him to follow my drag, the number is changing.
When the number changes, there is a point of note, that is, to display the%, it is a special symbol, to use two percent of a%

3. When you drag the slider, the arc is drawn on it.
From the top, draw clockwise, so it's starting angle is-90 degrees. The end angle is also-90 degrees
And starting from the starting point,
Starting angle-90 degrees, see what your download progress is
If your download progress is 100, that's 1 * 360 degrees.
Which means the progress is one of your 360 degrees.

Cgcontextref CTX = Uigraphicsgetcurrentcontext ();
Cgpoint Center = cgpointmake (50, 50);
CGFloat radius = rect.size.width * 0.5;
CGFloat Starta =-m_pi_2;
CGFloat enda =-m_pi_2 + M_PI * 2 * progress;

Uibezierpath *path = [Uibezierpath bezierpathwitharccenter:center
Radius:radius
Startangle:starta
Endangle:enda
Clockwise:yes];

To get the value of the progress, this progress value is not, so it must be passed in to draw. Get a member variable
It is necessary to pass in when the value changes.
To get Progressview to be able to pass in, so to drag line, get Progressview
All done well, found not to draw a circle of loneliness?
Why?
Question: How many times does the DrawRect method call total?
A total of one call, the first progress is 0, will not be executed in the future
Resolution: Every time you pass, you need to draw it once,
Overriding the Progress method
-(void) Setprogress: (cgfloat) progress{
_progress = progress;
Call the DrawRect method manually, and let it redraw
[Self setneedsdisplay];
}
Run the discovery or not draw, why?
Cause: The DrawRect method cannot be called manually because the context associated with the view can be obtained in the DrawRect method
When you call the DrawRect method, the system automatically creates a context that is associated with the view and passes it to it.
Called by itself, without giving the context to the DrawRect method. Therefore, the context is not taken in the draw method.

Workaround: To redraw, invoke [self setneedsdisplay];
Tells the system to redraw the view, the system will automatically call the DrawRect method, the system calls the
DrawRect method that will help you create the context

Draw a pie chart

The first step is to get the context
Step two, stitch the path and draw the first pie
Get context
Cgcontextref CTX = Uigraphicsgetcurrentcontext ();
Cgpoint Center = cgpointmake (125, 125);
CGFloat radius = 100;
CGFloat Starta = 0;
CGFloat enda = 0;
CGFloat angle = 25/100.0 * M_PI * 2;
ENDA = Starta + angle;

Stitching Path
Uibezierpath *path = [Uibezierpath bezierpathwitharccenter:center
Radius:radius
Startangle:starta
Endangle:enda
Clockwise:yes];

Add a line to the center of the circle
[Path Addlinetopoint:center];
To add a path to the context
Cgcontextaddpath (CTX, path.) Cgpath);
Render context to view
Cgcontextfillpath (CTX);

Note: cgfloat angle = 25/100.0 * M_PI * 2;
100.0 Be sure to add one. 0

Draw a second sector
The same, describe the path to the second pie.
Straight to a path =
Let the path pointer point back to a new object. That is, the pointer is reused.
The previous object has been exhausted and has been added to the context.

A second fan
Starta = ENDA;
Angle = 25/100.0 * M_PI * 2;
ENDA = Starta + angle;
Path = [Uibezierpath bezierpathwitharccenter:center
Radius:radius
Startangle:starta
Endangle:enda
Clockwise:yes];
[Path Addlinetopoint:center];
Add two paths to a context
Cgcontextaddpath (CTX, path.) Cgpath);
Render context to view
Cgcontextfillpath (CTX);


After adding the second pie, we find that they all have the same color and want to modify its color
Write another one below.
[[Uicolor Greencolor] set];
One of the following colors covers the previous thing.
Workaround, let it render two times

Third fan, just copy the second one.


Summarize:
Did you find that there are too many codes in the drawing of three fans,
There are a lot of similar code inside.
Is it possible to give the code a smoke?
Can be used in a convenient array of ways
Found two places changed, one number changed, one color changed.


Extract code:
Suppose he gives a set of data
Nsarray datas = @[@25,@25,@50];
Make the array easy.


Nsarray *datas = @[@25,@25,@50];

Cgpoint Center = cgpointmake (125, 125);
CGFloat radius = 100;
CGFloat Starta = 0;
CGFloat angle = 0;
CGFloat enda = 0;

For (NSNumber *number in datas) {

Starta = ENDA;
Angle = number.intvalue/100.0 * M_PI * 2;
ENDA = Starta + angle;

Description path
Uibezierpath *path = [Uibezierpath bezierpathwitharccenter:center
Radius:radius
Startangle:starta
Endangle:enda
Clockwise:yes];

[Path Addlinetopoint:center];
[[Self randomcolor] set];
[Path fill];

}

-(Uicolor *) randomcolor{
CGFloat r = Arc4random_uniform (256)/255.0;
CGFloat g = Arc4random_uniform (256)/255.0;
CGFloat B = arc4random_uniform (256)/255.0;
return [Uicolor colorwithred:r green:g blue:b alpha:1];

}

Random color: alpha channel Its value range is 0-255;
The range of values in OC can only be 0 to 1, and it/255.0 is allowed to this range,
Arc4random_uniform (256) randomly generates 0-255 of the number.
Color channel its value range is 0 to 255.
So we're going to convert 0 to 255 to 0 to 1.
Direct is 0 ~ 255/255.0 on the can.
That's exactly 255, 255/255.0 is 1,
Just 0 is 0/255.0 is 0.

Close the love paper tail-----quartz2d Draw the download progress bar, pie chart