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

Posted 2020-07-19 专注it

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

步骤：

1、新建UIBezierPath对象bezierPath

2、新建CAShapeLayer对象caShapeLayer

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

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

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

.h文件：

 

[cpp] view plain copy

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

 

.m文件

 

[cpp] view plain copy

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

使用：

 

[cpp] view plain copy

1. - (void)viewDidLoad  
2. {  
3.     [super viewDidLoad];  
4.     // Do any additional setup after loading the view, typically from a nib.  
5.     KACircleProgressView *progress = [[KACircleProgressView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];  
6.     [self.view addSubview:progress];  
7.     progress.trackColor = [UIColor blackColor];  
8.     progress.progressColor = [UIColor orangeColor];  
9.     progress.progress = .7;  
10.     progress.progressWidth = 10;  
11. }  

 

最后上一张效果图：