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

Posted 2020-07-19 小敏的博客

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

步骤：

1、新建UIBezierPath对象bezierPath

2、新建CAShapeLayer对象caShapeLayer

3、将bezierPath的CGPath赋值给caShapeLayer的path，即caShapeLayer.path = bezierPath.CGPath

4、把caShapeLayer添加到某个显示该图形的layer中

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

 1 .h文件：
 2 
 3 #import <QuartzCore/QuartzCore.h>  
 4 #import <UIKit/UIKit.h>  
 5 
 6 @interface KACircleProgressView : UIView {  
 7     CAShapeLayer *_trackLayer;  
 8     UIBezierPath *_trackPath;  
 9     CAShapeLayer *_progressLayer;  
10     UIBezierPath *_progressPath;  
11 }  
12 
13 @property (nonatomic, strong) UIColor *trackColor;  
14 @property (nonatomic, strong) UIColor *progressColor;  
15 @property (nonatomic) float progress;//0~1之间的数  
16 @property (nonatomic) float progressWidth;  
17 
18 - (void)setProgress:(float)progress animated:(BOOL)animated;  
19 
20 @end  

 1 .m文件
 2 
 3 #import "KACircleProgressView.h"  
 4 
 5 @implementation KACircleProgressView  
 6 
 7 - (id)initWithFrame:(CGRect)frame  
 8 {  
 9     self = [super initWithFrame:frame];  
10     if (self) {  
11         // Initialization code  
12         _trackLayer = [CAShapeLayer new];  
13         [self.layer addSublayer:_trackLayer];  
14         _trackLayer.fillColor = nil;  
15         _trackLayer.frame = self.bounds;  
16 
17         _progressLayer = [CAShapeLayer new];  
18         [self.layer addSublayer:_progressLayer];  
19         _progressLayer.fillColor = nil;  
20         _progressLayer.lineCap = kCALineCapRound;  
21         _progressLayer.frame = self.bounds;  
22 
23         //默认5  
24         self.progressWidth = 5;  
25     }  
26     return self;  
27 }  
28 
29 - (void)setTrack  
30 {  
31     _trackPath = [UIBezierPath bezierPathWithArcCenter:self.center radius:(self.bounds.size.width - _progressWidth)/ 2 startAngle:0 endAngle:M_PI * 2 clockwise:YES];;  
32     _trackLayer.path = _trackPath.CGPath;  
33 }  
34 
35 - (void)setProgress  
36 {  
37     _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];  
38     _progressLayer.path = _progressPath.CGPath;  
39 }  
40 
41 
42 - (void)setProgressWidth:(float)progressWidth  
43 {  
44     _progressWidth = progressWidth;  
45     _trackLayer.lineWidth = _progressWidth;  
46     _progressLayer.lineWidth = _progressWidth;  
47 
48     [self setTrack];  
49     [self setProgress];  
50 }  
51 
52 - (void)setTrackColor:(UIColor *)trackColor  
53 {  
54     _trackLayer.strokeColor = trackColor.CGColor;  
55 }  
56 
57 - (void)setProgressColor:(UIColor *)progressColor  
58 {  
59     _progressLayer.strokeColor = progressColor.CGColor;  
60 }  
61 
62 - (void)setProgress:(float)progress  
63 {  
64     _progress = progress;  
65 
66     [self setProgress];  
67 }  
68 
69 - (void)setProgress:(float)progress animated:(BOOL)animated  
70 {  
71 
72 }  
73 
74 /* 
75 // Only override drawRect: if you perform custom drawing. 
76 // An empty implementation adversely affects performance during animation. 
77 - (void)drawRect:(CGRect)rect 
78 { 
79     // Drawing code 
80 } 
81 */  
82 
83 @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;  
}

 

最后上一张效果图：