使用UIBezierPath繪制圖形

當需要畫圖時我們一般創建一個UIView子類， 重寫其中的drawRect方法

再drawRect方法中利用UIBezierPath添加畫圖

 

UIBezierPath的使用方法：

（1）創建一個Bezier path對象。

（2）使用方法moveToPoint:去設置初始線段的起點。

（3）添加line或者curve去定義一個或者多個subpaths。

（4）改變UIBezierPath對象跟繪圖相關的屬性。

我們可以設置stroked path的屬性lineWidth和lineJoinStyle。也可以設置filled path的屬性usesEvenOddFillRule

 

我們直接上demo， 創建一個BezierView繼承自UIView並重寫drawRect方法

#import "BezierView.h"

@implementation BezierView


- (void)drawRect:(CGRect)rect {
    // Drawing code

    //設置線條顏色
    UIColor *color = [UIColor redColor];
    [color set];
    
    //創建UIBezierPath
    UIBezierPath *apath = ({
    
        UIBezierPath *path = [UIBezierPath bezierPath];
        path.lineWidth     = 5.0f;              //設置線條寬度
        path.lineCapStyle  = kCGLineCapRound;   //設置拐角
        path.lineJoinStyle = kCGLineCapRound;  //終點處理
        //設置起始點
        [path moveToPoint:CGPointMake(100, 0)];
        
        //增加線條
        [path addLineToPoint:CGPointMake(200, 40)];
        [path addLineToPoint:CGPointMake(160, 140)];
        [path addLineToPoint:CGPointMake(40, 140)];
        [path addLineToPoint:CGPointMake(0, 40)];
        
        //關閉路徑
        [path closePath];
        
        path;
    });
    
    //根據坐標連線
    [apath stroke];
}

然后把自定義的View添加到Controller中

#import "ViewController.h"
#import "BezierView.h"

#define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width
#define SCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    
    [super viewDidLoad];
    
    BezierView *beView     = [[BezierView alloc] initWithFrame:\
                                CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];
    
    beView.backgroundColor = [UIColor whiteColor];
    
    [self.view addSubview:beView];
    
}

@end

運行結果能看到一個多邊形

如果把drawRect中最后一句話改為[apath fill];運行結果就是實心圖

我們可以用UIBezierPath的bezierPathWithRect:CGRect(rect)方法來畫矩形， 代碼如下

- (void)drawRect:(CGRect)rect {
    // Drawing code

    //設置線條顏色
    UIColor *color = [UIColor redColor];
    [color set];
    
    //創建UIBezierPath
    UIBezierPath *apath = [UIBezierPath bezierPathWithRect:CGRectMake(10, 40, 200, 100)];
    
    //更具坐標連線
    [apath fill];
}

運行結果：

 

我們可以用UIBezierPath的bezierPathWithOvallInRect:CGRect(rect)方法來畫圓形和橢圓， 代碼如下

- (void)drawRect:(CGRect)rect {
    // Drawing code

    //設置線條顏色
    UIColor *color = [UIColor redColor];
    [color set];
    
    //創建UIBezierPath
    UIBezierPath *apath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10, 40, 200, 100)];
    apath.lineWidth     = 5.0f;
    apath.lineCapStyle  = kCGLineCapRound;
    apath.lineJoinStyle = kCGLineCapRound;
    
    //更具坐標連線
    [apath stroke];
}

運行結果：

用下面這個方法畫帶指定遠角的矩形

+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;

上代碼：

- (void)drawRect:(CGRect)rect {
    // Drawing code

    //設置線條顏色
    UIColor *color = [UIColor redColor];
    [color set];
    
    //創建UIBezierPath
    UIBezierPath *apath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 40, 200, 100)
                                                byRoundingCorners:UIRectCornerTopLeft
                                                      cornerRadii:CGSizeMake(100, 100)];
    apath.lineWidth     = 5.0f;
    apath.lineCapStyle  = kCGLineCapRound;
    apath.lineJoinStyle = kCGLineCapRound;
    
    //更具坐標連線
    [apath stroke];
}

運行結果：

如果要設置多個圓角的話就給byRoundingCorners多設置幾個角度， 角度可選如下

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

例如：

UIBezierPath *apath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 40, 200, 100)
                                                byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight
                                                      cornerRadii:CGSizeMake(100, 100)];

就有兩個圓角

 

也可以用下面這個方法畫圓弧

+ (instancetype)bezierPathWithArcCenter:(CGPoint)center　　　　//圓心坐標

　　　　　　　　　　　　　　　　　　radius:(CGFloat)radius　　　　//半徑

　　　　　　　　　　　　　　　　startAngle:(CGFloat)startAngle　　//弧形開始的角度

　　　　　　　　　　　　　　　　 endAngle:(CGFloat)endAngle　　  //弧形結束的角度

　　　　　　　　　　　　　　　　 clockwise:(BOOL)clockwise;         //正向還是反向畫弧

上代碼：

- (void)drawRect:(CGRect)rect {
    // Drawing code

    //設置線條顏色
    UIColor *color = [UIColor redColor];
    [color set];
    
    //創建UIBezierPath
    UIBezierPath *apath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 200)
                                                         radius:100 startAngle:M_PI / 2
                                                       endAngle:M_PI
                                                      clockwise:YES];
    apath.lineWidth     = 5.0f;
    apath.lineCapStyle  = kCGLineCapRound;
    apath.lineJoinStyle = kCGLineCapRound;
    
    //更具坐標連線
    [apath stroke];
}

運行結果如下

  

還可以直接在path中添加圓形段

[path addArcWithCenter:CGPointMake(100, 200)
                        radius:100 startAngle:M_PI / 2
                      endAngle:M_PI clockwise:YES];

 

最后附上UIBezierPath畫圓弧時段坐標系

另外UIBezierPath可以畫貝賽爾曲線

 

下面是添加二次貝賽爾曲線的方法

- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;

 上代碼：

- (void)drawRect:(CGRect)rect {
    // Drawing code

    //設置線條顏色
    UIColor *color = [UIColor redColor];
    [color set];
    
    //創建UIBezierPath
    UIBezierPath *apath = ({
    
        UIBezierPath *path = [UIBezierPath bezierPath];
        path.lineWidth     = 2.0f;              //設置線條寬度
        //path.lineCapStyle = kCGLineCapRound;   //設置拐角
        
        //繪制二次貝賽爾曲線
        
        //設置起始點
        [path moveToPoint:CGPointMake(100, 300)];
        
        //設置EndPoint & Control Point
        [path addQuadCurveToPoint:CGPointMake(300, 300) controlPoint:CGPointMake(100, 10)];
        
        path;
    });

    
    //更具坐標連線
    [apath stroke];
}

運行結果為：

可以參照下面這張圖看看每個點的定義

三次貝賽爾曲線會有2個控制點

 

上代碼：

- (void)drawRect:(CGRect)rect {
    // Drawing code

    //設置線條顏色
    UIColor *color = [UIColor redColor];
    [color set];
    
    //創建UIBezierPath
    UIBezierPath *apath = ({
    
        UIBezierPath *path = [UIBezierPath bezierPath];
        path.lineWidth     = 2.0f;              //設置線條寬度
        
        //繪制三次貝賽爾曲線
        
        //設置起始點
        [path moveToPoint:CGPointMake(100, 300)];
        
        //設置EndPoint & Control Point
        [path addCurveToPoint:CGPointMake(300, 200)
                controlPoint1:CGPointMake(200, 80)
                controlPoint2:CGPointMake(220, 500)];
        
        path;
    });

    
    //更具坐標連線
    [apath stroke];
}

運行結果：