iOS 之UIBezierPath

立即下载用AI写一个

发布时间：2017-09-06

6人 | 浏览：7055次 | 收藏 |

技术：ios

运行环境：ios8+

概述

使用UIBezierPath类可以创建基于矢量的路径，这个类在UIKit中。使用此类可以定义简单的形状，如椭圆或者矩形，或者有多个直线和曲线段组成的形状

详细

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

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

#####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](/contentImages/image/jianshu/2525768-2a2d52da2a5a15b8.png)

5.`lineJoinStyle：`
path拐角样式，也有3种样式
```
typedef CF_ENUM(int32_t, CGLineJoin) {
    kCGLineJoinMiter,//尖角
    kCGLineJoinRound,//圆角
    kCGLineJoinBevel//切角
};
```
效果如下

![2.png](/contentImages/image/jianshu/2525768-ec3a40f7b6c09b32.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//全部
};
```
这个情况我会在后面的方法中运用展示出效果
######方法

1.
```
//在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](/contentImages/image/jianshu/2525768-3467cecc953ee90c.png)

2.
```
//创建在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](/contentImages/image/jianshu/2525768-032a909750a767bd.png)
3.
```
//创建带有圆角的矩形，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](/contentImages/image/jianshu/2525768-51aa5c41009e30f3.png)

4.
```
//创建特定的角为圆角的矩形  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](/contentImages/image/jianshu/2525768-b1809c0c478101e8.png)

5.
```
//创建圆弧  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](/contentImages/image/jianshu/2525768-73aabee652f7b1c2.png)

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

![11.png](/contentImages/image/jianshu/2525768-3e8022691f3b596f.png)

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

![7.png](/contentImages/image/jianshu/2525768-91407d810bf2e0ec.png)
由此可见，`fill`方法应该是填充的意思
6.
```
//移动到某个位置 一般和其他方法配合使用
- (void)moveToPoint:(CGPoint)point;
```

7.
```
//绘制一条线
- (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](/contentImages/image/jianshu/2525768-a596fd8ad81a4b5f.png)

参考图如下

![12.png](/contentImages/image/jianshu/2525768-332ff79940296a3d.png)

9.
```
//创建二次贝塞尔曲线  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](/contentImages/image/jianshu/2525768-b17933a52b1da722.png)
参考图如下
![13.png](/contentImages/image/jianshu/2525768-bf0d944a9aeef0c6.png)

10.
```
//将路径闭合，即将起点和终点连起
- (void)closePath;
```
11.
```
//清空所有路径
- (void)removeAllPoints;
```
12.
```
//顾名思义  应该是追加路径的意思
- (void)appendPath:(UIBezierPath *)bezierPath
```
13.
```
//绘制虚线
- (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](/contentImages/image/jianshu/2525768-08fcecf40855a304.png)

所有方法可以在下面这个地方进行使用，需要用就打开，不用就屏蔽
```
//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];
}
```
#####项目文件截图：
![](/contentImages/image/20170906/XUENcCFd5TswfxidYOE.jpg)

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

iOS 之UIBezierPath

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子