IOS 开发中画扇形图实例详解

 更新时间:2017年04月27日 11:49:21   投稿:lqh  
这篇文章主要介绍了IOS 开发中画扇形图实例详解的相关资料,需要的朋友可以参考下

IOS 开发中画扇形图实例详解

昨天在做项目中,遇到一个需要显示扇形图的功能,网上搜了一下,发现code4app里面也没有找到我想要的那种类似的效果,没办法了,只能自己学习一下如何画了。

首先我们需要了解一个uiview的方法

-(void)drawRect:(CGRect)rect

我们知道了这个方法,就可以在自定义UIView的子类的- (void)drawRect:(CGRect)rect里面绘图了,关于drawrect的调用周期,网上也是一找一大堆,等下我会整理一下,转载一篇供你们参考。

废话少说,下面直接开始代码

首先我们自定义一个继承字uiview的子类,我这里就起名字叫pieview了

首先我们试试先画一个圆

#import "pieview.h"
//直径,其实radius是半径的意思吧,哈哈 算了先用着,demo都写好了就不改了,你们知道就行了
#define radius 50

@implementation pieview

-(void)drawRect:(CGRect)rect
{
    CGContextRef ctx = UIGraphicsGetCurrentContext();//获取图形上下文
    CGPoint cent=CGPointMake((self.frame.size.width/2)-radius/2, (self.frame.size.height/2)-radius/2);//设置图形开始画的坐标原点,根据实际需要设置,我这是随便写的
    CGContextAddEllipseInRect(ctx, CGRectMake(cent.x, cent.y, 100, 100));这个是核心函数,在这里设置图形的开始从哪里画,画的宽度和高度是多少。如果宽高不一样 可就是椭圆了啊
     [[UIColor greenColor] set];//设置颜色
    CGContextFillPath(ctx);//实心的
    //CGContextStrokePath(ctx);空心的
}

@end

然后我们创建一个控制器 pieViewController 引用我们的pieview,展示一下效果

#import "pieViewController.h"
//#import "myview.h"
//#import "JYpieview.h"
#import "pieview.h"
@interface pieViewController ()

@end

@implementation pieViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  pieview *view=[[pieview alloc]init];
  view.frame=CGRectMake(4, 150, 150, 300);
  [self.view addSubview:view];

}
- (void)didReceiveMemoryWarning {
  [super didReceiveMemoryWarning];
  // Dispose of any resources that can be recreated.
}
@end

好了看一下效果吧
这里写图片描述
好了,下面让我们开始扇形图的制作吧

#import "pieview.h"
//直径
#define radius 50
#define PI 3.14159265358979323846

@implementation pieview
//计算度转弧度
static inline float radians(double degrees) {
  return degrees * PI / 180;
}
-(void)drawRect:(CGRect)rect
{
  CGPoint cent=CGPointMake((self.frame.size.width/2)-radius/2, (self.frame.size.height/2)-radius/2);
  CGContextRef ctx = UIGraphicsGetCurrentContext();
  CGContextClearRect(ctx, rect);

  float angle_start = radians(0.0);
  float angle_end = radians(120.0);
  CGContextMoveToPoint(ctx, cent.x, cent.y);
  CGContextSetFillColor(ctx, CGColorGetComponents( [[UIColor greenColor] CGColor]));
  CGContextAddArc(ctx, cent.x, cent.y, radius, angle_start, angle_end, 0);
  CGContextFillPath(ctx);

  angle_start = angle_end;
  angle_end = radians(360.0);
  CGContextMoveToPoint(ctx, cent.x, cent.y);
  CGContextSetFillColor(ctx, CGColorGetComponents( [[UIColor blueColor] CGColor]));
  CGContextAddArc(ctx, cent.x, cent.y, radius, angle_start, angle_end, 0);
  CGContextFillPath(ctx);
}
@end

在运行一下,我们看下效果
这里写图片描述
可使有没有觉得上面的代码很多重复的?对的,我们可以封装一个方法 那么重构后的代码我就一次性的贴上去了

#import "pieview.h"
//直径
#define radius 50
#define PI 3.14159265358979323846

@implementation pieview
//计算度转弧度
static inline float radians(double degrees) {
  return degrees * PI / 180;
}
static inline void drawArc(CGContextRef ctx, CGPoint point, float angle_start, float angle_end, UIColor* color) {
  CGContextMoveToPoint(ctx, point.x, point.y);
  CGContextSetFillColor(ctx, CGColorGetComponents( [color CGColor]));
  CGContextAddArc(ctx, point.x, point.y, radius, angle_start, angle_end, 0);
  //CGContextClosePath(ctx);
  CGContextFillPath(ctx);
}
-(void)drawRect:(CGRect)rect
{
  CGPoint cent=CGPointMake((self.frame.size.width/2)-radius/2, (self.frame.size.height/2)-radius/2);
  CGContextRef ctx = UIGraphicsGetCurrentContext();
  CGContextClearRect(ctx, rect);

  float angle_start = radians(0.0);
  float angle_end = radians(121.0);
  drawArc(ctx, cent, angle_start, angle_end, [UIColor yellowColor]);

  angle_start = angle_end;
  angle_end = radians(228.0);
  drawArc(ctx, cent, angle_start, angle_end, [UIColor greenColor]);

  angle_start = angle_end;
  angle_end = radians(260);
  drawArc(ctx, cent, angle_start, angle_end, [UIColor orangeColor]);

  angle_start = angle_end;
  angle_end = radians(360);
  drawArc(ctx, cent, angle_start, angle_end, [UIColor purpleColor]);

}
@end

