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

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

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

? 1 -(void)drawrect:(cgrect)rect

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

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

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

首先我们试试先画一个圆

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 #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，展示一下效果

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 #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

好了看一下效果吧
好了，下面让我们开始扇形图的制作吧

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 #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

在运行一下，我们看下效果
可使有没有觉得上面的代码很多重复的？对的，我们可以封装一个方法 那么重构后的代码我就一次性的贴上去了

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 #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

看下运行效果图

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

那么我们就需要用到这个

? 1 2 //通知自定义的view重新绘制图形 // [self setneedsdisplay];

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

.h文件

? 1 2 3 4 5 6 #import <uikit/uikit.h> @interface pieview : uiview //直径 @property(nonatomic,assign)float radius; @end

.m文件

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 #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文件

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 @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秒之后

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

原文链接：http://blog.csdn.net/qq_29892943/article/details/48024463