ios基礎篇（二十）—— UIBezierPath繪制

UIBezierPath類可以創建基於矢量的路徑，可以定義簡單的形狀，如橢圓或者矩形，或者有多個直線和曲線段組成的形狀。

一、UIBezierPath使用：

1、創建path；

2、添加路徑到path；

3、將path繪制出來；

//創建path
    path = [UIBezierPath bezierPath];
    //添加路徑
    [path moveToPoint:(CGPoint){10,50}];
    [path addLineToPoint:(CGPoint){100,50}];
    //將path繪制出來
    [path stroke];
    

二、實例

1、繪制多邊形

注意：這個類要繼承自UIView。

#import "Draw.h"

@interface Draw (){
    
UIBezierPath *path;

}

@end

- (void)drawRect:(CGRect)rect {
    
    //線條顏色
    UIColor *color = [UIColor orangeColor];
    [color set];
    
    //創建path
    path = [UIBezierPath bezierPath];
    //設置線寬
    path.lineWidth = 3;
    //線條拐角
    path.lineCapStyle = kCGLineCapRound;
    //終點處理
    path.lineJoinStyle = kCGLineJoinRound;

    [path moveToPoint:(CGPoint){100,100}];
    [path addLineToPoint:(CGPoint){200,100}];
    [path addLineToPoint:(CGPoint){250,150}];
    [path addLineToPoint:(CGPoint){200,200}];
    [path addLineToPoint:(CGPoint){100,200}];
    [path addLineToPoint:(CGPoint){50,150}];
    [path closePath];
    //根據坐標點連線
    
    [path stroke];
    
}

如果修改最后一句代碼將[path stroke]改成[path fill];

下面來看看區別，

2、繪制矩形

+ (UIBezierPath *)bezierPathWithRect:(CGRect)rect;

- (void)drawRect:(CGRect)rect {
    
    //線條顏色
    UIColor *color = [UIColor orangeColor];
    [color set];
    
    //創建path
    //rect四個值分別為（x、y、矩形長，矩形寬）
    path = [UIBezierPath bezierPathWithRect:(CGRect){10,20,100,50}];
    //設置線寬
    path.lineWidth = 3;
    //線條拐角
    path.lineCapStyle = kCGLineCapRound;
    //終點處理
    path.lineJoinStyle = kCGLineJoinRound;
    
    //根據坐標點連線
    [path stroke];
    
}

 

3、繪制圓形或橢圓形

繪制圓形或橢圓形，我們我用

+ (UIBezierPath *)bezierPathWithOvalInRect:(CGRect)rect;

這個方法根據傳入的rect矩形參數繪制一個內切曲線。

當傳入的rect是一個正方形時，繪制的圖像是一個內切圓；當傳入的rect是一個長方形時，繪制的圖像是一個內切橢圓。

- (void)drawRect:(CGRect)rect {
    
    //線條顏色
    UIColor *color = [UIColor orangeColor];
    [color set];
    
    //添加路徑
    path = [UIBezierPath bezierPathWithOvalInRect:(CGRect){50,50,100,100}];
    path.lineWidth = 3;
    //線條拐角
    path.lineCapStyle = kCGLineCapRound;
    //終點處理
    path.lineJoinStyle = kCGLineJoinRound;
    //根據坐標點連線
    [path stroke];
    
}

下面改變rect值，

path = [UIBezierPath bezierPathWithOvalInRect:(CGRect){50,50,100,50}];

 

4、繪制弧線

繪制弧線用方法:

+ (UIBezierPath *)bezierPathWithArcCenter:(CGPoint)center

　　　　　　　　　　　　　　　　　　　radius:(CGFloat)radius

　　　　　　　　　　　　　　　　　startAngle:(CGFloat)startAngle

　　　　　　　　　　　　　　　　　 endAngle:(CGFloat)endAngle

　　　　　　　　　　　　　　　　　 clockwise:(BOOL)clockwise;

 其中 Center:圓弧的中心；

　　  radius:半徑；

  startAngle:開始角度；

   endAngle:結束角度；

   clockwise:是否順時針方向；

#import "Draw.h"
//定義PI值
#define PI 3.14159265359

@interface Draw (){
    
UIBezierPath *path;

}

- (void)drawRect:(CGRect)rect {
    
    //線條顏色
    UIColor *color = [UIColor orangeColor];
    [color set];
    
    //添加路徑
    path = [UIBezierPath bezierPathWithArcCenter:(CGPoint){100,50}
                                          radius:50
                                      startAngle:0
                                        endAngle:PI*0.5
                                       clockwise:YES
            ];
    path.lineWidth = 3;
    //線條拐角
    path.lineCapStyle = kCGLineCapRound;
    //終點處理
    path.lineJoinStyle = kCGLineJoinRound;
    
    //根據坐標點連線
    [path stroke];
    
}

 

5、二次貝塞爾曲線和三次貝塞爾曲線的繪制

曲線段在當前點開始，在指定的點結束；曲線的形狀有開始點，結束點，一個或者多個控制點的切線定義。

下圖顯示了兩種曲線類型的相似，以及控制點和curve形狀的關系。

(1) 繪制二次貝塞爾曲線

方法：- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;

 

- (void)drawRect:(CGRect)rect {
    
    //線條顏色
    UIColor *color = [UIColor orangeColor];
    [color set];
    
    //添加路徑
    path = [UIBezierPath bezierPath];
            
    path.lineWidth = 3;
    //線條拐角
    path.lineCapStyle = kCGLineCapRound;
    //終點處理
    path.lineJoinStyle = kCGLineJoinRound;
                          
    [path moveToPoint:(CGPoint){20,100}];
    [path addQuadCurveToPoint:(CGPoint){100,100} controlPoint:(CGPoint){50,20}];
    
    //根據坐標點連線
    [path stroke];
    
}

 

(2) 繪制三次貝塞爾曲線

方法：- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;

 

- (void)drawRect:(CGRect)rect {
    
    //線條顏色
    UIColor *color = [UIColor orangeColor];
    [color set];
    
    //添加路徑
    path = [UIBezierPath bezierPath];
            
    path.lineWidth = 3;
    //線條拐角
    path.lineCapStyle = kCGLineCapRound;
    //終點處理
    path.lineJoinStyle = kCGLineJoinRound;
                          
    [path moveToPoint:(CGPoint){20,100}];
    [path addCurveToPoint:(CGPoint){150,70} controlPoint1:(CGPoint){70,30} controlPoint2:(CGPoint){80,120}];
    
    //根據坐標點連線
    [path stroke];
    
}