自己写了一个简单的PieView,demo在这里:https://github.com/Phelthas/LXMPieView
效果如图:
 
实现方法:
绘制饼状图所需的值只有各个扇形对应的值及对应的颜色,但可能会有很多附加的元素需要显示(比如字体颜色,字体大小等),
所以将每个扇形所需的数据封装为一个model对象,方便以后扩展。
 
1,绘制每个扇形,需要知道扇形的startAngle和endAngle,所以需要计算每个扇形所占的百分比及角度,
然后第一个扇形的start是0,end是第一个扇形的角度,
第二个扇形的start是第一个扇形的end,第二个扇形的end是前两个扇形的角度之和,以此类推
这里写死了饼状图从-0.5*Pi的位置开始绘制,所以计算出每个扇形的startAngle和endAngle,分别保存到数组中。
 
2,绘制各个扇形,
用UIBezierPath的- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise NS_AVAILABLE_IOS(4_0);方法
注意这里这里要用 moveToPoint和 addLineToPoint方法绘制成闭合曲线,方便后面判断。
依次add到self.layer上即可
 
3,添加描述label
这里是计算出每个label应该位于的中心位置,然后把label 直接add到view上。中心位置根据点在圆中的位置用几何方法(忘了的补初中数学)算出来。
 
4,旋转动画
这里还是用layer的mask属性来达到部分渲染的效果,参考我之前的解释:http://www.cnblogs.com/Phelthas/p/4643400.html
 
5,添加点击事件
这里只用了一个tapGesture添加到view上,然后通过gesture的location来判断点中的是哪个区域。
那怎么判断location这个点在不在某个区域内呢???
苹果提供了一个高大上的方法:
/* Return true if `point' is contained in `path'; false otherwise. A point
   is contained in a path if it is inside the painted region when the path
   is filled; if `eoFill' is true, then the even-odd fill rule is used to
   evaluate the painted region of the path, otherwise, the winding-number
   fill rule is used. If `m' is non-NULL, then the point is transformed by
   `m' before determining whether the path contains it. */

CG_EXTERN bool CGPathContainsPoint(CGPathRef __nullable path,
    const CGAffineTransform * __nullable m, CGPoint point, bool eoFill)

    CG_AVAILABLE_STARTING(__MAC_10_4, __IPHONE_2_0);
 
例:
    CGPoint location = [sender locationInView:sender.view];
    CGAffineTransform transform = CGAffineTransformIdentity;   
    NSInteger index = -1;
    for (int i = 0; i < self.subLayerArray.count; i ++) {
        CAShapeLayer *shapeLayer = self.subLayerArray[i];
        if (CGPathContainsPoint(shapeLayer.path, &transform, location, 0)) {
            index = i;
            break;
        }
    }
 
6,用delegate的方式将点击事件回调出去
这个只是为了方便外部调用而进行的封装,同时也是为了逻辑分离,代码整洁~~

