iOS 之UIBezierPath

在之前的文章中，由于用到過UIBezierPath這個(gè)類，所以這里就對(duì)這個(gè)類進(jìn)行簡(jiǎn)單的記錄一下，方便自己也方便他人。

使用UIBezierPath類可以創(chuàng)建基于矢量的路徑，這個(gè)類在UIKit中。它是基于Core Graphics對(duì)CGPathRef數(shù)據(jù)類型和path繪圖屬性的一個(gè)封裝，所以是需要圖形上下文的CGContextRef，所以一般UIBezierPath在drawRect中使用。使用此類可以定義簡(jiǎn)單的形狀，如橢圓或者矩形，或者有多個(gè)直線和曲線段組成的形狀.下面就簡(jiǎn)單介紹以下。

UIBezierPath常用方法及屬性
屬性

1.CGPath :
將UIBezierPath類轉(zhuǎn)換成CGPath，和UIColor的CGColor類似

2.currentPoint：
當(dāng)前path的位置，可以理解為path的終點(diǎn)

3.lineWidth：
可以理解為路徑的寬度

4.lineCapStyle：
path端點(diǎn)樣式，有3種樣式

typedef CF_ENUM(int32_t, CGLineCap) {
    kCGLineCapButt,//無端點(diǎn)
    kCGLineCapRound,//圓形端點(diǎn)
    kCGLineCapSquare//和無端點(diǎn)差不多，但是要長一點(diǎn)
};

見下圖 分別為三種方式

1.png

5.lineJoinStyle：
path拐角樣式，也有3種樣式

typedef CF_ENUM(int32_t, CGLineJoin) {
    kCGLineJoinMiter,//尖角
    kCGLineJoinRound,//圓角
    kCGLineJoinBevel//切角
};

效果如下

2.png

