iOS-贝塞尔曲线(UIBezierPath)的使用(一)
UIBezierPath是UIKit中Core Graphics框架中的一个类，使用UIBezierPath可以绘制各种简单的图形。
入门篇：iOS-贝塞尔曲线(UIBezierPath)的使用(一)
今天我们简单介绍一下它的使用方法：
- UIBezierPath的基本使用方法以及概念
- 各种图形的绘制：直线，折线，多边形，圆，圆弧，虚线....等等
- 延伸场景：动画，图表.....等
UIBezierPath的基本使用方法
首先绘制图形线条要在view的- (void)drawRect:(CGRect)rect方法中。
先写一个简单的例子，来介绍几个常用的方法属性。
- (void)drawRect:(CGRect)rect {
// Drawing code
[super drawRect:rect];
UIColor *color = [UIColor redColor];
[color set]; //设置线条颜色
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(30, 30)];
[path addLineToPoint:CGPointMake(200, 80)];
[path addLineToPoint:CGPointMake(150, 150)];
path.lineWidth = 5.0;
path.lineCapStyle = kCGLineCapRound; //终点处理
path.lineJoinStyle = kCGLineJoinRound; //线条拐角
[path stroke];
}
效果图如下：
折线
在我们绘制之前，我们先简单了解一下UIBezierPath的几个属性和方法：
1、[color set]设置线条颜色
2、path.lineWidth = 4.0设置线条的宽度
3、path.lineCapStyle设置起点和终点的样式，是一个枚举值：
1、kCGLineCapButt 默认值，
2、kCGLineCapRound 圆形端点
3、 kCGLineCapSquare 方形端点
4、path.lineJoinStyle设置连接点的样式，是一个枚举值。
1、kCGLineJoinMiter 斜接连接处是一个斜线，
2、kCGLineJoinRound 连接处是一段圆滑的弧度，
3、kCGLineJoinBevel 一段斜角连接
至于具体的样式，大家可以看看效果。
5、[path stroke]用stroke画出来的不是被填充的view，与此对应的[path fill]得到的是内部被填充的view。
6、moveToPoint:设置起始点
7、addLineToPoint:连线到另一个点。（其实我们绘制图形就是，把很多个点连接起来，主要就是依靠这个方法）
8、closePath这个方法就是最后一条线，将终点和起点连接起来。
接下来我们开始学习一些基本使用
👇 👇 👇 👇 👇 👇
1. 绘制多边形
//多边形
- (void)drawRect:(CGRect)rect {
// Drawing code
[super drawRect:rect];
UIColor *color = [UIColor redColor];
[color set]; //设置线条颜色
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(50, 100)];
[path addLineToPoint:CGPointMake(150, 50)];
[path addLineToPoint:CGPointMake(250, 100)];
[path addLineToPoint:CGPointMake(250, 200)];
[path addLineToPoint:CGPointMake(100, 200)];
[path closePath]; // 最后一根线条,可以直接调此方法
path.lineWidth = 5.0;
path.lineCapStyle = kCGLineCapRound; //终点处理
path.lineJoinStyle = kCGLineJoinRound; //线条拐角
[path stroke]; //不填充
// [path fill]; //填充
}
效果图如下：
多边形
如果将上面代码中，最后的[path stroke]方法改为[path fill]，那么图形就会被填充颜色
填充多边形
2. 矩形
矩形的绘制，可以使用上面绘制多边形的方法去绘制（方法1）。
正方形是特殊的矩形，使用原理相同。只要把宽和高设置一样即可。
UIBezierPath类提供了特殊的方法可以直接绘制矩形。
即：+ (UIBezierPath *)bezierPathWithRect:(CGRect)rect
使用方法如下：
//矩形
- (void)drawRect:(CGRect)rect {
[super drawRect:rect];
UIColor *color = [UIColor redColor];
[color set]; //设置线条颜色
UIBezierPath* path = [UIBezierPath bezierPathWithRect:CGRectMake(100, 100, 150, 80)];
path.lineWidth = 5.0;
path.lineCapStyle = kCGLineCapRound; //终点处理
path.lineJoinStyle = kCGLineJoinRound; //线条拐角
[path stroke];
}
效果图如下：
矩形
3. 圆和椭圆
圆形和椭圆形的绘制，如同矩形一样，UIBezierPath类提供了直接绘制的方法：+ (UIBezierPath *)bezierPathWithOvalInRect:(CGRect)rect。传入的rect参数是一个长方形就会得到一个内切的椭圆，传入的是一个正方形得到的就是一个内切的圆形。
使用方法如下：
- (void)drawRect:(CGRect)rect {
[super drawRect:rect];
UIColor *color = [UIColor redColor];
[color set];
UIBezierPath* path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 150, 80)];
path.lineWidth = 5.0;
[path stroke];
}
效果图如下：
椭圆
4. 一段圆弧
使用+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;方法可以得到一单圆弧。
/// 创建一段圆弧
/// @param center 圆弧的原点(中心点)
/// @param radius 半径
/// @param startAngle 其实角度
/// @param endAngle 结束角度
/// @param clockwise 是否是顺时针
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;
使用方法如下：
//圆弧
- (void)drawRect:(CGRect)rect {
[super drawRect:rect];
UIColor *color = [UIColor redColor];
[color set];
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(200, 200) radius:100 startAngle:1.25 * M_PI endAngle:1.75 * M_PI clockwise:YES];
[path addLineToPoint:CGPointMake(200, 200)];
[path closePath];
path.lineWidth = 5.0;
path.lineCapStyle = kCGLineCapRound; //终点处理
path.lineJoinStyle = kCGLineJoinRound; //线条拐角
[path stroke];
}
效果图如下：
圆弧
5. 绘制二次曲线
绘制二次曲线，我们先明白一个概念：
二次曲线就是一段曲线，圆弧是比较特殊的曲线，暂不考虑。
每个二次曲线的的起始点和终点的切线，会相交到一个点，我们称之为：控制点。
绘制二次曲线我们需要三个点：起始点、控制点、终点。
如下图所示：
控制点
使用方法如下：
//二次曲线
- (void)drawRect:(CGRect)rect {
[super drawRect:rect];
UIColor *color = [UIColor redColor];
[color set];
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(100, 200)];
[path addQuadCurveToPoint:CGPointMake(250, 200) controlPoint:CGPointMake(50, 40)];
path.lineWidth = 5.0;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineJoinRound;
[path stroke];
}
效果图如下：
二次曲线
6. 绘制三次曲线
三次曲线和二次曲线类似，原理相同。
简单地说，我们需要起始点、终点、两个控制点。
因为是三次曲线，有两个波，一个波峰一个波谷，所以需要两个控制点。
需要用到方法：- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;
使用方法如下：
// 三次曲线
- (void)drawRect:(CGRect)rect {
[super drawRect:rect];
UIColor *color = [UIColor redColor];
[color set];
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(50, 150)];
[path addCurveToPoint:CGPointMake(260, 150) controlPoint1:CGPointMake(140, 0) controlPoint2:CGPointMake(140, 400)];
path.lineWidth = 5.0;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineJoinRound;
[path stroke];
}
效果图如下：
三次曲线
7. 画带圆角的矩形
这个结果类似于讲一个矩形切圆角，但是不一样。
这是一条线。切圆角的矩形线！
使用系统提供的方法：+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius即可。绘制一个带内切圆的矩形。
使用方法如下：
//带内切角的矩形
- (void)drawRect:(CGRect)rect {
[super drawRect:rect];
UIColor *color = [UIColor redColor];
[color set]; //设置线条颜色
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 200, 150) cornerRadius:20];
path.lineWidth = 5.0;
path.lineCapStyle = kCGLineCapRound; //线条拐角
path.lineJoinStyle = kCGLineJoinRound; //终点处理
[path stroke];
}
效果图如下：
带内切角的矩形
如果想指定内切某一个角，系统也提供了方法。
使用方法如下：
- (void)drawRect:(CGRect)rect {
[super drawRect:rect];
UIColor *color = [UIColor redColor];
[color set]; //设置线条颜色
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 200, 150) byRoundingCorners:UIRectCornerTopRight cornerRadii:CGSizeMake(20, 20)];
path.lineWidth = 5.0;
path.lineCapStyle = kCGLineCapRound; //线条拐角
path.lineJoinStyle = kCGLineJoinRound; //终点处理
[path stroke];
}
效果图如下：
内切右上角
总结：
从全篇看下来你会发现，其实就是介绍了几个系统提供的几个方法的使用简介。这都是最起初的使用，都是在view的内部的方法drawRect里面进行绘制。
一般项目用到的不多，后面会说结合CAShapeLayer，在外部对已有的view绘制图形线条，还有虚线，图标等，并进行简单的动画。项目中会用来制作曲线！
更复杂的动画也会说一些，比如QQ未读消息的拖拽的动画。
所有代码我都全部敲写验证过。
