UIBezierPath详解

学习知识的时候，最重要的是看官方的API，之前虽然用过贝塞尔曲线，但并没有详细的记录一下，现在打算系统的总结一下！

一、UIBezierPath的简介：

1、UIBezierPath在UIKit中可以创建路径；
2、是基于Core Graphics对CGPathRef数据类型和path绘图属性的一个封装，所以是需要图形上下文的CGContextRef，所以一般UIBezierPath在drawRect中使用；
3、使用此类可以定义简单的形状；

二、UIBezierPath的API讲解：

1、四个角

typedef NS_OPTIONS(NSUInteger, UIRectCorner) {
    UIRectCornerTopLeft     = 1 << 0,        //左上
    UIRectCornerTopRight    = 1 << 1,       //右上
    UIRectCornerBottomLeft  = 1 << 2,      //左下
    UIRectCornerBottomRight = 1 << 3,     //右下
    UIRectCornerAllCorners  = ~0UL       //全部
};

2、创建

//初始化贝塞尔曲线(无形状)
+ (instancetype)bezierPath;
//绘制矩形贝塞尔曲线
+ (instancetype)bezierPathWithRect:(CGRect)rect;
//绘制椭圆（圆形）曲线
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;
// 绘制含有圆角的贝塞尔曲线
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius;
//绘制可选择圆角方位的贝塞尔曲线
+ (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;
//根据CGPathRef绘制贝塞尔曲线
+ (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;
//初始化对象
- (instancetype)init 
//它把模型对象直接转变成一个文件，然后再把这个文件重新加载到内存里
//并不需要任何文件解析和序列化的逻辑
- (nullable instancetype)initWithCoder:(NSCoder *)aDecoder 

3、路径相关

/*
 1、绘制路径
*/
// UIBezierPath的路径
@property(nonatomic) CGPathRef CGPath;
- (CGPathRef)CGPath

//贝塞尔曲线开始的点
- (void)moveToPoint:(CGPoint)point;
//添加直线到该点
- (void)addLineToPoint:(CGPoint)point;
//添加二次曲线到该点
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;
//添加曲线到该点
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;
//添加圆弧 注:上一个点会以直线的形式连接到圆弧的起点
- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise
//闭合曲线
- (void)closePath;
//去掉所有曲线点
- (void)removeAllPoints;

/*
 2、添加路径
*/
- (void)appendPath:(UIBezierPath *)bezierPath;

/*
3、修改路径
*/
- (UIBezierPath *)bezierPathByReversingPath NS_AVAILABLE_IOS(6_0);

/*
4、变/转换路径
*/
- (void)applyTransform:(CGAffineTransform)transform;

/*
5、路径信息
*/
//是否为空
@property(readonly,getter=isEmpty) BOOL empty;
//相对于自身的的原点(0,0)
@property(nonatomic,readonly) CGRect bounds;
//当前的点
@property(nonatomic,readonly) CGPoint currentPoint;
- (BOOL)containsPoint:(CGPoint)point;

/*
6、对当前图形上下文路径操作
*/
//填充贝塞尔曲线内部
- (void)fill;
//绘制贝塞尔曲线边框
- (void)stroke;

4、绘图属性

//边框宽度
@property(nonatomic) CGFloat lineWidth;
//端点类型1、无端点  2、圆形端点  3、和无端点差不多，但是要长一点
@property(nonatomic) CGLineCap lineCapStyle;
//线条连接类型 1、尖角  2、圆角  3、切角
@property(nonatomic) CGLineJoin lineJoinStyle;
//线条最大宽度最大限制
@property(nonatomic) CGFloat miterLimit; 
//个人理解为绘线的精细程度，默认为0.6，数值越大，需要处理的时间越长
@property(nonatomic) CGFloat flatness;
//框填充规则用于绘画,剪裁,点击测试，默认是NO
@property(nonatomic) BOOL usesEvenOddFillRule;
//虚线类型
- (void)setLineDash:(nullable const CGFloat *)pattern count:(NSInteger)count phase:(CGFloat)phase;
- (void)getLineDash:(nullable CGFloat *)pattern count:(nullable NSInteger *)count phase:(nullable CGFloat *)phase;

//用指定的混合模式和透明度值来描绘受接收路径所包围的区域
- (void)fillWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha;

//使用指定的混合模式和透明度值沿着接收器路径。绘制一行
- (void)strokeWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha;

//剪切路径
- (void)addClip;

三、添加二次贝塞尔曲线的方法：

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

示例代码

- (void)drawRect:(CGRect)rect {

    //设置线条颜色
    [[UIColor redColor] set];

    //创建UIBezierPath
    UIBezierPath *apath = ({
    
        UIBezierPath *path = [UIBezierPath bezierPath];
        path.lineWidth     = 2.0f;              //设置线条宽度
        //path.lineCapStyle = kCGLineCapRound;   //设置拐角
        
        //绘制二次贝赛尔曲线
        //设置起始点
        [path moveToPoint:CGPointMake(100, 300)];
        //设置EndPoint & Control Point
        [path addQuadCurveToPoint:CGPointMake(300, 300) controlPoint:CGPointMake(100, 10)];
        path;

    });
    [apath stroke];    //更具坐标连线
}

效果图如下：

render.png

可以参照下面这张图看看每个点的定义：

二次曲线.png

四、三次贝赛尔曲线的方法：

- (void)drawRect:(CGRect)rect {

    //设置线条颜色
    [[UIColor redColor] set];
    
    //创建UIBezierPath
    UIBezierPath *apath = ({
    
        UIBezierPath *path = [UIBezierPath bezierPath];
        path.lineWidth     = 2.0f;              //设置线条宽度
        
        //绘制三次贝赛尔曲线
        
        //设置起始点
        [path moveToPoint:CGPointMake(100, 300)];
        //设置EndPoint & Control Point
        [path addCurveToPoint:CGPointMake(300, 200)
                controlPoint1:CGPointMake(200, 80)
                controlPoint2:CGPointMake(220, 500)];
        path;
    });
    //更具坐标连线
    [apath stroke];
}

效果图如下：

Render.png

可以参照下面这张图看看每个点的定义

三次曲线.png