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