UIBezierPath
UIBezierPath是 UIKit 中的一个类，继承于NSObject,是Core Graphics框架关于path的一个封装。主要用于定义一个由直线/曲线组合而成的路径, 并且可以在自定义视图中渲染该路径. 在使用的过程中, 我们只需要先指定好路径的结构, 可以是直线、曲线、各种形状, 然后使用系统为我们提供的方法将构建好的路径渲染出来即可。
使用步骤
- 自定义视图,重写View的drawRect方法（ 或者使用view添加CAShapeLayer
- 初始化创建UIBezierPath的对象
- 设置起始点，绘制path路径
- 设置UIBezierPath对象相关属性 （比如lineWidth、lineJoinStyle、aPath.lineCapStyle、color）
- 使用stroke(线)或者 fill(填充)方法结束绘图
初始化方法
直接就可以在初始化的时候,利用封装好的方法确定路径
+ (instancetype)bezierPath
//矩形路径
+ (instancetype)bezierPathWithRect:(CGRect)rect
//矩形内切椭圆路径
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect
//圆角矩形
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius
//以"圆弧路径"初始化一个UIBezierPath对象
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise
使用以上的初始化方法，即可绘制部分图形（矩形、圆弧等）
绘制属性和方法
绘制方法
利用当前设置的属性填充路径的封闭范围
- (void)fill
- (void)fillWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha
利用当前设置的属性根据路径绘制图形
- (void)stroke
- (void)strokeWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha
颜色设置
//[[UIColor blackColor] setFill];
- (void)setFill
//[[UIColor blackColor] setStroke];
- (void)setStroke
绘制属性
//路径宽度
@property(nonatomic) CGFloat lineWidth
//路径的终点形状，该属性适用于开放路径的起点和终点
@property(nonatomic) CGLineCap lineCapStyle
//路径的连接点形状, 默认为kCGLineJoinMiter(全部连接), 其他可选项为kCGLineJoinRound(圆形连接)和kCGLineJoinBevel(斜角连接)
@property(nonatomic) CGLineJoin lineJoinStyle
路径设置
//封闭曲线 连接起始点和结束点
- (void)closePath
//添加另一个路径
- (void)appendPath:(UIBezierPath *)bezierPath;
//判断是否包含某个点
- (BOOL)containsPoint:(CGPoint)point;
路径绘制
使用CGContext画圆
使用没有封装的Core Graphic绘图
//一个不透明的Quartz 2D绘画环境，相当于一个画布
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetRGBStrokeColor(context, 1, 0, 0, 1);//画笔的颜色
CGContextSetLineWidth(context, 1.0);//线宽
CGContextAddArc(context,
100, 20, 15, 0, M_PI * 2.0, 0);//添加圆
CGContextDrawPath(context, kCGPathStroke);//绘制路径
使用UIBezierPat初始化方法绘制圆弧
UIBezierPath就是针对Core Graphics库中的CGPathRef的封装，降低绘图的难度
- (void)drawRect:(CGRect)rect
{
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(rect.size.width / 2, rect.size.height /2) radius:rect.size.width/2.0 startAngle:0 endAngle:2*M_PI clockwise:YES];;
[path stroke];
// [path fill];
}
基本图形
使用点构造路径
设置初始点
- (void)moveToPoint:(CGPoint)point
增加一个点构成一条线的路径
- (void)addLineToPoint:(CGPoint)point
添加弧线的路线
- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise
绘制三角形
- (void)drawRect:(CGRect)rect {
UIBezierPath *path = [[UIBezierPath alloc] init];
//path移动到开始画图的位置
[path moveToPoint:CGPointMake(rect.origin.x, rect.origin.y)];
[path addLineToPoint:CGPointMake(rect.origin.x + rect.size.width, rect.origin.y)];
[path addLineToPoint:CGPointMake(rect.origin.x + rect.size.width/2, rect.origin.y + rect.size.height)];
//关闭path
[path closePath];
[path fill];
}
使用UIBezierPath与CALayer配合使用，不需重写drawRect方法
CAShapeLayer *layer = [CAShapeLayer layer];
layer.frame = CGRectMake(100, 400, 200, 200);
layer.lineWidth = 3.0f;
layer.strokeColor = [UIColor orangeColor].CGColor;
layer.fillColor = [UIColor yellowColor].CGColor;
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(50, 100)];
[path addLineToPoint:CGPointMake(150, 100)];
[path addLineToPoint:CGPointMake(100, 50)];
[path stroke];
[path closePath];
layer.path = path.CGPath;
[view.layer addSublayer:layer];
绘制五角星
UIBezierPath *path2 = [UIBezierPath bezierPath];
[path2 moveToPoint:CGPointMake(100, 400)];
[path2 addLineToPoint:CGPointMake(300, 400)];
[path2 addLineToPoint:CGPointMake(150, 550)];
[path2 addLineToPoint:CGPointMake(200, 300)];
[path2 addLineToPoint:CGPointMake(250, 550)];
[path2 closePath];
// path2.lineWidth = 10;
// [path2 stroke];
[[UIColor redColor] setFill];
[path2 fill];
二阶、三阶贝塞尔曲线
底下有控制点算法的文章，有兴趣可以研究下
二阶贝塞尔曲线
// endPoint: 曲线的终点位置
// controlPoint: 控制点
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint
绘制二阶曲线
二阶动画
- (void)drawRect:(CGRect)rect
{
UIBezierPath *path = [UIBezierPath bezierPath];
CGPoint currentPoint = CGPointMake(100, rect.size.height / 2.0);
CGPoint endPoint = CGPointMake(300, rect.size.height / 2.0);
[path moveToPoint:currentPoint];
if (_touchPoint.y == 0) {
_touchPoint.x = 200;
_touchPoint.y = rect.size.height / 2.0 - 100;
}
[path addQuadCurveToPoint:endPoint controlPoint:_touchPoint];
[path stroke];
//起始点
UIBezierPath *dot1 = [UIBezierPath bezierPathWithArcCenter:currentPoint radius:2 startAngle:0 endAngle:2 * M_PI clockwise:YES];
[dot1 fill];
//结束点
UIBezierPath *dot2 = [UIBezierPath bezierPathWithArcCenter:endPoint radius:2 startAngle:0 endAngle:2 * M_PI clockwise:YES];
[dot2 fill];
//控制点
UIBezierPath *dot3 = [UIBezierPath bezierPathWithArcCenter:_touchPoint radius:2 startAngle:0 endAngle:2 * M_PI clockwise:YES];
[[UIColor redColor] setFill];
[dot3 fill];
//控制线点
UIBezierPath *path2 = [UIBezierPath bezierPath];
CGFloat dashPattern[] = {3,1};// 3实线，1空白
[path2 setLineDash:dashPattern count:1 phase:1];
[path2 moveToPoint:currentPoint];
[path2 addLineToPoint:_touchPoint];
[path2 addLineToPoint:endPoint];
[path2 stroke];
}
三阶贝塞尔曲线
// endPoint: 曲线的终点位置
// controlPoint1: 第一控制点
// controlPoint2: 第二控制点
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2
绘制三阶贝塞尔曲线
三阶动画
- (void)drawRect:(CGRect)rect
{
UIBezierPath *path = [UIBezierPath bezierPath];
CGPoint currentPoint = CGPointMake(10, rect.size.height / 2.0);
CGPoint endPoint = CGPointMake(300, rect.size.height / 2.0);
[path moveToPoint:currentPoint];
if (_controlPoint1.y == 0) {
_controlPoint1.x = 100;
_controlPoint1.y = rect.size.height / 2.0 - 100;
}
if (_controlPoint2.y == 0) {
_controlPoint2.x = 200;
_controlPoint2.y = rect.size.height / 2.0 + 100;
}
// [path addQuadCurveToPoint:endPoint controlPoint:_touchPoint];
[path addCurveToPoint:endPoint controlPoint1:_controlPoint1 controlPoint2:_controlPoint2];
[path stroke];
//起始点
UIBezierPath *dot1 = [UIBezierPath bezierPathWithArcCenter:currentPoint radius:2 startAngle:0 endAngle:2 * M_PI clockwise:YES];
[dot1 fill];
//结束点
UIBezierPath *dot2 = [UIBezierPath bezierPathWithArcCenter:endPoint radius:2 startAngle:0 endAngle:2 * M_PI clockwise:YES];
[dot2 fill];
//控制点1
UIBezierPath *dot3 = [UIBezierPath bezierPathWithArcCenter:_controlPoint1 radius:2 startAngle:0 endAngle:2 * M_PI clockwise:YES];
[[UIColor redColor] setFill];
[dot3 fill];
//控制点2
UIBezierPath *dot4 = [UIBezierPath bezierPathWithArcCenter:_controlPoint2 radius:2 startAngle:0 endAngle:2 * M_PI clockwise:YES];
[[UIColor redColor] setFill];
[dot4 fill];
//控制线点
UIBezierPath *path2 = [UIBezierPath bezierPath];
CGFloat dashPattern[] = {3,1};// 3实线，1空白
[path2 setLineDash:dashPattern count:1 phase:1];
[path2 moveToPoint:currentPoint];
[path2 addLineToPoint:_controlPoint1];
[path2 addLineToPoint:_controlPoint2];
[path2 addLineToPoint:endPoint];
[path2 stroke];
}
