二、基本图形绘制-饼图

二、基本图形绘制-饼图_第1张图片
pie.gif

这是看了小马哥的视频整理的笔记。
这是看了小马哥的视频整理的笔记。
这是看了小马哥的视频整理的笔记。(怕被骂说抄袭)

最终的效果如上图所示,点的有点快。

首先,确定一点,饼状图是由一个扇形挨着一个扇形拼成的。
数据源NSArray *arr = [];
设扇形的起点角度为CGFloat startA;
扇形的弧度为angle = [arr[i] doubleValue] / total * M_PI * 2;
那么扇形的终点弧度为 endA = startA + angle;

使用UIBezierPath画扇形的核心代码如下

UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:redius startAngle:startA endAngle:endA clockwise:YES];
[path addLineToPoint:center];
[[self color]set];
[path fill];

难道说饼状图由几部分,我们就要创建几个UIBezierPath吗?当然不能够啊。
我们在自定义的view的drawRect方法中进行扇形的绘制如下:

- (void)drawRect:(CGRect)rect {
// Drawing code
NSArray *arr = [self arr];
CGFloat redius = rect.size.width * 0.5;
CGPoint center = CGPointMake(redius, redius);

CGFloat startA = 0;
CGFloat angle = 0;
CGFloat endA = 0;

for (int i = 0 ; i < arr.count; i ++) {
    startA = endA;
    angle = [arr[i] doubleValue] / 100.0 * M_PI * 2;
    endA = startA + angle;
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:redius startAngle:startA endAngle:endA clockwise:YES];
    [path addLineToPoint:center];
    [[self color]set];
    [path fill];
  }
}
  • 产生一个随机数组来做为饼状图的数据源
-(NSArray *)arr{
    int total = 100;
    int temp = 0;

    NSMutableArray * arr= [NSMutableArray array];
    for (int i = 0; i < 9; i++) {
        temp = arc4random_uniform(total);
        [arr addObject:@(temp)];
        total -= temp;
    }//在这里需要进行判断total是因为,随机出来的这9个数的和不一定正好是100 ,所以需要进行判断total
    if (total) {
        [arr addObject:@(total)];
    }
    return arr;
}
  • 获取随机颜色
-(UIColor *)color{
    CGFloat red = arc4random_uniform(256.0)/255.0;
    CGFloat green = arc4random_uniform(256.0)/255.0;
    CGFloat blue = arc4random_uniform(256.0)/255.0;

    return [UIColor colorWithRed:red green:green blue:blue alpha:1];
}

你可能感兴趣的:(二、基本图形绘制-饼图)