iOS:使用贝塞尔曲线绘制图表(折线图、柱状图、饼状图)

简介:

1.介绍:

 UIBezierPath :画贝塞尔曲线的path类

 UIBezierPath定义 : 贝赛尔曲线的每一个顶点都有两个控制点,用于控制在该顶点两侧的曲线的弧度。

 曲线的定义有四个点:起始点、终止点(也称锚点)以及两个相互分离的中间点。

 滑动两个中间点,贝塞尔曲线的形状会发生变化。

 UIBezierPath :对象是CGPathRef数据类型的封装,可以方便的让我们画出 矩形 、 椭圆 或者 直线和曲线的组合形状

 

 初始化方法:

 + (instancetype)bezierPath;

 //创建一个矩形

 + (instancetype)bezierPathWithRect:(CGRect)rect;

 //创建圆形或者椭圆形

 + (instancetype)bezierPathWithOvalInRect:(CGRect)rect;

 + (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius; // rounds all corners with the same horizontal and vertical radius

 + (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;

 + (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;

 + (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;

 

 2.最基本的使用方法是:

 //设置描绘的起点

 - (void)moveToPoint:(CGPoint)point;

  //画直线

 - (void)addLineToPoint:(CGPoint)point;

 //画曲线

 (1)绘制二次贝塞尔曲线   分别对应终点和一个控制点

 - (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint

 (1)绘制三次贝塞尔曲线   分别对应终点和两个控制点

 - (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;

 //画圆弧

 - (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise

 

 3.使用贝塞尔曲线的基本步骤是:

    (1)创建一个Bezier path对象。

   (2)使用方法moveToPoint:去设置初始线段的起点。

   (3)添加line或者curve去定义一个或者多个subpaths。

   (4)改变UIBezierPath对象跟绘图相关的属性。

 

 4.demo演示如下:

创建一个工具类,BezierCurveView,同时给它创建一个xib文件,它继承自UIView,用来专门绘制图表的画布

BezierCurveView.h

  View Code

BezierCurveView.m

  View Code

在ViewController.m文件中测试如下:

  View Code

演示截图如下:

 

 

下载地址:

Github:https://github.com/xiayuanquan/BezierCurveLineTest

 

程序猿神奇的手,每时每刻,这双手都在改变着世界的交互方式!
本文转自当天真遇到现实博客园博客,原文链接:http://www.cnblogs.com/XYQ-208910/p/5694749.html ,如需转载请自行联系原作者
相关文章
|
7月前
|
iOS开发
iOS 利用贝塞尔曲线实现Q弹的下拉刷新
iOS 利用贝塞尔曲线实现Q弹的下拉刷新
27 0
|
7月前
|
iOS开发
iOS 贝塞尔曲线绘制滴水效果
iOS 贝塞尔曲线绘制滴水效果
33 0
|
iOS开发
iOS开发-聊天气泡的绘制和聊天消息列表
iOS开发-聊天气泡的绘制和聊天消息列表
168 0
iOS开发-聊天气泡的绘制和聊天消息列表
|
iOS开发
ios贝塞尔曲线表格视图
x轴和y轴都是可自定义,曲线的值也是对应的值
73 0
ios贝塞尔曲线表格视图
|
JSON 搜索推荐 Serverless
iOS绘制物理按钮 - 透明圆角渐变边框
iOS绘制物理按钮 - 透明圆角渐变边框
319 0
iOS绘制物理按钮 - 透明圆角渐变边框
|
缓存 编解码 并行计算
iOS 开发:绘制像素到屏幕
像素是如何绘制到屏幕上面的?把数据输出到屏幕的方法有很多,通过调用很多不同的framework和不同的函数。这里我们讲一下这个过程背后的东西。希望能够帮助大家了解什么时候该使用什么API,特别是当遇到性能问题需要调试的时候。当然,我们这里主要讲iOS,但是事实上,很多东西也是可以应用到OSX上面的。
269 0
iOS 开发:绘制像素到屏幕
|
JavaScript 大数据 Java
📊📈🦋🦋🦋 iOS 图表框架 AAChartKit ---强大、精美、易用的开源 iOS 图表
AAChartKit 项目,是AAInfographics的 Objective-C 语言版本,是在流行的开源前端图表框架Highcharts的基础上,封装的面向对象的,一组简单易用,极其精美的图表绘制控件.
3003 0
|
计算机视觉 iOS开发