使用CAShapeLayer與UIBezierPath畫出想要的圖形

使用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

使用：

- (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;}

最後上一張：

轉載請註明出處，多謝