ios开发日记10 - 使用CAShapLayer绘制扇形

IOS-使用CAShapLayer绘制扇形

为了增加应用体验感,我们动态绘制扇形或者饼状图效果。

这里我们使用CAShapeLayer,这样就不必再-(void)draw函数内绘制图形

参考代码

-(void)reDraw

{

CAShapeLayer *chartLine;

if (chartLine!=nil)

{

[chartLine removeAllAnimations];//这样就能重复绘制饼状图了

}

else

{

    chartLine = [CAShapeLayerlayer];

chartLine.lineWidth = 40;//这里设置填充线的宽度,这个参数很重要

chartLine.lineCap = kCALineCapButt;设置线端点样式,这个也是非常重要的一个参数

chartLine.strokeColor = [[UIColor redColor] CGColor];//绘制的线的颜色

chartLine.fillColor = nil;

self.clipsToBounds = NO;//该属性表示如果图形绘制超过的容器的范围是否被裁掉,这里我们设置为YES ,表示要裁掉超出范围的绘制

[self.layer addSublayer:chartLine];

}

CGMutablePathRef pathRef  = CGPathCreateMutable();

CGPathAddArc(pathRef, &CGAffineTransformIdentity,

CGRectGetWidth(self.frame)/2, CGRectGetHeight(self.frame)/2, 60, 0, M_PI*3/2, NO);

chartLine.path = pathRef;

CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];

pathAnimation.duration = 1.1;//设置绘制动画持续的时间

pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];

pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];

pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];

pathAnimation.autoreverses = NO;//是否翻转绘制

pathAnimation.fillMode = kCAFillModeForwards;

pathAnimation.repeatCount = 1;

[chartLine addAnimation:pathAnimation forKey:@"strokeEndAnimation"];

chartLine.strokeEnd=1.0f;//表示绘制到百分比多少就停止,这个我们用1表示完全绘制

}

我们先来看看绘制的效果图:

这里我们有必要说下,扇形(饼状图的原理),我们绘制的其实不是扇形,可以说是圆形,我们只是将圆形的边线宽度变得很宽,比如:我们想要绘制的圆形的半径是 R = 100,如果我们想绘制扇形就可以设置变宽为 200,因为,线是从中间到圆心来标定半径的,这样,边线宽度= 200,那么,从边线重新到圆心的距离就是200/2 = 100,这样你看,100==R,这样,效果就看起来我们绘制的是饼状图了。我们绘制的不是真正的饼状图,而是用其他的方法绘制饼状图的效果而已,这里我们特别需要主要的是,如果你想成功的绘制饼状图,那么你就需要掌握好,圆形半径以及圆形边线的宽度值,以及他们之间的比例关系,因为他们之间的关系决定了你要绘制的饼状图的效果以及形状,比如:时候中间有空心,以及空心的大小。

时间: 2024-11-07 13:05:21

ios开发日记10 - 使用CAShapLayer绘制扇形的相关文章

iOS开发之在地图上绘制出你运行的轨迹

