OC绘制饼状图、柱状图和扇形图1. 绘制柱状图bar chart2. 绘制饼图Pie Chart3. 绘制进度条和进度扇形4. 神秘感增强器:IB_DESIGNABLE和IBInspectable5.

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

好了,来吧~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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

CSS3圆角边框“完全解读”

HTML5学堂小编:圆形,一个很奇妙的形状,在各种地方都可以看得到,特别是现在各类网站,都会有各种的圆形。圆角的制作曾经困扰了开发者很久,以至于以前开发者只能使...

3605
来自专栏章鱼的慢慢技术路

Python中的高级turtle(海龟)作图(续)

2075
来自专栏進无尽的文章

动画| 金币抛入红包动画详解

这个动画效果很早就出来了,也是一个比较经典的关键帧动画和组合动画的运用,通过剖析源码,可以发现实际上这个酷炫的动画实现起来很简单。

2005
来自专栏進无尽的文章

浅汇-iOS 动画

        在iOS开发中,制作动画效果是最让开发者享受的环节之一。一个设计严谨、精细的动画效果能给用户耳目一新的效果,吸引他们的眼光 —— 这对于app而...

1132
来自专栏何俊林

Android开发之贝塞尔曲线进阶篇(仿直播送礼物,饿了么购物车动画)

今天来自李晨玮分享的直播礼物效果Demo。对于直播中送车,点赞都有借鉴意义。李晨玮的简书为:http://www.jianshu.com/u/b2df0a5ea...

4318
来自专栏進无尽的文章

绘图-几种基本统计图的实现分析

在开发中我们会遇到各种统计图,或者各种绘图,本文通过对基本三大统计图:折线图、柱状图、扇形图的实现来掌握基本统计图的绘制,在下一篇文中会带来复杂一些的绘图案例分...

1241
来自专栏腾讯NEXT学位

我不知道你知不知道但前端NEXT知道的伪元素小技巧

3457
来自专栏iOSer成长记录

iOS-自定义button详解

923
来自专栏贺贺的前端工程师之路

Flex Box布局学习- 语法

上一篇,我学习并整理了使用flex时,需要注意的兼容性问题。那么今天就来学习一下有关flex语法的东西。

583
来自专栏jojo的技术小屋

原 canvas小案例集合(小画板、画的回

作者:汪娇娇 日期:2016.12.8 在现在这个公司呆了4个多月,也是研究了canvas将近4个月,前两周心里就痒痒的想写这方面的博客,但一直没时间。可一直拖...

4397

扫码关注云+社区