關情紙尾-----Quartz2D-繪製圓形下載進度條,餅圖

繪製下載進度條

1.搭建界面.

2.拖動滑竿的時候讓他裏面的可以跟着個人拖動,數字在改變.
　　數字改變時有一個注意點, 就是要顯示%,它是一個特殊的符號,要用兩個%%表明一個%

3.拖動滑竿的時候就是在上面畫弧.
　　從最上面,按順時針畫,因此,它的起始角度是-90度.結束角度也是-90度
　　也是從起始角度開始畫,
　　起始角度-90度, 看你下載進度是多少
　　假如說你下載進度是100,就是1 * 360度
　　也就是說這個進度佔你360度多少分之一

　　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];

　　要得到Progress的值,這個進度值沒有, 因此要傳進來才能畫.弄一個成員變量
　　要在值改變的時候就要傳進來.
　　要拿到ProgressView纔可以傳進來,因此要拖線,拿到ProgressView
　　全部都作好的, 發現沒有畫圓孤?
　　爲何?
　　問題:drawRect方法總共調用多少次?
　　總共就調用一次, 第一次Progress爲0,之後都不會執行了
　　解決:每次傳的時候,就要畫一次,
　　重寫Progress方法
　　

-(void)setProgress:(CGFloat)progress{
　　　　_progress = progress;　　
　　　　//手動調用drawRect方法, 讓它從新繪製
　　　　[self setNeedsDisplay];
}

　　

 運行發現仍是不畫,爲何?

　　　　緣由:drawRect方法是不能手動調用,由於在drawRect方法中才能獲取跟View相關聯的上下文
　　　　系統在調用DrawRect方法時,會自動幫你建立一個跟View相關聯的上下文,而且傳遞給它.
　　　　本身調用的,沒有給drawRect方法傳遞上下文.因此在draw方法中拿不到上下文.

　　　　解決辦法:想要重繪,調用[self setNeedsDisplay];
　　　　告訴系統從新繪製View,系統就會自動幫你調用drawRect方法,系統在調用
　　　　drawRect方法,它會幫你建立上下文

 

繪製餅圖

第一步, 獲取上下文
第二步,拼接路徑 ,繪製第一個扇形
獲取上下文

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;

 

拼接路徑

UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　radius:radius 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　 startAngle:startA 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  endAngle:endA 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 clockwise:YES];

添加一根線到圓心
[path addLineToPoint:center];
把路徑添加到上下文
CGContextAddPath(ctx, path.CGPath);
把上下文渲染到View
CGContextFillPath(ctx);

 

注意點: CGFloat angle = 25 / 100.0 * M_PI * 2; 
100.0必定要加一個.0

繪製第二個扇形
同樣的, 把路徑描述第二個扇形就行了
直接來個path =
讓Path指針從新指向一個新的對象.也就是把指針重複利用了
以前的那個對象已經用完了,已經添加到了上下文當中了.

第二個扇形

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];
把二個路徑添加到上下文
CGContextAddPath(ctx, path.CGPath);
把上下文渲染到View
CGContextFillPath(ctx);


添加第二個扇形以後, 發現它們的顏色都同樣,想要修改它的顏色
在下面再寫一個
[[UIColor greenColor] set];
下面的一個顏色把以前的東西給覆蓋了.
解決辦法, 讓它渲染兩次

第三個扇形,把第二個拷貝一下就行了


總結:
有沒有發如今畫三個扇形用太多代碼了,
裏面有不少代碼類似.
是否是能夠把代碼給抽一下
能夠用便利數組的的方式
發現就兩個地方變了, 一個數字變了, 一個顏色變了.


抽取代碼:
假設他給一組數據
NSArray datas = @[@25,@25,@50];
把數組便利出來

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;

　　描述路徑
　　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];
}

隨機顏色:alpha通道它的取值範圍是0-255;OC裏面的取值範圍只能是0到1,把它 / 255.0就讓它到這個範圍了,arc4random_uniform(256)隨機產生 0 - 255的數.顏色通道它的取值範圍是0 到 255.因此說要把0 到 255轉換成0 到 1直接是 0 ~ 255 / 255.0就能夠了.恰好是255就是255 / 255.0 就是1,剛纔是0 就是 0 / 255.0 就是0.