首先我们看下如何在地图上绘制曲线.在Map Kit中提供了一个叫MKPolyline的类,我们可以利用它来绘制曲线,先看个简单的例子. 使用下面代码从一个文件中读取出经纬度,然后创建一个路径:MKPolyline实例. 1 -(void) loadRoute 2 { 3 NSString* filePath = [[NSBundle mainBundle] pathForResource:@"route" ofType:@"csv"]; 4 NSString* fi

iOS开发日记31-Block终极篇

今天博主有一个Block的需求,遇到了一些困难点,在此和大家分享,希望能够共同进步. 1.什么是Block      Block是一个C级别的语法以及运行时的一个特性,和标准C中的函数(函数指针)类似,但是其运行需要编译器和运行时支持,从ios4.0开始就很好的支持Block. 2.在iOS开发中,什么情况下使用Block      Block除了能够定义参数列表.返回类型外,还能够获取被定义时的词法范围内的状态(比如局部变量),并且在一定条件下(比如使用__block变量)能够修改这些状态.此

iOS开发日记26-详解时间戳

今天博主有一个时间戳的需求,遇到了一些困难点,在此和大家分享,希望能够共同进步. iOS开发中,我们在很多情况下都会遇到使用当下时间作为参数的情况,这称之为时间戳.在iOSSDK中,与时间戳相关的API主要有三个,NSDate,NSCalendar和NSDate?Components. NSDate 就是一个绝对的时间,可以换算成相对1970s的时差. NSCalendar 顾名思义就是日历,封装了系统如何按照年月日的方式来组织时间,组织时间的方式和地区,时区有很大关系. NSDate?Comp

ios 开发日记 13-剖析网易新闻标签栏视图切换(addChildViewController属性介绍)

iOS开发 剖析网易新闻标签栏视图切换(addChildViewController属性介绍) 时间 2014-06-25 21:45:21  CSDN博客 原文  http://blog.csdn.net/hmt20130412/article/details/34523235 主题 网易iOS开发 本来只是打算介绍一下addChildViewController这个方法的,正好今天朋友去换工作面试问到网易新闻标签栏效果的实现,就结合它,用个小Demo实例介绍一下:(具体解释都写在了Demo里

iOS开发日记16-动画Animation

今天博主有一个动画Animation的需求,遇到了一些困难点,在此和大家分享,希望能够共同进步. iOS开发中的动画分为两种:一种为UIView动画,又称隐式动画,动画后frame的数值发生了变化.另一种是CALayer动画,又称显示动画,动画后模型层的数据不会发生变化,图形回到原来的位置.但是在实际开发中,因为UIView可以相应用户交互,所以UIView动画用的多. 一.UIview的动画 1.实现方式:动画块,block begin //设置动画效果  修改属性值,动画时长等等 conmm

iOS开发>学无止境 - 如何正确的绘制1像素的线

一.Point Vs Pixel iOS中当我们使用Quartz,UIKit,CoreAnimation等框架时,所有的坐标系统采用Point来衡量.系统在实际渲染到设置时会帮助我们处理Point到Pixel的转换. 这样做的好处隔离变化,即我们在布局的事后不需要关注当前设备是否为Retina,直接按照一套坐标系统来布局即可. 实际使用中我们需要牢记下面这一点: One point does not necessarily correspond to one physical pixel. 1

ios开发日记11 对tableView三种计算动态行高方法的分析

tableView是一个神奇的东西,可以这么说,就算是一个初学者如果能把tableView玩的很6,那编一般的iOS的需求都问题不大了.tableView是日常开发中用烂了的控件,但是关于tableView中的自定义cell的动态行高,还是有一些玄机的. AD: tableView是一个神奇的东西,可以这么说,就算是一个初学者如果能把tableView玩的很6,那编一般的iOS的需求都问题不大了.tableView是日常开发中用烂了的控件,但是关于tableView中的自定义cell的动态行高,

iOS开发日记30-Autolayout

今天博主有一个Autolayout的需求,遇到了一些困难点,在此和大家分享,希望能够共同进步. 1 .概述 在以前的 iOS 程序中,是如何设置布局 UI 界面的? (1)经常编写大量的坐标计算代码 (2)为了保证在3.5 inch和4.0 inch屏幕上都能有完美的UI界面效果,有时还需要分别为2种屏幕编写不同的坐标计算代码(即传说中的“屏幕适配”) 什么是 Autolayout ? (1)Autolayout是一种“自动布局”技术,专门用来布局UI界面的 (2)Autolayout自iOS

iOS开发日记44-图片及处理

今天博主有一个图片及处理的需求,遇到了一些困难点,在此和大家分享,希望能够共同进步. 图片通常是移动端流量耗费最多的部分,并且占据着重要的视觉空间.合理的图片格式选用和优化可以为你节省带宽.提升视觉效果. 几种图片格式简介: 1.静态图片的编码与解码 JPEG PNG WebP BPG 2.动态图片的编码与解码 GIF APNG WebP BPG 首先谈一下大家耳熟能详的几种老牌的图片格式吧: JPEG 是目前最常见的图片格式,它诞生于 1992 年,是一个很古老的格式.它只支持有损压缩,其压缩