iOS關於CAShapeLayer與UIBezierPath的知識內容

使用CAShapeLayer與UIBezierPath可以實現不在view的drawRect方法中就畫出一些想要的圖形 。

1：UIBezierPath： UIBezierPath是在 UIKit 中的一個類，繼承於NSObject,可以創建基於矢量的路徑.此類是Core Graphics框架關於path的一個OC封裝。使用此類可以定義常見的圓形、多邊形等形狀 。我們使用直線、弧（arc）來創建復雜的曲線形狀。每一個直線段或者曲線段的結束的地方是下一個的開始的地方。每一個連接的直線或者曲線段的集合成為subpath。一個UIBezierPath對象定義一個完整的路徑包括一個或者多個subpaths。

2：CAShapeLayer： CAShapeLayer顧名思義，繼承於CALayer。 每個CAShapeLayer對象都代表着將要被渲染到屏幕上的一個任意的形狀(shape)。具體的形狀由其path(類型為CGPathRef)屬性指定。 普通的CALayer是矩形，所以需要frame屬性。CAShapeLayer初始化時也需要指定frame值，但 它本身沒有形狀，它的形狀來源於其屬性path 。CAShapeLayer有不同於CALayer的屬性，它從CALayer繼承而來的屬性在繪制時是不起作用的。

實例1：畫一個圓形

- (void)viewDidLoad {
    [super viewDidLoad];
     
    //創建出CAShapeLayer
    self.shapeLayer = [CAShapeLayer layer];
    self.shapeLayer.frame = CGRectMake(0, 0, 200, 200);//設置shapeLayer的尺寸和位置
    self.shapeLayer.position = self.view.center;
    self.shapeLayer.fillColor = [UIColor clearColor].CGColor;//填充顏色為ClearColor
     
    //設置線條的寬度和顏色
    self.shapeLayer.lineWidth = 1.0f;
    self.shapeLayer.strokeColor = [UIColor redColor].CGColor;
     
    //創建出圓形貝塞爾曲線
    UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 200)];
     
    //讓貝塞爾曲線與CAShapeLayer產生聯系
    self.shapeLayer.path = circlePath.CGPath;
     
    //添加並顯示
    [self.view.layer addSublayer:self.shapeLayer];
}

現在我們要用到CAShapeLayer的兩個參數，strokeEnd和strokeStart

Stroke:用筆畫的意思

在這里就是起始筆和結束筆的位置

Stroke為1的話就是一整圈，0.5就是半圈，0.25就是1/4圈。以此類推

如果我們把起點設為0，終點設為0.75

//設置stroke起始點

self.shapeLayer.strokeStart = 0;

self.shapeLayer.strokeEnd = 0.75;

 

實例2：畫兩個圓，其中一個圓表示進度

//畫兩個圓形
-(void)createBezierPath:(CGRect)mybound
{
    //外圓
    _trackPath = [UIBezierPath bezierPathWithArcCenter:self.view.center radius:(mybound.size.width - 0.7)/ 2 startAngle:0 endAngle:M_PI * 2 clockwise:YES];;
    
    _trackLayer = [CAShapeLayer new];
    [self.view.layer addSublayer:_trackLayer];
    _trackLayer.fillColor = nil;
    _trackLayer.strokeColor=[UIColor grayColor].CGColor;
    _trackLayer.path = _trackPath.CGPath;
    _trackLayer.lineWidth=5;
    _trackLayer.frame = mybound;
    
    //內圓
    _progressPath = [UIBezierPath bezierPathWithArcCenter:self.view.center radius:(mybound.size.width - 0.7)/ 2 startAngle:- M_PI_2 endAngle:(M_PI * 2) * 0.7 - M_PI_2 clockwise:YES];
    
    _progressLayer = [CAShapeLayer new];
    [self.view.layer addSublayer:_progressLayer];
    _progressLayer.fillColor = nil;
    _progressLayer.strokeColor=[UIColor redColor].CGColor;
    _progressLayer.lineCap = kCALineCapRound;
    _progressLayer.path = _progressPath.CGPath;
    _progressLayer.lineWidth=5;
    _progressLayer.frame = mybound;
}

實例3：創建一個轉動的圓

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.view.backgroundColor=[UIColor whiteColor];
    
    [self circleBezierPath];
    //用定時器模擬數值輸入的情況
    _timer = [NSTimer scheduledTimerWithTimeInterval:0.1
                                              target:self
                                            selector:@selector(circleAnimationTypeOne)
                                            userInfo:nil
                                             repeats:YES];
}

-(void)circleBezierPath
{
    //創建出CAShapeLayer
    self.shapeLayer = [CAShapeLayer layer];
    self.shapeLayer.frame = CGRectMake(0, 0, 150, 150);
    self.shapeLayer.position = self.view.center;
    self.shapeLayer.fillColor = [UIColor clearColor].CGColor;
    
    //設置線條的寬度和顏色
    self.shapeLayer.lineWidth = 2.0f;
    self.shapeLayer.strokeColor = [UIColor redColor].CGColor;
    
    //設置stroke起始點
    self.shapeLayer.strokeStart = 0;
    self.shapeLayer.strokeEnd = 0;
    
    //創建出圓形貝塞爾曲線
    UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 150, 150)];
    
    //讓貝塞爾曲線與CAShapeLayer產生聯系
    self.shapeLayer.path = circlePath.CGPath;
    
    //添加並顯示
    [self.view.layer addSublayer:self.shapeLayer];
}

