美文网首页iOS技术点UIiOS 开发每天分享优质文章
iOS贝塞尔曲线(UIBezierPath)的基本使用方法

iOS贝塞尔曲线(UIBezierPath)的基本使用方法

作者: 沐泽sunshine | 来源:发表于2017-05-04 16:14 被阅读2597次

简介

UIBezierPath是对Core Graphics框架的一个封装,使用UIBezierPath类我们可以画出圆形(弧线)或者多边形(比如:矩形)等形状,所以在画复杂图形的时候会经常用到。

分析

首先我们先看一下,UIBezierPath有哪些重要的属性:
1、 [color set]设置颜色,color为创建的UIColor对象
2、 [path stroke]填充view的线条的颜色,与[color set]配合使用 ,
3、 [path fill]填充整个view内部的颜色,与[color set]配合使用。
4、 path.lineWidth = 5.0; 这个很好理解了,就是划线的宽度
5、 path.lineCapStyle 这个线段起点是终点的样式,这个样式有三种:

  • kCGLineCapButt
  • kCGLineCapRound
  • kCGLineCapSquare

6、 path.lineJoinStyle 这个属性是用来设置两条线连结点的样式,同样它也有三种样式供我们选择

  • kCGLineJoinMiter 直接连接
  • kCGLineJoinRound 圆滑衔接
  • kCGLineJoinBevel 斜角连接

使用

接下来,我们就看一下UIBezierPath到底应该怎么使用:
首先,我们先自定义一个UIView的子类,然后重写- (void)drawRect:(CGRect)rect 方法,将创建图形的方法写到该方法中,下面是一些简单的示例:

画多边形
    UIBezierPath* aPath = [UIBezierPath bezierPath];
    aPath.lineWidth = 15.0;
    /*
     kCGLineCapButt,
     kCGLineCapRound,
     kCGLineCapSquare
     */
    aPath.lineCapStyle = kCGLineCapButt ; //终点(起点)样式
    /*
     kCGLineJoinMiter,
     kCGLineJoinRound,
     kCGLineJoinBevel
     */
    aPath.lineJoinStyle = kCGLineJoinBevel; //拐点样式
    
    [aPath moveToPoint:CGPointMake(150, 30)];//设置起始点
    [aPath addLineToPoint:CGPointMake(250, 70)];//途经点
    [aPath addLineToPoint:CGPointMake(210, 170)];//途经点
    [aPath addLineToPoint:CGPointMake(90, 170)];//途经点
    [aPath addLineToPoint:CGPointMake(50, 70)];//途经点
    
    [aPath closePath];//通过调用closePath方法得到最后一条线
    
    UIColor *strokeColor = [UIColor redColor];
    [strokeColor set];
    [aPath stroke];//设置线条颜色
    UIColor *fillColor = [UIColor blueColor];
    [fillColor set];
    [aPath fill];//填充
多边形.png

如果是创建四边形可直接使用:

    UIBezierPath* aPath = [UIBezierPath bezierPathWithRect:CGRectMake(100, 100, 100, 100)];

画圆
    UIBezierPath *aPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 200, 100)];
    aPath.lineWidth = 5.0;
    aPath.lineCapStyle = kCGLineCapRound; //线条拐角
    aPath.lineJoinStyle = kCGLineCapRound; //终点处理
    UIColor *color = [UIColor redColor];
    [color set];
    [aPath stroke];
弧形.png

如果要画正圆,将rect的width和height设置为相等的值即可。

画弧形
    /*
     ArcCenter: 原点
     radius: 半径
     startAngle: 开始角度
     endAngle: 结束角度
     clockwise: 是否是顺时针方向
     */
    UIBezierPath* aPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(200, 300)
                                                         radius:80
                                                     startAngle:0
                                                    endAngle:pi
                                                      clockwise:NO];
    aPath.lineWidth = 5.0;
    aPath.lineCapStyle = kCGLineCapRound; //线条拐角
    aPath.lineJoinStyle = kCGLineCapRound; //终点处理
    
    UIColor *color = [UIColor redColor];
    [color set]; //设置线条颜色
    [aPath stroke];
圆形.png
画二次曲线
    UIBezierPath* aPath = [UIBezierPath bezierPath];
    aPath.lineWidth = 5.0;
    aPath.lineCapStyle = kCGLineCapRound; //线条拐角
    aPath.lineJoinStyle = kCGLineCapRound; //终点处理
    [aPath moveToPoint:CGPointMake(100, 100)];//设置初始点
    //终点  controlPoint:切点(并不是拐弯处的高度,不懂的同学可以去看三角函数)
    [aPath addQuadCurveToPoint:CGPointMake(200, 100) controlPoint:CGPointMake(150, 50)];
    
    UIColor *color = [UIColor redColor];
    [color set];
    [aPath stroke];
二次曲线.png
画三次曲线
    UIBezierPath *path2 = [UIBezierPath bezierPath];
    path2.lineWidth = 5.0;
    path2.lineCapStyle = kCGLineCapRound;
    path2.lineJoinStyle = kCGLineJoinRound;
    [path2 moveToPoint:CGPointMake(0, 100)];
    [path2 addCurveToPoint:CGPointMake(100, 100) controlPoint1:CGPointMake(25, 50) controlPoint2:CGPointMake(75, 150)];//两个切点
    UIColor *color = [UIColor redColor];
    [color set];
    [path2 stroke];

三次曲线.png

以上便是iOS中UIBezierPath最基本的使用方法了,在平时的开发中,我们经常将UIBezierPath与CALayer配合使用,下面是一个简单的例子:

    //创建CAShapeLayer对象
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.frame = CGRectMake(100, 100, 200, 200);//设置shapeLayer的尺寸和位置
    shapeLayer.fillColor = [UIColor clearColor].CGColor;//填充颜色为ClearColor
    //设置线条的宽度和颜色
    shapeLayer.lineWidth = 1.0f;
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    //创建一个圆形贝塞尔曲线
    UIBezierPath *aPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 200)];
    //将贝塞尔曲线设置为CAShapeLayer的path
    shapeLayer.path = aPath.CGPath;
    //将shapeLayer添加到视图的layer上
    [self.view.layer addSublayer:shapeLayer];
shapeLayer.png

总结:

到此为止,关于UIBezierPath最基本的使用就介绍完了,但是关于UIBezierPath在iOS中还有很多更加神奇的应用,有兴趣的同学可以研究一下。

相关文章

网友评论

  • 874b526fa570:贝塞尔 usesEvenOddFillRule 这个属性 我现在想验证 = NO 的情况下 是什么样式 帮看看 这么写为啥无法验证
    -(void)test10
    {
    UIBezierPath *path = [UIBezierPath bezierPath];
    path.usesEvenOddFillRule = NO;
    [path moveToPoint:CGPointMake(300, 300)];
    [path addArcWithCenter:CGPointMake(200, 300) radius:100 startAngle:0 endAngle:M_PI * 2 clockwise:NO];
    [path moveToPoint:CGPointMake(250, 300)];
    [path addArcWithCenter:CGPointMake(200, 300) radius:50 startAngle:0 endAngle:M_PI * 2 clockwise:YES];
    [[UIColor redColor]set];
    [path fill];
    }
    沐泽sunshine:不好意思,这几天一直在忙,没有看到你的问题。。。你多画几个圆,就能看出效果来了

本文标题:iOS贝塞尔曲线(UIBezierPath)的基本使用方法

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