繪制餅圖步驟
新建一個(gè)類,繼承自UIView(略)
在-(void)drawRect:(CGRect)rect方法實(shí)現(xiàn)下述幾步
取得跟當(dāng)前view相關(guān)聯(lián)的圖形上下文(貝塞爾路徑不用)
-
拼接路徑,繪制相應(yīng)的圖形內(nèi)容
- 根據(jù)餅圖大小分比例,寫入數(shù)組中
- 根據(jù)比例大小,設(shè)置圓弧旋轉(zhuǎn)角度(即將360分比例),遍歷數(shù)組畫出所有圓?。淮嬖谝?guī)律startA = endA; angle = 比例 * 總度數(shù)360°; endA = startA + angle;
- 每次畫出的圓弧都要將下面3步完成,即每畫一個(gè)圓弧就要渲染。
把路徑添加到上下文(貝塞爾路徑不用)
設(shè)置繪圖狀態(tài)
利用圖形上下文將繪制的所有內(nèi)容渲染顯示到view上面
- (void)drawRect:(CGRect)rect {
// Drawing code
NSArray *data = @[@25,@25,@50];
// 圓心
CGPoint center = CGPointMake(rect.size.width * 0.5, rect.size.height * 0.5);
CGFloat startA = 0;
CGFloat endA = 0;
CGFloat angle = 0;
//拼接路徑
for (NSNumber *num in data) {
startA = endA;
//根據(jù)占比繪制圓弧,最終湊成一個(gè)圓
angle = [num integerValue] / 100.0 * M_PI * 2;
endA = startA + angle;
// 畫第一個(gè)扇形
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:100 startAngle:startA endAngle:endA clockwise:YES];
// 連接一根線到圓心
[path addLineToPoint:center];
// 設(shè)置繪圖狀態(tài)
[[self randomColor] set];
// 渲染
[path fill];
}
}
// 封裝隨機(jī)顏色
- (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];
}
//點(diǎn)擊重繪(不必要)
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
[self setNeedsDisplay];
}