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
BezierCurveView.m
在ViewController.m文件中测试如下:
演示截图如下:
下载地址:
Github:https://github.com/xiayuanquan/BezierCurveLineTest