美文网首页iOS技术点程序技术iOS 画图
OC绘制饼状图、柱状图和扇形图

OC绘制饼状图、柱状图和扇形图

作者: 非典型技术宅 | 来源:发表于2017-01-23 11:03 被阅读2721次

    这一篇就应该是绘图这个系列的基础中最后一篇了,然后,然后就过年啦!!!!
    在此之前,分享了一些关于绘图方面的基础。可以通过传输门快捷进入:

    1.绘图系列之:使用Quartz2D进行绘图

    2.绘图系列之:Quartz2D进行渲染

    3.绘图系列之:OC绘制基本图形

    4.绘图系列之:OC绘制饼状图、柱状图和扇形图

    其实坚持更新真的对自己而言还算是蛮挑战的一件事情,重点在于坚持。每一次有点赞,和回复都让自己感觉非常棒。知识就是用来分享的,这就是开源越来越让人着迷的地方。

    好了,来吧~Come on~

    1. 绘制柱状图bar chart

    • 获取数组中对于每个柱状图的数值
    • 计算柱子的宽度
    • 循环计算每根柱子的高度、X/Y
    • 绘制矩形
    • 设置颜色
    • 填充

    下面模拟一个数组,绘制柱状图。
    完成后的样子:

    柱状图.png

    首先我们要获取数组中常用的一些数值,有一些常见的手法:

    NSArray *arry = @[@300,@232.233,@324.324,@34,@4352,@43.0];
    
    // 找出数组中的最大数值 
    CGFloat maxValue = [[arry valueForKeyPath:@"@max.floatValue"] floatValue];
    
    // 重点在这句话上
    // @”@max.floatValue”(获取最大值),
    // @”@min.floatValue”(获取最小值),
    // @”@avg.floatValue” (获取平均值),
    // @”@count.floatValue”(获取数组大小)
    // @”@sum.floatValue”(获取数组总和)
    
    - (void)drawRect:(CGRect)rect{
        NSArray *arry = @[@300,@232.233,@324.324,@34,@435,@43.0];
        
    //    计算bar的宽度
        CGFloat barW = self.bounds.size.width / (arry.count * 2 - 1);
        
    //    找出数组中的最大数值
        CGFloat maxValue = [[arry valueForKeyPath:@"@max.floatValue"] floatValue];
    
        for (NSInteger i = 0; i < arry.count; i++) {
    //        计算bar的高度
        CGFloat barH = [arry[i] floatValue] * (self.bounds.size.height * BAR_HEIGHT_COEFFICIENT/ maxValue);
            
    //        计算bar的XY
            CGFloat barX = barW * i * 2;
            CGFloat barY = self.bounds.size.height - barH;
            
    //        绘制矩形
            UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(barX, barY, barW, barH)];
            
    //        给矩形添加随机色
            [[self randomUIColor] set];
            
            [path fill];
            
            
        }
    }
    
    - (UIColor *)randomUIColor{
        UIColor *color = [UIColor colorWithRed:(arc4random_uniform(256) / 255.0) green:(arc4random_uniform(256) / 255.0) blue:(arc4random_uniform(256) / 255.0) alpha:(arc4random_uniform(256) / 255.0)];
        return color;
    }
    
    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
        
        [self setNeedsDisplay];
    }
    

    2. 绘制饼图Pie Chart

    完成后的样子:

    Paste_Image.png
    - (void)drawRect:(CGRect)rect {
        // Drawing code
        
        NSArray *arry = @[@300,@232.233,@324.324,@34,@4352,@43.0];
        
    //    计算数组中所有数值之和
        CGFloat sumValue = [[arry valueForKeyPath:@"@sum.floatValue"] floatValue];
    
    //设定圆弧的圆点、起始弧度
        CGPoint origin = CGPointMake(150, 150);
        CGFloat startAngle = 0;
        CGFloat endAngle = 0;
        
        
        for (NSInteger i = 0 ; i < arry.count; i++) {
            
    //        每个数据的弧度
            CGFloat angle = [arry[i] floatValue] * M_PI * 2 / sumValue;
            
    //        计算这一段弧度的结束为止
            endAngle = startAngle + angle;
            
            UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:origin radius:130 startAngle:startAngle endAngle:endAngle clockwise:YES];
            
    //        计算下一段弧度开始的位置
            startAngle = endAngle;
            
    //        从弧边,绘制到原点。用于封闭路径,可以绘制扇形
            [path addLineToPoint:origin];
            //        给扇形添加随机色
            [[self randomUIColor] set];
            [path fill];
        }
    
    }
    
    - (UIColor *)randomUIColor{
        UIColor *color = [UIColor colorWithRed:(arc4random_uniform(256) / 255.0) green:(arc4random_uniform(256) / 255.0) blue:(arc4random_uniform(256) / 255.0) alpha:(arc4random_uniform(256) / 255.0)];
        return color;
    }
    //触屏后重新渲染
    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
        [self setNeedsDisplay];
    }
    

    3. 绘制进度条和进度扇形

    本来也想像柱状图、饼状图一样的写法,但是想想其实可以做的更形象一点。所以打算下一篇专门写一下如何用扇形来表达一个下载进度。实现后的效果如下:

    rightImage.gif

    4. 神秘感增强器:IB_DESIGNABLE和IBInspectable

    • IB_DESIGNABLE的宏的功能就是让SB动态渲染出该类图形化界面;
    • 使用IB_DESIGNABLE的方式,把该宏加在自定义类的前面;
      这两个配合着使用,就可以在StoryBoard上直接设置一些系统不提供的属性了,例如线段的宽度、颜色等等。个性化定制一个属于自己的SB。
    Paste_Image.png
    • IBInspectable 就是让SB上出现属性的修改框,可以在SB直接修改:
    Paste_Image.png

    5. C和OC混合绘制图形小帖士

    • C和OC绘制图形的时候,如果混合使用,以C语言为主。
    Paste_Image.png Paste_Image.png
    • context的栈操作
    Paste_Image.png

    哈哈,写完这篇,下篇就开始自己绘制一个进度条拉。不知道各位是不是已经踏上回家的征程了吶?希望各位鸡年大吉~新年新祝福,说鸡不说吧~

    相关文章

      网友评论

      本文标题:OC绘制饼状图、柱状图和扇形图

      本文链接:https://www.haomeiwen.com/subject/oykabttx.html