iOS-貝塞爾曲線(UIBezierPath)詳解(CAShapeLayer)

UIBezierPath是UIKit中Core Graphics框架中的一個類，使用UIBezierPath可以繪制各種簡單的圖形。

iOS-貝塞爾曲線(UIBezierPath)的基本使用
iOS-貝塞爾曲線(UIBezierPath)詳解(CAShapeLayer)
iOS-UIBezierPath動畫之果凍動畫
iOS-CGContextRef開啟上下文繪圖

我在上一篇文章中簡單介紹了一下在UIView的- (void)drawRect:(CGRect)rect方法里面繪制圖形。但是在實際使用的時候往往用的不多。本篇文章主要介紹一個關(guān)于CAShapeLayer的使用
我們會繪制一些常用的圖形，以及圖形動畫。

今天我們將UIBezierPath結(jié)合CAShapeLayer使用。
CAShapeLayer和UIView里面的drawRect方法不一樣，稍微有點麻煩，我們要先了解一些概念：
?? ?? ?? ?? ?? ??

CAShapeLayer

先簡單介紹一些CAShapeLayer：

  • CAShapeLayer繼承自CALayer，因此，它具有CALayer的所有特性。但是，CAShapeLayer需要和貝塞爾曲線配合使用才有意義。

CAShapeLayer和drawRect比較：

  • CAShapeLayer：屬于CoreAnimation框架，通過GPU來渲染圖形，不耗費性能。
  • drawRect：屬于Core Graphics框架愛，占用大量CPU，耗費性能。
CAShapeLayer屬性列表簡介
  • path : CGPathRef對象，圖像形狀的路徑
  • fillColor：CGColorRef對象，圖像填充顏色，默認黑色
  • strokeColor：邊線的顏色
  • strokeStart,strokeEnd：CGFloat類型，表示畫邊線的起點和終點，范圍是[0,1]。
  • lineWidth：邊線的寬度
  • miterLimit：描邊時使用的斜接限制。默認為10。
  • lineCap：線條終點的樣式
  • lineJoin：線條拐點的樣式
  • lineDashPhase：邊線的起始位置，表現(xiàn)是一段空白
  • lineDashPattern：這是一個數(shù)組，表示設(shè)置邊線的樣式，默認是實線，數(shù)組中的數(shù)值依次表示虛線中，單個線段長度，一段空白長度，比如：@[2,3,4,5]表示：長度為2的線，后面長度為3的空白，后面長度為4的線，，長度為5的空白，以此類推，不斷循環(huán)。

CAShapeLayer與UIBezierPath的關(guān)系

  1. 貝塞爾曲線給CAShapeLayer提供路徑，CAShapeLayer在提供的路徑中進行渲染。路徑會閉環(huán)，繪制出shape。
  2. 貝塞爾曲線可以創(chuàng)建適量路徑，UIBezierPath是一個CGPathRef的封裝
  3. 用于CAShapeLayer的貝塞爾曲線作為path，其path是一個首尾相接的閉環(huán)的曲線，即使該貝塞爾曲線不是一個閉環(huán)的曲線

也就是說：將UIBezierPath對象轉(zhuǎn)化為CGPathRef對象，賦值給CAShapeLayer的path屬性，即可畫出各種圖形。

下面我們寫幾個常用的例子：
更詳細的可以參考iOS-貝塞爾曲線(UIBezierPath)的使用(一)

折線

使用方法：

//折線
- (void)test1{
    
    // 創(chuàng)建一個路徑對象
    UIBezierPath *linePath = [UIBezierPath bezierPath];
    // 起點
    [linePath moveToPoint:CGPointMake(100, 100)];
    // 其他點
    [linePath addLineToPoint:CGPointMake(200,200)];
    [linePath addLineToPoint:CGPointMake(230,130)];
     
    // 設(shè)置路徑畫布
    CAShapeLayer *lineLayer = [CAShapeLayer layer];
    lineLayer.bounds = CGRectMake(0, 0, 300, 300);
    lineLayer.position = CGPointMake(kScreenWidth/2, kScreenWidth/2);
    lineLayer.lineWidth = 3.0;
    lineLayer.strokeColor = [UIColor redColor].CGColor; //   邊線顏色
    lineLayer.path = linePath.CGPath;
    lineLayer.fillColor = nil;   //  默認是black
    
    [self.bgView.layer addSublayer:lineLayer];
}

效果圖如下：

折線
多邊形

使用方法：


- (void)test2{
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(50, 100)];
    [path addLineToPoint:CGPointMake(150, 50)];
    [path addLineToPoint:CGPointMake(250, 100)];
    [path addLineToPoint:CGPointMake(250, 200)];
    [path addLineToPoint:CGPointMake(100, 200)];
    [path closePath]; // 最后一根線條,可以直接調(diào)此方法
      
    // 設(shè)置路徑畫布
    CAShapeLayer *lineLayer = [CAShapeLayer layer];
    lineLayer.bounds = CGRectMake(0, 0, 300, 300);
    lineLayer.position = CGPointMake(kScreenWidth/2, kScreenWidth/2);
    lineLayer.lineWidth = 3.0;
    lineLayer.strokeColor = [UIColor redColor].CGColor; //   邊線顏色
    lineLayer.path = path.CGPath;
    lineLayer.fillColor = [UIColor yellowColor].CGColor;   //  默認是black
    
    [self.bgView.layer addSublayer:lineLayer];
    
}

