簡(jiǎn)介

UIBezierPath是對(duì)Core Graphics框架的一個(gè)封裝，使用UIBezierPath類(lèi)我們可以畫(huà)出圓形（弧線(xiàn)）或者多邊形（比如：矩形）等形狀，所以在畫(huà)復(fù)雜圖形的時(shí)候會(huì)經(jīng)常用到。

分析

首先我們先看一下，UIBezierPath有哪些重要的屬性：
1、 [color set]設(shè)置顏色，color為創(chuàng)建的UIColor對(duì)象
2、 [path stroke]填充view的線(xiàn)條的顏色，與[color set]配合使用 ，
3、 [path fill]填充整個(gè)view內(nèi)部的顏色，與[color set]配合使用。
4、 path.lineWidth = 5.0; 這個(gè)很好理解了，就是劃線(xiàn)的寬度
5、 path.lineCapStyle 這個(gè)線(xiàn)段起點(diǎn)是終點(diǎn)的樣式，這個(gè)樣式有三種：

• kCGLineCapButt

• kCGLineCapRound
• kCGLineCapSquare

6、 path.lineJoinStyle 這個(gè)屬性是用來(lái)設(shè)置兩條線(xiàn)連結(jié)點(diǎn)的樣式，同樣它也有三種樣式供我們選擇

• kCGLineJoinMiter 直接連接

• kCGLineJoinRound 圓滑銜接
• kCGLineJoinBevel 斜角連接

使用

接下來(lái)，我們就看一下UIBezierPath到底應(yīng)該怎么使用：
首先，我們先自定義一個(gè)UIView的子類(lèi)，然后重寫(xiě)- (void)drawRect:(CGRect)rect 方法，將創(chuàng)建圖形的方法寫(xiě)到該方法中，下面是一些簡(jiǎn)單的示例：

畫(huà)多邊形

    UIBezierPath* aPath = [UIBezierPath bezierPath];
    aPath.lineWidth = 15.0;
    /*
     kCGLineCapButt,
     kCGLineCapRound,
     kCGLineCapSquare
     */
    aPath.lineCapStyle = kCGLineCapButt ; //終點(diǎn)(起點(diǎn))樣式
    /*
     kCGLineJoinMiter,
     kCGLineJoinRound,
     kCGLineJoinBevel
     */
    aPath.lineJoinStyle = kCGLineJoinBevel; //拐點(diǎn)樣式
    
    [aPath moveToPoint:CGPointMake(150, 30)];//設(shè)置起始點(diǎn)
    [aPath addLineToPoint:CGPointMake(250, 70)];//途經(jīng)點(diǎn)
    [aPath addLineToPoint:CGPointMake(210, 170)];//途經(jīng)點(diǎn)
    [aPath addLineToPoint:CGPointMake(90, 170)];//途經(jīng)點(diǎn)
    [aPath addLineToPoint:CGPointMake(50, 70)];//途經(jīng)點(diǎn)
    
    [aPath closePath];//通過(guò)調(diào)用closePath方法得到最后一條線(xiàn)
    
    UIColor *strokeColor = [UIColor redColor];
    [strokeColor set];
    [aPath stroke];//設(shè)置線(xiàn)條顏色
    UIColor *fillColor = [UIColor blueColor];
    [fillColor set];
    [aPath fill];//填充

多邊形.png

如果是創(chuàng)建四邊形可直接使用：

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

畫(huà)圓

    UIBezierPath *aPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 200, 100)];
    aPath.lineWidth = 5.0;
    aPath.lineCapStyle = kCGLineCapRound; //線(xiàn)條拐角
    aPath.lineJoinStyle = kCGLineCapRound; //終點(diǎn)處理
    UIColor *color = [UIColor redColor];
    [color set];
    [aPath stroke];

弧形.png

如果要畫(huà)正圓，將rect的width和height設(shè)置為相等的值即可。

畫(huà)弧形

    /*
     ArcCenter: 原點(diǎn)
     radius: 半徑
     startAngle: 開(kāi)始角度
     endAngle: 結(jié)束角度
     clockwise: 是否是順時(shí)針?lè)较?     */
    UIBezierPath* aPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(200, 300)
                                                         radius:80
                                                     startAngle:0
                                                    endAngle:pi
                                                      clockwise:NO];
    aPath.lineWidth = 5.0;
    aPath.lineCapStyle = kCGLineCapRound; //線(xiàn)條拐角
    aPath.lineJoinStyle = kCGLineCapRound; //終點(diǎn)處理
    
    UIColor *color = [UIColor redColor];
    [color set]; //設(shè)置線(xiàn)條顏色
    [aPath stroke];

圓形.png

畫(huà)二次曲線(xiàn)

    UIBezierPath* aPath = [UIBezierPath bezierPath];
    aPath.lineWidth = 5.0;
    aPath.lineCapStyle = kCGLineCapRound; //線(xiàn)條拐角
    aPath.lineJoinStyle = kCGLineCapRound; //終點(diǎn)處理
    [aPath moveToPoint:CGPointMake(100, 100)];//設(shè)置初始點(diǎn)
    //終點(diǎn)  controlPoint:切點(diǎn)（并不是拐彎處的高度，不懂的同學(xué)可以去看三角函數(shù)）
    [aPath addQuadCurveToPoint:CGPointMake(200, 100) controlPoint:CGPointMake(150, 50)];
    
    UIColor *color = [UIColor redColor];
    [color set];
    [aPath stroke];

二次曲線(xiàn).png

畫(huà)三次曲線(xiàn)

    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)];//兩個(gè)切點(diǎn)
    UIColor *color = [UIColor redColor];
    [color set];
    [path2 stroke];

三次曲線(xiàn).png

以上便是iOS中UIBezierPath最基本的使用方法了，在平時(shí)的開(kāi)發(fā)中，我們經(jīng)常將UIBezierPath與CALayer配合使用，下面是一個(gè)簡(jiǎn)單的例子：

    //創(chuàng)建CAShapeLayer對(duì)象
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.frame = CGRectMake(100, 100, 200, 200);//設(shè)置shapeLayer的尺寸和位置
    shapeLayer.fillColor = [UIColor clearColor].CGColor;//填充顏色為ClearColor
    //設(shè)置線(xiàn)條的寬度和顏色
    shapeLayer.lineWidth = 1.0f;
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    //創(chuàng)建一個(gè)圓形貝塞爾曲線(xiàn)
    UIBezierPath *aPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 200)];
    //將貝塞爾曲線(xiàn)設(shè)置為CAShapeLayer的path
    shapeLayer.path = aPath.CGPath;
    //將shapeLayer添加到視圖的layer上
    [self.view.layer addSublayer:shapeLayer];

shapeLayer.png

總結(jié)：

到此為止，關(guān)于UIBezierPath最基本的使用就介紹完了，但是關(guān)于UIBezierPath在iOS中還有很多更加神奇的應(yīng)用，有興趣的同學(xué)可以研究一下。