初识贝塞尔曲线

1.UIBezierPath简介

UIBezierPath类是Core Graphics框架关于path的一个封装。可以定义简单的形状，如椭圆或者矩形，或者有多个直线和曲线段组成的形状。

2.使用UIBezierPath绘图的优点

使用方便，易于阅读，便于管理

3.初识UIBezierPath中的常用的属性和方法

Drawing properties

@property(nonatomic) CGFloat lineWidth;//线宽
//终点连接类型
 kCGLineCapButt,//斜角连接
 kCGLineCapRound,//圆滑衔接 
 kCGLineCapSquare//斜角连接
@property(nonatomic) CGLineCap lineCapStyle;
//交叉点的类型
 kCGLineJoinMiter
 kCGLineJoinRound
 kCGLineJoinBevel
@property(nonatomic) CGLineJoin lineJoinStyle;
@property(nonatomic) CGFloat miterLimit; // 两条线交汇处内角和外角之间的最大距离,需要交叉点类型为kCGLineJoinMiter是生效，最大限制为10,这个限制值有助于避免在连接线段志坚的尖峰
@property(nonatomic) CGFloat flatness;// 个人理解为绘线的精细程度，默认为0.6，数值越大，需要处理的时间越长
@property(nonatomic) BOOL usesEvenOddFillRule;  // 决定是否使用even-odd或者non-zero规则

path construction

//设置画笔的起始点
- (void)moveToPoint:(CGPoint)point;
//从当前点到指定点绘制直线
- (void)addLineToPoint:(CGPoint)point;
//添加贝塞尔曲线
//endPoint终点 controlPoint1、controlPoint2控制点
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;
//endPoint终点 controlPoint控制点
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;
//添加弧线
 center弧线圆心坐标 radius弧线半径 startAngle弧线起始角度 endAngle弧线结束角度 clockwise是否顺时针绘制
- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise 
//闭合路径，封闭未形成闭环的路径
- (void)closePath;
//移除所有的点，删除所有的subPath
- (void)removeAllPoints;
//追加bezierPath路径
- (void)appendPath:(UIBezierPath *)bezierPath;
// 创建并返回一个新的反转内容的当前路径曲线路径的对象。
- (UIBezierPath *)bezierPathByReversingPath 
// 用指定的仿射变换矩阵变换路径的所有点
- (void)applyTransform:(CGAffineTransform)transform;
//填充
- (void)fill; 
//路径绘制
- (void)stroke; 
//在这以后的图形绘制超出当前路径范围则不可见
- (void)addClip; 

4.画图示例代码

直线图

// 设置线的填充色
  [[UIColor redColor] setStroke];
  // 新建一个bezier对象
  UIBezierPath *bezierPath = [UIBezierPath bezierPath];
  // 设置线宽度
  bezierPath.lineWidth = 10;
  // 设置线两头样式
  bezierPath.lineCapStyle = kCGLineCapRound;
  // 设置起点、终点坐标
  [bezierPath moveToPoint:CGPointMake(10, 10)];
  [bezierPath addLineToPoint:CGPointMake(100, 100)];
  // 开始绘制
  [bezierPath stroke];

矩形图

// 设置线的填充色
[[UIColor redColor] setStroke];
// 新建一个bezier对象，此对象用于绘制矩形，需要传入绘制的矩形的Frame
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRect:CGRectMake(10, 10, 50, 50)];
// 设置线宽度
bezierPath.lineWidth = 10;
// 设置线两头样式
bezierPath.lineCapStyle = kCGLineCapRound;
 // 开始绘制
[bezierPath stroke];

圆角矩形

// 设置线的填充色
[[UIColor redColor] setStroke];
// 新建一个bezier对象，此对象用于绘制一个圆角矩形
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 50, 50)cornerRadius:10];
// 设置线宽度
bezierPath.lineWidth = 10;
// 开始绘制
[bezierPath stroke];
// rect: 需要画的矩形的Frame 
//corners: 哪些部位需要画成圆角  
//cornerRadius: 圆角的Size