用CAShapeLayer实现一个简单的饼状图(PieView)的更多相关文章

  1. 简单excel饼状图怎么做,bi工具怎么做饼状图

    饼状图是为了在一个整体体现个体所占的比例,比如一块蛋糕每人各分多大份.了解了饼状图的含义,就来学习饼状图怎么做吧. 首先,我们准备excel表格饼状图的初始数据 然后选择excel表格上方的插入,选择 ...

  2. ExtJS 饼状图报表

    简单的ExtJS饼状图报表. 先上源码,咱再慢慢解析: Ext.onReady(function(){ var store = Ext.create('Ext.data.JsonStore', { f ...

  3. D3.js的v5版本入门教程(第十三章)—— 饼状图

    D3.js的v5版本入门教程(第十三章) 这一章我们来绘制一个简单的饼状图,我们只绘制构成饼状图基本的元素——扇形.文字,从这一章开始,内容可能有点难理解,因为每一章都会引入比较多的难理解知识点,在这 ...

  4. 4.5Python数据处理篇之Matplotlib系列(五)---plt.pie()饼状图

    目录 目录 前言 (一)简单的饼状图 (二)添加阴影和突出部分 (三)显示图例和数据标签: 目录 前言 饼状图需要导入的是: plt.pie(x, labels= ) (一)简单的饼状图 (1)说明: ...

  5. extjs开发———用extJS简单写一个饼状图

    先上效果图: js编写部分简单如下,先插入一个模块,然后给模块中添加内容. var myChart1 = echarts.init(document.getElementById('myChart1' ...

  6. Android图表库MPAndroidChart(七)—饼状图可以再简单一点

    Android图表库MPAndroidChart(七)-饼状图可以再简单一点 接上文,今天实现的是用的很多的,作用在统计上的饼状图,我们看下今天的效果 这个效果,我们实现,和之前一样的套路,我先来说下 ...

  7. JavaScript+svg绘制的一个饼状图

    结果: svg参考:https://www.w3.org/TR/SVG/<body onload='document.body.appendChild( pieChart([12,23,34,4 ...

  8. [BOT]自己动手实现android 饼状图,PieGraphView,附源码解析

    本文要介绍的是一个参照手机支付宝app里面记账本功能里的"饼状图"实现的控件.通常app中可能的数据展示控件有柱状图,折线图,饼状图等,如果需要一个包含多种View控件的库,那么 ...

  9. arcgis api for flex之专题图制作(饼状图,柱状图等)

    最近公司给我一个任务,就是利用arcgis api for flex实现在地图上点(业务数据)直接显示饼状图以及柱状图的专题图制作,而不是通过点击点显示气泡窗口的形式来实现,这个公司已经实现了. 经过 ...

随机推荐

  1. 【求助】WPF 在XP下 有的Textbox光标会消失

    最近做个项目,一直有一个问题没有解决,就是在XP下,有的Textbox里在文本框里没有东西的时候,会没有光标.不同的XP机器,失去光标的Textbox也不一样. 各位大师看下面的三张图,当Textbo ...

  2. Android之登录那点事

    随着互联网的高速发展,一个应用为了保护用户的隐私,通常会通过设置用户名+密码的验证方式保证用户隐私的相对安全,我知道一般网站的登录验证,通常会设置一个二维码,通过验证二维码,防止恶意软件通过机械程序, ...

  3. HTTP的RST包与WinHttp延迟关闭TCP连接

    一.RST包也常见于断开TCP连接  几个月前用wireshark抓HTTP包发现有的网络通信在结束的时候没有使用四次握手,而是直接使用RST包.如: 在TCP协议中RST表示复位,用来异常的关闭连接 ...

  4. java 导出数据为word文档(保持模板格式)

    导出数据到具体的word文档里面,word有一定的格式,需要保持不变 这里使用freemarker来实现: ①:设计好word文档格式,需要用数据填充的地方用便于识别的长字符串替换  如  aaaaa ...

  5. 玩转Jquery,告别前端知道思路忘记知识点的痛苦

    本节内容: 本章主要讲解一下jquery,主要是工作中用的前端框架是datetables框架,然后datetables框架又是基于jqeury研发的,所以要想学一个东西,就必须要了解其底层,不然走路都 ...

  6. typeof的一些兼容性问题

    typeof存在一些兼容性的问题,在IE6,7,8中的DOM和BOM元素及其对象上的方法的判定会出现误差,在safari上对NodeList实例 的判定,对ExpReg实例的判断(早期的chrome, ...

  7. Cesium应用篇:3控件(4)Geocoder

    Geocoder是一个非常简单的控件,但也是非常常用且实用的控件,顾名思义,Geocoder就是地理编码的意思,而平常我们经常会查询一些地物,也就是常用的POI搜索,就是Geocoder的功劳. 首先 ...

  8. Node.js、Express、Socket.io 入门

    前言 周末断断续续的写了第一个socket.io Demo.初次接触socket.io是从其官网看到的,看着get started做了一遍,根据官网的Demo能提供简单的服务端和客户端通讯. 这个De ...

  9. 对于SQL Server,我需要多少内存

    经常被问到的一个问题:对于SQL Server,我需要多少内存?这个问题还是有同样的典型的“看情况而定”答案.在今天的文章里,我们来详细看下“看情况而定的”的不同方面. 全新SQL Server安装 ...

  10. const 和 readonly

    const 和 readonly 的异同 Const readonly 字面意 不变常量,不可修改 只读操作,不可写 初始化 必须在声明的同时赋值 可在声明和构造方法中进行赋值 所属关系 类.即sta ...