效果圖如下：


多邊形
圓弧

使用方法


- (void)test3{
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(200, 200) radius:100 startAngle:1.25 * M_PI endAngle:1.75 * M_PI clockwise:YES];
    [path addLineToPoint:CGPointMake(200, 200)];
    [path closePath];
   
    // 設(shè)置路徑畫布
    CAShapeLayer *lineLayer = [CAShapeLayer layer];
    lineLayer.bounds = CGRectMake(0, 0, 300, 300);
    lineLayer.position = CGPointMake(kScreenWidth/2, kScreenWidth/2);
    lineLayer.lineWidth = 3.0;
    lineLayer.strokeColor = [UIColor redColor].CGColor; //   邊線顏色
    lineLayer.path = path.CGPath;
    lineLayer.fillColor = [UIColor yellowColor].CGColor;   //  默認是black
    lineLayer.lineCap = kCALineCapRound;
    lineLayer.lineJoin = kCALineJoinRound; //線條拐角
    [self.bgView.layer addSublayer:lineLayer];
}

效果圖如下：


圓弧
小結(jié)：

大家可以看出來CAShapeLayer的使用基本和UIView里面的drawRect使用類似，首選創(chuàng)建UIBezierPath，將path賦值給CAShapeLayer即可。

所以其他的例子：園，橢圓，矩形，曲線等等，就不再一一距離了。

下面我們介紹一下mask

為已有視圖畫圓角

在項目中經(jīng)常會有切圓角的情況，我們使用masksToBounds即可，結(jié)果就會給視圖切四個圓角。
但是，當我們只需要切其中一個，或者兩個圓角的時候怎么切呢？
關(guān)鍵在于：self.testView.layer.mask = lineLayer;

使用方法如下：

    self.testView.backgroundColor = [UIColor orangeColor];
    self.testView.frame = CGRectMake(100, 100, 200, 200);
    [self.view addSubview:self.testView];

- (void)test4{
      
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:self.testView.bounds byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight cornerRadii:CGSizeMake(25, 25)];
    
    // 設(shè)置路徑畫布
    CAShapeLayer *lineLayer =  [[CAShapeLayer alloc] init];
    lineLayer.frame = self.testView.bounds;
    lineLayer.path = path.CGPath;
    
    [self.testView.layer addSublayer:lineLayer];
    self.testView.layer.mask = lineLayer;
    
}

效果如下：


切圓角
動畫

我們什么時候會用到貝塞爾曲線呢？
最常見的是走勢圖，比如：記錄最近一周的溫度變化，每年度NBA排名趨勢，等等。。。
比如：


趨勢圖

一般就是換一個折線即可。如果我們加上動畫，那就更好看了，下面我們舉個簡單的例子：
先看效果圖：


動畫圖

使用方法：

.h文件

@interface JJBezierAnimationView : UIView
- (void)setItemValues:(NSArray *)items;
@end

.m文件

#import "JJBezierAnimationView.h"
@interface JJBezierAnimationView()

@end

@implementation JJBezierAnimationView

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
         
    }
    return self;
}

- (void)setItemValues:(NSArray *)items{
    
    UIBezierPath *pAxisPath = [UIBezierPath bezierPath];
    CGFloat margin = 50;
    CGFloat w = 30;
    CGFloat h = 20;
    for (int i = 0; i < items.count; i ++) {
        NSString *str = items[i];
        CGFloat value = [str floatValue];
        CGPoint point = CGPointMake(margin + i * w, h * value+100);
        if (i == 0) {
            [pAxisPath moveToPoint:point];
        } else {
            [pAxisPath addLineToPoint:point];
        }
    }
   
    CAShapeLayer *pAxisLayer = [CAShapeLayer layer];
    pAxisLayer.lineWidth = 3;
    pAxisLayer.strokeColor = [UIColor redColor].CGColor;
    pAxisLayer.fillColor = [UIColor clearColor].CGColor;
    pAxisLayer.path = pAxisPath.CGPath;
    [self.layer addSublayer:pAxisLayer];
    
    CABasicAnimation *anmi = [CABasicAnimation animation];
    anmi.keyPath = @"strokeEnd";
    anmi.fromValue = [NSNumber numberWithFloat:0];
    anmi.toValue = [NSNumber numberWithFloat:1.0f];
    anmi.duration = 5;
    anmi.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    anmi.autoreverses = NO;
    [pAxisLayer addAnimation:anmi forKey:@"stroke"];      
}
@end

調(diào)用方法：

    JJBezierAnimationView *bezierView = [[JJBezierAnimationView alloc] init];
    [bezierView setItemValues:@[@"1",@"4",@"3",@"2",@"8",@"6",@"2",@"8",@"5",@"7",@"4",@"6"]];
    [self.bgView addSubview:bezierView];
總結(jié)

本文簡單介紹了CAShapeLayer的使用。
iOS-貝塞爾曲線(UIBezierPath)的基本使用和本篇文章介紹的都是很基礎(chǔ)的使用，后面我們做一些小demo。

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

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

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