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秒之后

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

时间: 2017-04-25

iOS开发教程之扇形动画的实现

前言 最近比较闲,正好利用这段时间把现在项目用的东西封装一下,方便以后复用,当然好的东西还是要分享.一起学习,一起进步. 看图片,很显然这是一个扇形图,相信大家对做扇形图得心应手,可能对做扇形动画有一定难度,不急,下面给出代码和思路. 针对项目用的扇形动画,在这个基础上我做了一下封装. 核心代码如下: -(instancetype)initWithCenter:(CGPoint)center radius:(CGFloat)radius bgColor:(UIColor *)bgColor re

利用iOS开发实现翻转扑克牌动画的方法

前言 本文主要给大家介绍的关于利用iOS开发实现翻转扑克牌动画的方法,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍吧. 动画效果 实现原理 实现原理就是创建三个扑克牌pockerView , 先在扑克牌上添加一个imageview,作为牌的背面.然后实现翻转动画,在翻转的时候将imageview移除,添加另一个imageview作为正面. 核心代码: 方法一: 翻转动画,内部实现还是方法二 + (void)transitionWithView:(UIView *)view dura

iOS开发教程之常见的性能优化技巧

前言 性能问题的主要原因是什么,原因有相同的,也有不同的,但归根到底,不外乎内存使用.代码效率.合适的策略逻辑.代码质量.安装包体积这一类问题. 但从用户体验的角度去思考,当我们置身处地得把自己当做用户去玩一款应用时候,那么都会在意什么呢?假如正在玩一款手游,首先一定不希望玩着玩着突然闪退,然后就是不希望卡顿,其次就是耗电和耗流量不希望太严重,最后就是安装包希望能小一点.简单归类如下: 快:使用时避免出现卡顿,响应速度快,减少用户等待的时间,满足用户期望. 稳:不要在用户使用过程中崩溃和无响应.

iOS开发教程之单例使用问题详析

导语 单例(Singletons),是Cocoa的核心模式之一.在iOS上,单例十分常见,比如:UIApplication,NSFileManager等等.虽然它们用起来十分方便,但实际上它们有许多问题需要注意.所以在你下次自动补全dispatch_once代码片段的时候,想一下这样会导致什么后果. 什么是单例 在<设计模式>一书中给出了单例的定义: 单例模式:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 单例模式提供了一个访问点,供客户类为共享资源生成唯一实例,并通过它来对共享资源

iOS开发教程之自定制图片浏览器

前言 图片浏览器大家应该都用过,这方面的第三方也有很多,不过有时候第三方会跟我们的需求有一些出入,这就需要我们要么对第三方进行修改要么自己重新定制.我是比较喜欢自己重新定制的,在这给大家简单介绍一下我定制的图片浏览器,算是给大家提供一个思路,可以在此基础上进行修改完善. 实现原理 通过弹出UIViewController的形式来展示图片,使用UICollectionView并添加手势来实现图片浏览时图片的间隔. 首先创建一个继承于UIViewController的控制器,来作为图片浏览器的控制器

iOS开发教程之登录与访客的逻辑实现

自我革命--发现问题 在开发中,一直有这样一种情境:App的未注册用户可以使用部分功能(访客视图),一旦需要使用一些核心功能或者获取个性化.差异化的服务时,就需要用户登录(登录定制).一般的情况是: 用户点击某个按钮 --> 弹出登录界面 --> 输入信息  --> 登录验证  --> 界面发生变化 在几年前做开发时,由于项目需要快速上线,所以顾不上思考(其实是自己太菜),直接在需要判断登录的界面代码里写上如下代码: BOOL isLogin; if(self.isLogin){

iOS开发教程之识别图片中二维码功能的实现

前言 大家应该都知道在iOS的CoreImage的Api中,有一个CIDetector的类,Detector的中文翻译有探测器的意思,那么CIDetector是用来做哪些的呢? 它可以: CIDetectorTypeFace 面部识别 CIDetectorTypeText 文本识别 CIDetectorTypeQRCode 条码识别 CIDetectorTypeRectangle 矩形识别 这个类其实很简单,它的头文件代码很少,下面来看一下注释 open class CIDetector : N

支付宝支付开发IOS图文教程案例

前言:继上次<微信支付开发IOS图文教程案例>以来,一直没有太多时间,更新总结详细支付这样的长篇大论,很抱歉.今天,推出支付宝支付的详细流程. 1.开始下载和查看支付宝支付的Demo. 我们直接进入支付宝的支付平台参考来进行集成支付宝支付: https://doc.open.alipay.com/doc2/detail.htm?spm=a219a.7629140.0.0.jIUkAQ&treeId=59&articleId=103675&docType=1 集成过程基本

iOS开发中仿Tumblr点赞心破碎动画效果

最近Tumblr轻博客无论是web端还是移动端,都非常受欢迎,简单调研了一下,其中动画是我感兴趣的,特此写了个仿Tumblr点赞心破碎动画: 1.首先看下效果: 2.模仿Tumblr中的效果应用如下: 原理:使用按钮点击Action增加两个事件,通过改变背景hidden和frame,切换图片,增加动画效果等: setupUI及touch Action: <span style="font-size:14px;">- (void)setupUI { // 点击的btn UIB