BezierPath精讲

今天笔者要说是iOS中bezierPath,他是可以创建基于矢量的路径(矢量：就是带有方向曲线)，此类事Core Graphics框架关于路径的封装，通过此类，可以绘制你想要的图形或者曲线。

首先学此篇文章会需要一点点的数学的几何基础，不过没有也没有关系，因为有笔者在此。

温馨提示一下：下面笔者写的方法都是在 -(void)drawRect:(CGRect)rect;方法里执行，可能有的同学会疑惑自己画的曲线没有显示或者是不执行 -(void)drawRect:(CGrect)rect方法，不要着急，其实很简单，只要检查两点即可；

1：当view的size为（0.0），系统是不会执行drawRect

2：当view没有superView,系统也不会执行draRect方法

1.看 .h文件的中的方法

+ (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;

上面的类方法

- (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;

下面呢，笔者会通过例子对上面的方法做一一的详解，从上到下的顺序

   

第一个个就是创建方法，这里不多说

第二个就是创建矩形

效果图：

代码如下：

    self.wsBezierPath = [UIBezierPath bezierPathWithRect:CGRectMake(20, 20, 100, 100)];
    self.wsBezierPath.lineWidth = 5;
    //设置画笔颜色
    UIColor * color = [UIColor redColor];
    [color set];
    [self.wsBezierPath fill];//填充颜色
    
    UIColor * color2 = [UIColor blueColor];
    [color2 set];
    [self.wsBezierPath stroke];//画笔颜色

代码里面笔者都有相应解释，所以笔者都不过于解释，不然过于累赘

第三：画相应的椭圆

效果图：

相应代码：

    self.wsBezierPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
    self.wsBezierPath.lineWidth = 20;
    //设置画笔颜色
    UIColor * color = [UIColor redColor];
    [color set];
    [self.wsBezierPath fill];//填充颜色
    
    UIColor * color2 = [UIColor blueColor];
    [color2 set];
    [self.wsBezierPath stroke];//画笔颜色

第四画带四个圆角的矩形

效果图：

代码如下：

    self.wsBezierPath = [UIBezierPath  bezierPathWithRoundedRect:CGRectMake(50, 50, 100, 100) cornerRadius:10];
    self.wsBezierPath.lineWidth = 5;
    //设置画笔颜色
    UIColor * color = [UIColor blueColor];
    [color set];
    [self.wsBezierPath fill];//填充颜色
    
    UIColor * color2 = [UIColor blueColor];
    [color2 set];
    [self.wsBezierPath stroke];//画笔颜色

第五是画让其哪个角带圆角

效果图如下：

代码如下：

    //这里要注释一下 cornerRadii目前苹果只识别宽度，对于长度没有反应 也就是说这是苹果的bug，我已经发邮件给苹果 目前还没有回复
    self.wsBezierPath = [UIBezierPath  bezierPathWithRoundedRect:CGRectMake(50, 50, 100, 100) byRoundingCorners:UIRectCornerTopRight cornerRadii:CGSizeMake(10, 100)];
    
    self.wsBezierPath.lineWidth = 5;
    //设置画笔颜色
    UIColor * color = [UIColor blueColor];
    [color set];
    [self.wsBezierPath fill];//填充颜色
    
    UIColor * color2 = [UIColor blueColor];
    [color2 set];
    [self.wsBezierPath stroke];//画笔颜色

这里面要说一下，方向的圆角是个枚举：

typedef NS_OPTIONS(NSUInteger, UIRectCorner) {
    UIRectCornerTopLeft     = 1 << 0,
    UIRectCornerTopRight    = 1 << 1,
    UIRectCornerBottomLeft  = 1 << 2,
    UIRectCornerBottomRight = 1 << 3,
    UIRectCornerAllCorners  = ~0UL
};

其次还有就是后面要cornerRadii这个属性，是让其写size的，但是笔者有些无法理解，所以就至邮箱给苹果了，有回复的话，我就更新此篇文章

第六画圆弧：

效果图：

代码如下：

   //clockwise 是否是顺时针
    self.wsBezierPath = [UIBezierPath  bezierPathWithArcCenter:CGPointMake(self.center.x, self.center.y) radius:50 startAngle:0 endAngle:M_PI clockwise:NO];
    
    self.wsBezierPath.lineWidth = 5;
    //设置画笔颜色
    UIColor * color = [UIColor clearColor];
    [color set];
    [self.wsBezierPath fill];//填充颜色
    
    UIColor * color2 = [UIColor blueColor];
    [color2 set];
    //提交画笔 开始画
    [self.wsBezierPath stroke];//画笔颜色

这里笔者是逆时针画的圆弧。在iOS中的坐标是左手螺旋定则。

第七：指定的路线画曲线

效果如下：

代码如下：

    UIBezierPath * path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(40, 40)];
    [path addLineToPoint:CGPointMake(40, 60)];
    [path addLineToPoint:CGPointMake(40, 60)];
    [path addLineToPoint:CGPointMake(40, 60)];
    [path addLineToPoint:CGPointMake(60, 110)];
    [path addLineToPoint:CGPointMake(70, 120)];
    [path addLineToPoint:CGPointMake(80, 130)];
    [path addLineToPoint:CGPointMake(90, 130)];
    [path addLineToPoint:CGPointMake(100, 140)];
    [path addLineToPoint:CGPointMake(110, 150)];
    
    
    self.wsBezierPath = [UIBezierPath  bezierPathWithCGPath:path.CGPath];
    
    self.wsBezierPath.lineWidth = 5;
    //设置画笔颜色
    UIColor * color = [UIColor clearColor];
    [color set];
    [self.wsBezierPath fill];//填充颜色
    
    UIColor * color2 = [UIColor blueColor];
    [color2 set];
    [self.wsBezierPath stroke];//画笔颜色

这里是通过 指定的路线 画出相应的曲线

到此上面的类方法都讲解完了，是不是发现还有有些需求 无法满足你，那么你可以继续向下阅读;

第八：通过点与点之间的连线去画线

效果图如下：

代码如下：

    //起始点
    [self.wsBezierPath moveToPoint:CGPointMake(50, 50)];
    //下面是连接点
    [self.wsBezierPath addLineToPoint:CGPointMake(150 , 200)];
    [self.wsBezierPath addLineToPoint:CGPointMake(60 , 150)];
    [self.wsBezierPath addLineToPoint:CGPointMake(50, 50)];//或者[self.wsBezierPath closePath];

    
    self.wsBezierPath.lineWidth = 5;
    //设置画笔颜色
    UIColor * color = [UIColor clearColor];
    [color set];
    [self.wsBezierPath fill];//填充颜色
    
    UIColor * color2 = [UIColor blueColor];
    [color2 set];
    [self.wsBezierPath stroke];//画笔颜色

mobeToPoint就是起点，其他的add就是连接点，这样的话  就可以画出不规则的图形和曲线

第九，画出抛物线（二次曲线）

效果图如下：

代码如下：

    self.wsBezierPath = [UIBezierPath bezierPath];
    
    //起始点
    [self.wsBezierPath moveToPoint:CGPointMake(50, 200)];
    //CGPointMake(70, 210) 是终点    CGPointMake(200, 50)是控制点
    [self.wsBezierPath addQuadCurveToPoint:CGPointMake(300, 200) controlPoint:CGPointMake(200, 50)];
    
    self.wsBezierPath.lineWidth = 5;
    //设置画笔颜色
    UIColor * color = [UIColor clearColor];
    [color set];
    [self.wsBezierPath fill];//填充颜色
    
    UIColor * color2 = [UIColor blueColor];
    [color2 set];
    [self.wsBezierPath stroke];//画笔颜色

这里可能有的同学不是很了解，没关系 就是 Y ==  A*(x*x) + B*(X) + C,就是解这个函数就OK了。

第十：画圆弧

效果如下：

代码如下：

   self.wsBezierPath = [UIBezierPath bezierPath];
    
    //起始点
    [self.wsBezierPath moveToPoint:CGPointMake(50, 200)];
   
    [self.wsBezierPath addArcWithCenter:CGPointMake(self.frame.size.width/2, self.frame.size.height/2) radius:50 startAngle:0 endAngle:M_PI clockwise:YES];
    
    self.wsBezierPath.lineWidth = 5;
    //设置画笔颜色
    UIColor * color = [UIColor clearColor];
    [color set];
    [self.wsBezierPath fill];//填充颜色
    
    UIColor * color2 = [UIColor blueColor];
    [color2 set];
    [self.wsBezierPath stroke];//画笔颜色

第十一：画三次曲线

效果图：

代码：

    UIBezierPath *path = [UIBezierPath bezierPath];
    
    // 设置起始端点
    [path moveToPoint:CGPointMake(20, 150)];
    
    [path addCurveToPoint:CGPointMake(300, 150)
            controlPoint1:CGPointMake(160, 0)
            controlPoint2:CGPointMake(160, 250)];
    
    path.lineCapStyle = kCGLineCapRound;
    path.lineJoinStyle = kCGLineJoinRound;
    path.lineWidth = 5.0;
    
    UIColor *strokeColor = [UIColor redColor];
    [strokeColor set];
    
    [path stroke];

到此bezierPath已经全部讲完，通过他，只有你想不到的，没有做不到的。

总结

     源码的下载地址： https://github.com/WSmalan/UIBezierPath

     我们在一般使用的时候，正常情况下是结合CAShapeLayer结合使用的。

     如有相关疑惑或者不解，可以通过下面的方式联系本人，或者在下面评论，笔者会第一时间回复和解答各位的疑问

     

   qq: 3145419760

   微信号：WsMl0612

   邮箱：wusong_gongzuo@163.com