部分圆角矩形

// 设置线的填充色
[[UIColor redColor] setStroke];
// 新建一个bezier对象，此对象用于绘制一个部分圆角的矩形，左上、右下
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 50, 50) byRoundingCorners:UIRectCornerTopLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(10, 10)];
// 设置线宽度
bezierPath.lineWidth = 10;
// 开始绘制
[bezierPath stroke];

圆

// 设置线的填充色
[[UIColor redColor] setStroke];
// 新建一个bezier对象，此对象用于绘制内切圆，需要传入绘制内切圆的矩形的Frame
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10, 10, 50, 50)];
// 设置线宽度
bezierPath.lineWidth = 10;
// 设置线两头样式
bezierPath.lineCapStyle = kCGLineCapRound;
// 开始绘制
[bezierPath stroke];
//center: 圆心坐标 
//radius: 圆的半径 
//startAngle: 绘制起始点角度 
//endAngle: 绘制终点角度 
//clockwise: 是否顺时针 

圆弧

// 设置线的填充色 
[[UIColor redColor] setStroke]; 
// 新建一个bezier对象，此对象用于绘制一个圆弧 UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:110 startAngle:0 endAngle:M_PI_2 clockwise:NO]; // 设置线宽度 
bezierPath.lineWidth = 10;  
// 开始绘制 
[bezierPath stroke];

二阶曲线

// 设置线的填充色
[[UIColor redColor] setStroke];
// 新建一个bezier对象
UIBezierPath *bezierPath = [UIBezierPath bezierPath];
// 设置线宽度
bezierPath.lineWidth = 10;
// 设置线两头样式
bezierPath.lineCapStyle = kCGLineCapRound;
// 设置起点、终点坐标
[bezierPath moveToPoint:CGPointMake(100, 100)];
[bezierPath addQuadCurveToPoint:CGPointMake(200, 200) controlPoint:CGPointMake(300, 0)];
// 开始绘制
[bezierPath stroke];

三阶曲线

// 设置线的填充色 
[[UIColor redColor] setStroke];  
// 新建一个bezier对象 
UIBezierPath *bezierPath = [UIBezierPath bezierPath]; 
// 设置线宽度 
bezierPath.lineWidth = 10; 
// 设置线两头样式 
bezierPath.lineCapStyle = kCGLineCapRound; 
// 设置起点、终点坐标 
[bezierPath moveToPoint:CGPointMake(100, 100)]; [bezierPath addCurveToPoint:CGPointMake(200, 200) controlPoint1:CGPointMake(150, 0) controlPoint2:CGPointMake(150, 300)];  
// 开始绘制 
[bezierPath stroke];

多阶曲线

// 设置线的填充色 
[[UIColor redColor] setStroke];  
// 新建一个bezier对象 
UIBezierPath *bezierPath = [UIBezierPath bezierPath]; 
// 设置线宽度 
bezierPath.lineWidth = 10; 
// 设置线两头样式 
bezierPath.lineCapStyle = kCGLineCapRound; 
// 设置起点、终点坐标 
[bezierPath moveToPoint:CGPointMake(100, 100)]; [bezierPath addCurveToPoint:CGPointMake(200, 200) controlPoint1:CGPointMake(150, 0) controlPoint2:CGPointMake(150, 300)];  
// 创建第二条贝塞尔曲线 
UIBezierPath *bezierPath2 = [UIBezierPath bezierPath]; // 设置起点、终点坐标 
[bezierPath2 moveToPoint:CGPointMake(200, 200)]; [bezierPath2 addCurveToPoint:CGPointMake(290, 290) controlPoint1:CGPointMake(250, 0) controlPoint2:CGPointMake(250, 300)]; 
// 将第二条线，加到第一条线上面去 
[bezierPath appendPath:bezierPath2];  
// 开始绘制 
[bezierPath stroke];

4.github demo地址

https://github.com/smallSmallWhite/BezierCurve.git