看下运行效果图
这里写图片描述

如果我们中途数据变了 想要改一下图形怎么办呢?

那么我们就需要用到这个

  //通知自定义的view重新绘制图形
//  [self setNeedsDisplay];

这时候我们就要pieview向外界提供一个接口属性,这是我做的模拟5面之后改变圆形的直径大小

.h文件

#import <UIKit/UIKit.h>

@interface pieview : UIView
//直径
@property(nonatomic,assign)float radius;
@end

.m文件

#import "pieview.h"
#define PI 3.14159265358979323846

@implementation pieview
//计算度转弧度
static inline float radians(double degrees) {
  return degrees * PI / 180;
}
static inline void drawArc(CGContextRef ctx, CGPoint point, float angle_start, float angle_end, UIColor* color,float radius) {
  CGContextMoveToPoint(ctx, point.x, point.y);
  CGContextSetFillColor(ctx, CGColorGetComponents( [color CGColor]));
  CGContextAddArc(ctx, point.x, point.y, radius, angle_start, angle_end, 0);
  //CGContextClosePath(ctx);
  CGContextFillPath(ctx);
}
-(void)drawRect:(CGRect)rect
{
  CGPoint cent=CGPointMake((self.frame.size.width/2)-self.radius/2, (self.frame.size.height/2)-self.radius/2);
  CGContextRef ctx = UIGraphicsGetCurrentContext();
  CGContextClearRect(ctx, rect);

  float angle_start = radians(0.0);
  float angle_end = radians(121.0);
  drawArc(ctx, cent, angle_start, angle_end, [UIColor yellowColor],self.radius);

  angle_start = angle_end;
  angle_end = radians(228.0);
  drawArc(ctx, cent, angle_start, angle_end, [UIColor greenColor],self.radius);

  angle_start = angle_end;
  angle_end = radians(260);
  drawArc(ctx, cent, angle_start, angle_end, [UIColor orangeColor],self.radius);

  angle_start = angle_end;
  angle_end = radians(360);
  drawArc(ctx, cent, angle_start, angle_end, [UIColor purpleColor],self.radius);

}
-(void)setRadius:(float)radius
{
  _radius=radius;
  [self setNeedsDisplay];
}
@end

pieViewController.m文件

@implementation pieViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  pieview *view=[[pieview alloc]init];
  view.radius=50;
  view.frame=CGRectMake(4, 150, 150, 300);
  [self.view addSubview:view];
  //view.backgroundColor=[UIColor clearColor];
  //模拟5秒后执行这个段代码
  dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(5.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
    view.radius=20;
  });
}
- (void)didReceiveMemoryWarning {
  [super didReceiveMemoryWarning];
  // Dispose of any resources that can be recreated.
}
@end

效果
这里写图片描述

5秒之后
这里写图片描述

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

  • iOS9提示框的正确使用方式

    iOS9提示框的正确使用方式

    这篇文章主要为大家详细介绍了iOS9提示框的正确使用方式,iOS8升级到iOS9的过程,弹出提示框的方式有了很大的改变,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • iOS 正则表达式判断手机号码、固话

    iOS 正则表达式判断手机号码、固话

    本文主要介绍了iOS 正则表达式判断手机号码、固话,以及匹配是否是移动/联通/电信手机号的方法。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • iOS13即将到来,iOS推送DeviceToken适配方案详解

    iOS13即将到来,iOS推送DeviceToken适配方案详解

    这篇文章主要介绍了iOS13即将到来,iOS推送DeviceToken适配方案详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • SIGPIPE(Signal 13, Code 0) 异常排查及处理

    SIGPIPE(Signal 13, Code 0) 异常排查及处理

    这篇文章主要为大家介绍了SIGPIPE(Signal 13, Code 0) 异常排查原因解析及处理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • 基于iOS pod最新的安装和使用方法(分享)

    基于iOS pod最新的安装和使用方法(分享)

    下面小编就为大家分享一篇基于iOS pod最新的安装和使用方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • iOS UICollectionView刷新时闪屏的解决方法

    iOS UICollectionView刷新时闪屏的解决方法

    本篇文章主要介绍了iOS UICollectionView刷新时闪屏的解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • iOS应用程序中通过dispatch队列控制线程执行的方法

    iOS应用程序中通过dispatch队列控制线程执行的方法

    Grand Central Dispatch简称(GCD)是苹果公司开发的技术,以优化的应用程序支持多核心处理器和其他的对称多处理系统的系统,iOS应用程序中通过dispatch队列控制线程执行则是以并发来达到多核优化的重要途径.
    2016-05-05
  • xcode 左边导航栏中符合含义详解

    xcode 左边导航栏中符合含义详解

    这篇文章主要介绍了xcode 左边导航栏中符合含义详解的相关资料,需要的朋友可以参考下
    2016-12-12
  • IOS 性能优化中离屏渲染

    IOS 性能优化中离屏渲染

    本文主要介绍了IOS 性能优化中离屏渲染的资料,提供了几种方法讲解了优化,有需要的小伙伴可以参考下
    2016-10-10
  • iOS超出父控件范围无法点击问题解决

    iOS超出父控件范围无法点击问题解决

    这篇文章主要介绍了iOS超出父控件范围无法点击问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06

最新评论