- (void)circleAnimationTypeOne
{
    if (self.shapeLayer.strokeEnd > 1 && self.shapeLayer.strokeStart < 1) {
        self.shapeLayer.strokeStart += 0.1;
    }else if(self.shapeLayer.strokeStart == 0){
        self.shapeLayer.strokeEnd += 0.1;
    }
    
    if (self.shapeLayer.strokeEnd == 0) {
        self.shapeLayer.strokeStart = 0;
    }
    
    if (self.shapeLayer.strokeStart == self.shapeLayer.strokeEnd) {
        self.shapeLayer.strokeEnd = 0;
    }
}

- (void)circleAnimationTypeTwo
{
    CGFloat valueOne = arc4random() % 100 / 100.0f;
    CGFloat valueTwo = arc4random() % 100 / 100.0f;
    
    self.shapeLayer.strokeStart = valueOne < valueTwo ? valueOne : valueTwo;
    self.shapeLayer.strokeEnd = valueTwo > valueOne ? valueTwo : valueOne;
}

實例4：通過點畫線組成一個五邊線

//畫一個五邊形
-(void)fiveAnimation
{
    UIBezierPath *aPath = [UIBezierPath bezierPath];
    //開始點 從上左下右的點
    [aPath moveToPoint:CGPointMake(100,100)];
    //划線點
    [aPath addLineToPoint:CGPointMake(60, 140)];
    [aPath addLineToPoint:CGPointMake(60, 240)];
    [aPath addLineToPoint:CGPointMake(160, 240)];
    [aPath addLineToPoint:CGPointMake(160, 140)];
    [aPath closePath];
    //設置定點是個5*5的小圓形（自己加的）
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100-5/2.0, 0, 5, 5)];
    [aPath appendPath:path];
    
    CAShapeLayer *shapelayer = [CAShapeLayer layer];
    //設置邊框顏色
    shapelayer.strokeColor = [[UIColor redColor]CGColor];
    //設置填充顏色 如果只要邊 可以把里面設置成[UIColor ClearColor]
    shapelayer.fillColor = [[UIColor blueColor]CGColor];
    //就是這句話在關聯彼此（UIBezierPath和CAShapeLayer）：
    shapelayer.path = aPath.CGPath;
    [self.view.layer addSublayer:shapelayer];
}

實例5：畫一條虛線

//畫一條虛線
-(void)createDottedLine
{
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    [shapeLayer setBounds:self.view.bounds];
    [shapeLayer setPosition:self.view.center];
    [shapeLayer setFillColor:[[UIColor clearColor] CGColor]];
    
    // 設置虛線顏色為blackColor
    [shapeLayer setStrokeColor:[[UIColor colorWithRed:223/255.0 green:223/255.0 blue:223/255.0 alpha:1.0f] CGColor]];
    
    // 3.0f設置虛線的寬度
    [shapeLayer setLineWidth:1.0f];
    [shapeLayer setLineJoin:kCALineJoinRound];
    
    // 3=線的寬度 1=每條線的間距
    [shapeLayer setLineDashPattern:
    [NSArray arrayWithObjects:[NSNumber numberWithInt:3],
      [NSNumber numberWithInt:1],nil]];
    
    // Setup the path
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path, NULL, 0, 89);
    CGPathAddLineToPoint(path, NULL, 320,89);
    
    [shapeLayer setPath:path];
    CGPathRelease(path);
    
    // 可以把self改成任何你想要的UIView, 下圖演示就是放到UITableViewCell中的
    [[self.view layer] addSublayer:shapeLayer];
}

實例6：畫一個弧線

//畫一個弧線
-(void)createCurvedLine
{
    UIBezierPath* aPath = [UIBezierPath bezierPath];
    aPath.lineWidth = 5.0;
    aPath.lineCapStyle = kCGLineCapRound; //線條拐角
    aPath.lineJoinStyle = kCGLineCapRound; //終點處理
    [aPath moveToPoint:CGPointMake(20, 100)];
    [aPath addQuadCurveToPoint:CGPointMake(120, 100) controlPoint:CGPointMake(70, 0)];
    
    self.CurvedLineLayer=[CAShapeLayer layer];
    self.CurvedLineLayer.path=aPath.CGPath;
    [self.view.layer addSublayer:self.CurvedLineLayer];
}

 

 

最近有個妹子弄的一個關於擴大眼界跟內含的訂閱號，每天都會更新一些深度內容，在這里如果你感興趣也可以關注一下(嘿對美女跟知識感興趣)，當然可以關注后輸入：github 會有我的微信號，如果有問題你也可以在那找到我；當然不感興趣無視此信息；