使用CAShapeLayer与UIBezierPath画出想要的图形

转载于 2016-02-17 17:38:01 发布 · 318 阅读

文章标签：

#图形

iOS 专栏收录该内容

56 篇文章

订阅专栏

本文介绍如何使用CAShapeLayer与UIBezierPath在iOS应用中创建环形进度视图，无需重写drawRect方法。通过设置不同层的属性如颜色、宽度等，实现了动态更新进度的功能。

使用CAShapeLayer与UIBezierPath可以实现不在view的drawRect方法中就画出一些想要的图形

步骤：
1、新建UIBezierPath对象bezierPath
2、新建CAShapeLayer对象caShapeLayer
3、将bezierPath的CGPath赋值给caShapeLayer的path，即caShapeLayer.path = bezierPath.CGPath
4、把caShapeLayer添加到某个显示该图形的layer中

下面的小例子是一个环形的progress代码，有具体的使用方法
.h文件：

#import <QuartzCore/QuartzCore.h>  
#import <UIKit/UIKit.h>  

@interface KACircleProgressView : UIView {  
    CAShapeLayer *_trackLayer;  
    UIBezierPath *_trackPath;  
    CAShapeLayer *_progressLayer;  
    UIBezierPath *_progressPath;  
}  

@property (nonatomic, strong) UIColor *trackColor;  
@property (nonatomic, strong) UIColor *progressColor;  
@property (nonatomic) float progress;//0~1之间的数  
@property (nonatomic) float progressWidth;  

- (void)setProgress:(float)progress animated:(BOOL)animated;  

@end

.m文件

#import "KACircleProgressView.h"  

@implementation KACircleProgressView  

- (id)initWithFrame:(CGRect)frame  
{  
    self = [super initWithFrame:frame];  
    if (self) {  
        // Initialization code  
        _trackLayer = [CAShapeLayer new];  
        [self.layer addSublayer:_trackLayer];  
        _trackLayer.fillColor = nil;  
        _trackLayer.frame = self.bounds;  

        _progressLayer = [CAShapeLayer new];  
        [self.layer addSublayer:_progressLayer];  
        _progressLayer.fillColor = nil;  
        _progressLayer.lineCap = kCALineCapRound;  
        _progressLayer.frame = self.bounds;  

        //默认5  
        self.progressWidth = 5;  
    }  
    return self;  
}  

- (void)setTrack  
{  
    _trackPath = [UIBezierPath bezierPathWithArcCenter:self.center radius:(self.bounds.size.width - _progressWidth)/ 2 startAngle:0 endAngle:M_PI * 2 clockwise:YES];;  
    _trackLayer.path = _trackPath.CGPath;  
}  

- (void)setProgress  
{  
    _progressPath = [UIBezierPath bezierPathWithArcCenter:self.center radius:(self.bounds.size.width - _progressWidth)/ 2 startAngle:- M_PI_2 endAngle:(M_PI * 2) * _progress - M_PI_2 clockwise:YES];  
    _progressLayer.path = _progressPath.CGPath;  
}  


- (void)setProgressWidth:(float)progressWidth  
{  
    _progressWidth = progressWidth;  
    _trackLayer.lineWidth = _progressWidth;  
    _progressLayer.lineWidth = _progressWidth;  

    [self setTrack];  
    [self setProgress];  
}  

- (void)setTrackColor:(UIColor *)trackColor  
{  
    _trackLayer.strokeColor = trackColor.CGColor;  
}  

- (void)setProgressColor:(UIColor *)progressColor  
{  
    _progressLayer.strokeColor = progressColor.CGColor;  
}  

- (void)setProgress:(float)progress  
{  
    _progress = progress;  

    [self setProgress];  
}  

- (void)setProgress:(float)progress animated:(BOOL)animated  
{  

}  

/* 
// Only override drawRect: if you perform custom drawing. 
// An empty implementation adversely affects performance during animation. 
- (void)drawRect:(CGRect)rect 
{ 
    // Drawing code 
} 
*/  

@end  

使用：
[cpp] view plain copy
- (void)viewDidLoad  
{  
    [super viewDidLoad];  
    // Do any additional setup after loading the view, typically from a nib.  
    KACircleProgressView *progress = [[KACircleProgressView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];  
    [self.view addSubview:progress];  
    progress.trackColor = [UIColor blackColor];  
    progress.progressColor = [UIColor orangeColor];  
    progress.progress = .7;  
    progress.progressWidth = 10;  
}