iOS 之UIBezierPath

作者: 半笑半醉間 | 来源:发表于2017-02-16 17:55 被阅读943次

    在之前的文章中,由于用到过UIBezierPath这个类,所以这里就对这个类进行简单的记录一下,方便自己也方便他人。

    使用UIBezierPath类可以创建基于矢量的路径,这个类在UIKit中。它是基于Core GraphicsCGPathRef数据类型和path绘图属性的一个封装,所以是需要图形上下文的CGContextRef,所以一般UIBezierPathdrawRect中使用。使用此类可以定义简单的形状,如椭圆或者矩形,或者有多个直线和曲线段组成的形状.下面就简单介绍以下。

    UIBezierPath常用方法及属性
    属性

    1.CGPath :
    将UIBezierPath类转换成CGPath,和UIColor的CGColor类似

    2.currentPoint:
    当前path的位置,可以理解为path的终点

    3.lineWidth:
    可以理解为路径的宽度

    4.lineCapStyle:
    path端点样式,有3种样式

    typedef CF_ENUM(int32_t, CGLineCap) {
        kCGLineCapButt,//无端点
        kCGLineCapRound,//圆形端点
        kCGLineCapSquare//和无端点差不多,但是要长一点
    };
    

    见下图 分别为三种方式

    1.png

    5.lineJoinStyle:
    path拐角样式,也有3种样式

    typedef CF_ENUM(int32_t, CGLineJoin) {
        kCGLineJoinMiter,//尖角
        kCGLineJoinRound,//圆角
        kCGLineJoinBevel//切角
    };
    

    效果如下

    2.png

    6.miterLimit:
    最大斜接长度,怎么理解呢?就是上图中拐角处外面尖角和内部尖角的距离。但是这个只有在kCGLineJoinMiter情况下使用才有效果,如果这个miterLimit小于斜接长度,就成为了kCGLineJoinBevel类型
    我测试的代码为

            //断点样式
            switch (i) {
                case 0:
                {
                    //尖角
                    path.lineJoinStyle = kCGLineJoinMiter;
                    //这里设为1 因为斜接长度超过了1 所以就自动转化为了kCGLineJoinBevel类型
                    //path.miterLimit = 1;
                }
    

    7.UIRectCorner
    角 分为四种情况

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

    这个情况我会在后面的方法中运用展示出效果

    方法
    //在rect内创建矩形
    + (instancetype)bezierPathWithRect:(CGRect)rect;
    //画矩形
    - (void)gl_bezierPathWithRect:(CGRect)rect
    {
        UIColor *color = [UIColor redColor];
        [color set]; //设置线条颜色
        
        UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(10, 40, MIN(100, rect.size.width), MIN(100, rect.size.height))];
        path.lineWidth = 5;
        path.lineCapStyle = kCGLineCapButt;
        path.lineJoinStyle = kCGLineJoinMiter;
        
        [path stroke];
    }
    

    效果如下:

    3.png
    //创建在rect内的内切曲线
    + (instancetype)bezierPathWithOvalInRect:(CGRect)rect;
    
    //在rect内创建内切的曲线
    - (void)gl_bezierPathWithOvalInRect:(CGRect)rect
    {
        UIColor *color = [UIColor redColor];
        [color set]; //设置线条颜色
        
        UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10, 40, MIN(100, rect.size.width), MIN(200, rect.size.height))];
        path.lineWidth = 5;
        path.lineCapStyle = kCGLineCapButt;
        path.lineJoinStyle = kCGLineJoinMiter;
        
        [path stroke];
    }
    

    效果如下


    8.png
    //创建带有圆角的矩形,cornerRadius为圆角,如果矩形为正方形切cornerRadius大于正方形的边长的一半时,cornerRadius就不再有效果,矩形就成为圆形
    + (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius;
    
    //创建带有圆角的矩形
    - (void)gl_bezierPathWithRoundedRect:(CGRect)rect
    {
        UIColor *color = [UIColor redColor];
        [color set]; //设置线条颜色
        
        UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 40, MIN(100, rect.size.width), MIN(100, rect.size.height)) cornerRadius:10];
        path.lineWidth = 2;
        path.lineCapStyle = kCGLineCapButt;
        path.lineJoinStyle = kCGLineJoinMiter;
        
        [path stroke];
    }
    

    效果如下


    9.png
    //创建特定的角为圆角的矩形  corners 分别对应上面属性中的类型,cornerRadii圆角的大小,已size中最大的为准,如果超过其邻近最短边的一半,则已最短边一半为准
    + (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii
    
    //创建有特点圆角的矩形 可以分别设四个角
    - (void)gl_speical_bezierPathWithRoundedRect:(CGRect)rect
    {
        UIColor *color = [UIColor redColor];
        [color set]; //设置线条颜色
        
        UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 40, MIN(100, rect.size.width), MIN(200, rect.size.height)) byRoundingCorners:UIRectCornerTopLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(100, 100)];
        path.lineWidth = 2;
        path.lineCapStyle = kCGLineCapButt;
        path.lineJoinStyle = kCGLineJoinMiter;
        
        [path stroke];
    }
    

    效果如下

    10.png
    //创建圆弧  center圆心  radius  半径    startAngle 起始位置  endAngle终点 clockwise 是否顺时针
    + (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;
    //由于此方法和下面方法效果一样所以就用其中一个进行效果展示
    - (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise NS_AVAILABLE_IOS(4_0);
    
    //添加圆弧
    - (void)gl_drawArc
    {
        [[UIColor redColor]set];
        
        UIBezierPath *path = [UIBezierPath bezierPath];
        path.lineWidth = 3.0;
        
        //以下参数分别为圆弧的中心坐标  半径 起点  终点 是否顺时针
        [path addArcWithCenter:CGPointMake(self.frame.size.width/2.0, self.frame.size.height/2.0) radius:50 startAngle:0 endAngle:3 * M_PI_2 clockwise:YES];
        
        [path stroke];
    }
    
    

    效果如下

    4.png

    使用该方法的时候,弧度可以参考下面的图片

    11.png

    在上述方法中,我们都用的是[path stroke]这个方法,查看API会发现还有一个方法fill,那么这两个方法有什么区别呢?我这里就以上面的添加圆弧方法为例进行修改,其效果为下:

    7.png
    由此可见,fill方法应该是填充的意思
    //移动到某个位置 一般和其他方法配合使用
    - (void)moveToPoint:(CGPoint)point;
    
    //绘制一条线
    - (void)addLineToPoint:(CGPoint)point
    
    //下面是将方法6 和 方法7一起使用画出本文第一张图的代码
    //画线条
    - (void)gl_drawLine
    {
        //颜色设置
        [[UIColor redColor]set];
    
        for (NSInteger i = 0; i < 3; i++)
        {
            UIBezierPath *path = [UIBezierPath bezierPath];
            //线条的宽度
            path.lineWidth = 5.0;
            
            [path moveToPoint:CGPointMake(10, (1+i)*40)];
            [path addLineToPoint:CGPointMake(100, (1+i)*40)];
            //断点样式
            switch (i) {
                case 0:
                {
                    //无端点
                    path.lineCapStyle = kCGLineCapButt;
                }
                    break;
                case 1:
                {
                    //圆形端点
                    path.lineCapStyle = kCGLineCapRound;
                }
                    break;
                case 2:
                {
                    //方形端点 和无端点差不多 但是要长一点点
                    path.lineCapStyle = kCGLineCapSquare;
                }
                    break;
                default:
                    break;
            }
            
            [path stroke];
        }
    }
    

    8

    //创建三次贝塞尔曲线
    //endPoint 终点坐标   controlPoint1 控制坐标1   controlPoint2 控制坐标2
    - (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2
    
    //创建三次贝塞尔曲线
    - (void)gl_drawThreeBezier
    {
        [[UIColor redColor]set];
        
        UIBezierPath *path = [UIBezierPath bezierPath];
        path.lineWidth = 3.0;
        //起点坐标
        [path moveToPoint:CGPointMake(10, 140)];
        //下面三个点分别为 终点坐标  控制坐标1 控制坐标2
        [path addCurveToPoint:CGPointMake(190, 100) controlPoint1:CGPointMake(100, 50) controlPoint2:CGPointMake(130, 190)];
        [path stroke];
    }
    

    效果图如下

    6.png

    参考图如下

    12.png
    //创建二次贝塞尔曲线  endPoint 终点  控制坐标
    - (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint
    
    //创建二次贝塞尔曲线
    - (void)gl_drawBezier
    {
        [[UIColor redColor]set];
        
        UIBezierPath *path = [UIBezierPath bezierPath];
        path.lineWidth = 3.0;
        //起点坐标
        [path moveToPoint:CGPointMake(10, 140)];
        //下面三个点分别为 终点坐标  控制坐标
        [path addQuadCurveToPoint:CGPointMake(190, 100) controlPoint:CGPointMake(100, 50)];
        
        [path stroke];
    }
    
    

    效果如下

    5.png

    参考图如下


    13.png
    //将路径闭合,即将起点和终点连起
    - (void)closePath;
    
    //清空所有路径
    - (void)removeAllPoints;
    
    //顾名思义  应该是追加路径的意思
    - (void)appendPath:(UIBezierPath *)bezierPath
    
    //绘制虚线
    - (void)setLineDash:(nullable const CGFloat *)pattern count:(NSInteger)count phase:(CGFloat)phase;
    //pattern 线段数组 如:CGFloat dash[] = {1,1}; 代表实线和空白交替的长度 及先绘制1个长度再空1个,再绘制一个.....
    //count数组长度 count值小于数组实际长度时,方法就会对相应长度的数组元素进行循环,而大于的时候 会有警告,没有效果
    //phase 循环数组时跳过的长度,如pattern为{2,6},phase为1,则第一个元素画1的时候就跳过直接画6 
    
    //在上面画线的方法中,添加以下代码 
            CGFloat dash[] = {2,6};
            
            [path setLineDash:dash count:2 phase:1];
    

    效果最终如下

    14.png

    下面附上Demo

    所有方法可以在下面这个地方进行使用,需要用就打开,不用就屏蔽

    //BezierPathView.m
    - (void)drawRect:(CGRect)rect {
    
    //    [self gl_bezierPathWithRect:rect];
        [self gl_drawLine];
    //    [self gl_drawCorner];
    //    [self gl_drawThreeBezier];
    //    [self gl_drawBezier];
    //    [self gl_drawArc];
    //    [self gl_bezierPathWithOvalInRect:rect];
    //    [self gl_bezierPathWithRoundedRect:rect];
    //    [self gl_speical_bezierPathWithRoundedRect:rect];
    }
    

    相关文章

      网友评论

        本文标题:iOS 之UIBezierPath

        本文链接:https://www.haomeiwen.com/subject/bpvqwttx.html