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

步骤:

1、新建UIBezierPath对象bezierPath

2、新建CAShapeLayer对象caShapeLayer

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

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

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

.h文件:

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

.m文件

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

使用:

  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. }

最后上一张效果图:

使用CAShapeLayer与UIBezierPath画出想要的图形的更多相关文章

  1. 使用CAShapeLayer的path属性与UIBezierPath画出扫描框

    1.CAShapeLayer CAShapeLayer具有path属性,(是CGPath对象),可以使用这个属性与UIBezierPath画出想要的图形.该子类根据其fill color和stroke ...

  2. 使用CAShapeLayer和UIBezierPath画一个自定义半圆弧button

    通常我们使用系统自带的UIButton时,一般都是Rect矩形形式的,或则美工给出一张半圆弧的按钮,如图为一张半圆加三角形的按钮,而此时,如果给按钮添加点击事件时,响应事件依然为矩形区域,不符合我们的 ...

  3. 用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  4. 如何用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  5. 用css画出三角形【转】

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  6. CSS画出的各种形状图

    利用CSS可以画出各种需要的图形目录[1]矩形[2]圆形[3]椭圆[4]直角三角形[5]正三角形[6]平行四边形[7]梯形[8]六角星[9]六边形[10]五角星简单图形 矩形div{ width: 1 ...

  7. iOS关于CAShapeLayer与UIBezierPath的知识内容

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

  8. CAShapeLayer(UIBezierPath)、CAGradientLayer绘制动态小车

    看到一个大神写的代码,引用过来让大家看看! //  1.CAShapeLayer是一种特殊的层,可以在上面渲染图形. //  2.CAShapeLayer继承自CALayer,可使用CALayer的所 ...

  9. H5坦克大战之【画出坦克】

    今天是个特殊的日子,圣诞节,也是周末,在这里先祝大家圣诞快乐!喜庆的日子,我们可以稍微放松一下,扯一扯昨天雷霆对战凯尔特人的比赛,这场比赛大威少又双叒叕拿下三双,而且是一个45+11+11的超级三双, ...

随机推荐

  1. 纯js分页代码(简洁实用)

    纯js写的分页代码. 复制代码代码如下: //每页显示字数 PageSize=5000; //分页模式 flag=2;//1:根据字数自动分页 2:根据[NextPage]分页 //默认页 start ...

  2. 笔记 php.ini配置文件中magic_quotes_gpc, magic_quotes_runtime的作用是什么?应该开启还是关闭?

    默认情况下,PHP 指令 magic_quotes_gpc 为 on,对所有的 GET.POST 和 COOKIE 数据自动运行 addslashes().不要对已经被 magic_quotes_gp ...

  3. 内部技术分享的 PPT

    本文的基础是搞了一次内部的技术分享,在此也分享一下本次的PPT的一些内容.先列一下大概内容吧. EF-Code First API(WCF.WebAPI) Xaml MVVM AOP Xamarin. ...

  4. 【BZOJ 1090】[SCOI2003]字符串折叠

    Description 折 叠的定义如下: 1. 一个字符串可以看成它自身的折叠.记作S  S 2. X(S)是X(X>1)个S连接在一起的串的折叠.记作X(S)  SSSS…S(X个S). ...

  5. C#中读取二维数组每位的长度

    C#中的二维数组,如int[,] A=new int[a,b];则 a=A.GetLength(0);即可获得二维数组中第一维的长度. b=A.GetLength(1);即可获得二维数组中第二维的长度 ...

  6. js 正则 数值验证

    function checkTextDataForNORMAL(strValue) { // 特殊字符验证格式 var regTextChar = /([\*"\'<>\/])+ ...

  7. 8种方法提升windows 8使用方便-----Win+x 编辑菜单

    在windows 8上,你可以同时按下windows键和x键或者右键点击屏幕左下角打开一个菜单名为电源菜单或者快速访问菜单,这个菜单包含快速访问系统的工具,如控制面板,命令提示符,任务管理器,资源管理 ...

  8. Makedown常用符号整理

    整理自:http://www.jianshu.com/p/1e402922ee32 不过这里发现博客园的makedown语法支持还不完善,代码语法显示挺有问题的,比较遗憾. 标题 # 一级标题## 二 ...

  9. Application.persistentDataPath 的一个小坑

    打包之前在Android的Player Setting里面选择WriteAccess (写入访问) Internal Only:表示Application.persistentDataPath的路径是 ...

  10. Observer Pattern

    Motivation We can not talk about Object Oriented Programming without considering the state of the ob ...