6.miterLimit：
最大斜接長度，怎么理解呢？就是上圖中拐角處外面尖角和內(nèi)部尖角的距離。但是這個(gè)只有在kCGLineJoinMiter情況下使用才有效果，如果這個(gè)miterLimit小于斜接長度，就成為了kCGLineJoinBevel類型
我測(cè)試的代碼為

        //斷點(diǎn)樣式
        switch (i) {
            case 0:
            {
                //尖角
                path.lineJoinStyle = kCGLineJoinMiter;
                //這里設(shè)為1 因?yàn)樾苯娱L度超過了1 所以就自動(dòng)轉(zhuǎn)化為了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//全部
};

這個(gè)情況我會(huì)在后面的方法中運(yùn)用展示出效果

方法
//在rect內(nèi)創(chuàng)建矩形
+ (instancetype)bezierPathWithRect:(CGRect)rect;
//畫矩形
- (void)gl_bezierPathWithRect:(CGRect)rect
{
    UIColor *color = [UIColor redColor];
    [color set]; //設(shè)置線條顏色
    
    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
//創(chuàng)建在rect內(nèi)的內(nèi)切曲線
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;

//在rect內(nèi)創(chuàng)建內(nèi)切的曲線
- (void)gl_bezierPathWithOvalInRect:(CGRect)rect
{
    UIColor *color = [UIColor redColor];
    [color set]; //設(shè)置線條顏色
    
    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
//創(chuàng)建帶有圓角的矩形，cornerRadius為圓角，如果矩形為正方形切cornerRadius大于正方形的邊長的一半時(shí)，cornerRadius就不再有效果，矩形就成為圓形
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius;

//創(chuàng)建帶有圓角的矩形
- (void)gl_bezierPathWithRoundedRect:(CGRect)rect
{
    UIColor *color = [UIColor redColor];
    [color set]; //設(shè)置線條顏色
    
    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
//創(chuàng)建特定的角為圓角的矩形  corners 分別對(duì)應(yīng)上面屬性中的類型，cornerRadii圓角的大小，已size中最大的為準(zhǔn)，如果超過其鄰近最短邊的一半，則已最短邊一半為準(zhǔn)
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii

//創(chuàng)建有特點(diǎn)圓角的矩形 可以分別設(shè)四個(gè)角
- (void)gl_speical_bezierPathWithRoundedRect:(CGRect)rect
{
    UIColor *color = [UIColor redColor];
    [color set]; //設(shè)置線條顏色
    
    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
//創(chuàng)建圓弧  center圓心  radius  半徑    startAngle 起始位置  endAngle終點(diǎn) clockwise 是否順時(shí)針
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;
//由于此方法和下面方法效果一樣所以就用其中一個(gè)進(jìn)行效果展示
- (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;
    
    //以下參數(shù)分別為圓弧的中心坐標(biāo)  半徑 起點(diǎn)  終點(diǎn) 是否順時(shí)針
    [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

使用該方法的時(shí)候，弧度可以參考下面的圖片

11.png

在上述方法中，我們都用的是[path stroke]這個(gè)方法，查看API會(huì)發(fā)現(xiàn)還有一個(gè)方法fill，那么這兩個(gè)方法有什么區(qū)別呢？我這里就以上面的添加圓弧方法為例進(jìn)行修改，其效果為下：

7.png

由此可見，fill方法應(yīng)該是填充的意思

//移動(dòng)到某個(gè)位置 一般和其他方法配合使用
- (void)moveToPoint:(CGPoint)point;

//繪制一條線
- (void)addLineToPoint:(CGPoint)point

//下面是將方法6 和 方法7一起使用畫出本文第一張圖的代碼
//畫線條
- (void)gl_drawLine
{
    //顏色設(shè)置
    [[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)];
        //斷點(diǎn)樣式
        switch (i) {
            case 0:
            {
                //無端點(diǎn)
                path.lineCapStyle = kCGLineCapButt;
            }
                break;
            case 1:
            {
                //圓形端點(diǎn)
                path.lineCapStyle = kCGLineCapRound;
            }
                break;
            case 2:
            {
                //方形端點(diǎn) 和無端點(diǎn)差不多 但是要長一點(diǎn)點(diǎn)
                path.lineCapStyle = kCGLineCapSquare;
            }
                break;
            default:
                break;
        }
        
        [path stroke];
    }
}

8

//創(chuàng)建三次貝塞爾曲線
//endPoint 終點(diǎn)坐標(biāo)   controlPoint1 控制坐標(biāo)1   controlPoint2 控制坐標(biāo)2
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2

//創(chuàng)建三次貝塞爾曲線
- (void)gl_drawThreeBezier
{
    [[UIColor redColor]set];
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    path.lineWidth = 3.0;
    //起點(diǎn)坐標(biāo)
    [path moveToPoint:CGPointMake(10, 140)];
    //下面三個(gè)點(diǎn)分別為 終點(diǎn)坐標(biāo)  控制坐標(biāo)1 控制坐標(biāo)2
    [path addCurveToPoint:CGPointMake(190, 100) controlPoint1:CGPointMake(100, 50) controlPoint2:CGPointMake(130, 190)];
    [path stroke];
}

效果圖如下

6.png

參考圖如下

12.png
//創(chuàng)建二次貝塞爾曲線  endPoint 終點(diǎn)  控制坐標(biāo)
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint

//創(chuàng)建二次貝塞爾曲線
- (void)gl_drawBezier
{
    [[UIColor redColor]set];
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    path.lineWidth = 3.0;
    //起點(diǎn)坐標(biāo)
    [path moveToPoint:CGPointMake(10, 140)];
    //下面三個(gè)點(diǎn)分別為 終點(diǎn)坐標(biāo)  控制坐標(biāo)
    [path addQuadCurveToPoint:CGPointMake(190, 100) controlPoint:CGPointMake(100, 50)];
    
    [path stroke];
}

效果如下

5.png

參考圖如下


13.png
//將路徑閉合，即將起點(diǎn)和終點(diǎn)連起
- (void)closePath;

//清空所有路徑
- (void)removeAllPoints;

//顧名思義  應(yīng)該是追加路徑的意思
- (void)appendPath:(UIBezierPath *)bezierPath

//繪制虛線
- (void)setLineDash:(nullable const CGFloat *)pattern count:(NSInteger)count phase:(CGFloat)phase;
//pattern 線段數(shù)組 如：CGFloat dash[] = {1,1}; 代表實(shí)線和空白交替的長度 及先繪制1個(gè)長度再空1個(gè)，再繪制一個(gè).....
//count數(shù)組長度 count值小于數(shù)組實(shí)際長度時(shí)，方法就會(huì)對(duì)相應(yīng)長度的數(shù)組元素進(jìn)行循環(huán)，而大于的時(shí)候 會(huì)有警告，沒有效果
//phase 循環(huán)數(shù)組時(shí)跳過的長度，如pattern為{2,6}，phase為1，則第一個(gè)元素畫1的時(shí)候就跳過直接畫6 

//在上面畫線的方法中，添加以下代碼 
        CGFloat dash[] = {2,6};
        
        [path setLineDash:dash count:2 phase:1];

效果最終如下

14.png

下面附上Demo

所有方法可以在下面這個(gè)地方進(jìn)行使用，需要用就打開，不用就屏蔽

//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];
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容