04-画饼图
第一步, 获取上下文
第二步,拼接路径 ,绘制第一个扇形
获取上下文
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.完整代码:
#import "pieView.h"
@implementation pieView
- (void)drawRect:(CGRect)rect {
// 所有的数据
NSArray *date = @[@20,@30,@10,@40,@38];
//描述路径
CGPoint center = CGPointMake(rect.size.width * 0.5, rect.size.height * 0.5);
CGFloat radious = rect.size.width * 0.5 - 10;
CGFloat startA = 0;
CGFloat endA = 0;
CGFloat angle = 0;
//遍历数组
for (NSNumber *num in date) {
startA = endA;
angle = num.intValue / 138.0 * M_PI * 2;
endA = startA + angle;
//设置路径
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radious 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];
}
//点击view时颜色改变
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
//重绘
[self setNeedsDisplay];
}
@end
效果图: