博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用CAShapeLayer与UIBezierPath画出想要的图形
阅读量:7127 次
发布时间:2019-06-28

本文共 2962 字,大约阅读时间需要 9 分钟。

使用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]
  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]
  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.     // Drawing code 
  77. */  
  78.   
  79. @end  

使用:

 

[cpp]
  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. }  

 

最后上一张效果图:

 

你可能感兴趣的文章
夏日葵电商:搭建一个商城系统,N+功能方案揭秘!
查看>>
Akka系列(一):Akka简介与Actor模型
查看>>
yii2获得从数据库获得数据的方法并处理
查看>>
Android开发百度地图(一)之初体验
查看>>
微服务指南走北(四):你不愿意做微服务架构的十个理由
查看>>
CSS代码重构与优化之路
查看>>
使用 sigprocmask 和 sigpending 在程序正文中捕获和处理信号
查看>>
Bodymovin插件的使用
查看>>
详细深入分析 Java ClassLoader 工作机制
查看>>
关于设计模式
查看>>
对一个“老”架构的重新思考
查看>>
DoubanFMPlayer, A mimic of Douban.fm player
查看>>
埃森哲、亚马逊和万事达卡抱团推出的区块链项目有何神通?
查看>>
2019年自动驾驶5大趋势预测:第一台Level 5 无人车问世
查看>>
后APP时代的破局之路 :阿里技术“三大容器五大方案”亮相,百川开放全面升级...
查看>>
工欲善其事-必先利其器之终端
查看>>
64位的Mac OS X也有Windows.Forms了
查看>>
立下“去O”Flag的AWS,悄悄修炼了哪些内功?
查看>>
Better Software East/DevOps East/Agile Dev East 2016大会上的教程介绍
查看>>
优酷在多模态内容理解上的研究及应用
查看>>