使用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. 1066. Root of AVL Tree (25)

    An AVL tree is a self-balancing binary search tree. In an AVL tree, the heights of the two child sub ...

  2. Hadoop分布式安装

    一.安装准备         1.下载hadoop,地址:http://hadoop.apache.org/,下载相应版本         2.下载JDK版本:Hadoop只支持1.6以上,地址:ht ...

  3. adbd cannot run as root in production builds

    首先必须保证手机已经root过,可以通过以下验证: $ adb shell root@dior:/ $ su root@dior:/ # 1 2 3 执行命令后,$ 变为 # 即 root 成功 但是 ...

  4. 【css老版本浏览器兼容利器】ie-css3.htc

    做前端的同学都应该听说或者用过,是一段脚本,可以让ie实现css3里的圆角和阴影效果. css带来的便利是很容易感受的到的,但恶心的是它在ie下的不兼容,所以某位牛人现身写了个ie-css3.htc, ...

  5. C++中用辗转相除法求两个数的最大公约数和最小公倍数

    两个数的最大公约数:不能大于两个数中的最小值,算法口诀:小的给大的,余数给小的,整除返回小的,即最大公约数,(res=max%min)==0?  max=min,min=res return min; ...

  6. Android journey3 @点击事件的4种写法

    对于android布局中的控件,如Button等会有相应的点击事件去响应它所需要的功能,今天我们就以电话拨号器的代码说明下几种点击事件: package com.itheima.phone; impo ...

  7. SQL获取数据库名,表名,列名,说明等信息

    由于最近工作涉及SQL语句较多,对一些不常见的SQL函数.及存储过程下面进行整理和描述,供大家分享: /************************************************ ...

  8. Caffe安装教程(原创)

    转载请注明地址 说明:本文档参考自Caffe官网的安装说明,http://caffe.berkeleyvision.org/installation.html 如果对安装过程中,需要用到的依赖不明,请 ...

  9. 在eclipse里的 flex 没有可视化的编辑

      注:在4.7版本里去掉了可视化编辑器.   转自:http://3470973.blog.51cto.com/3460973/1135328 最近eclipse切换了一个工作空间,创建的flex项 ...

  10. 巨大bug

    //数据结构关于课程设计--------图书馆管理系统的设计 #include <stdio.h> #include <stdlib.h> #include <strin ...