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


    使用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;  
    }

    最后上一张效果图:

  • 相关阅读:
    sockjs-node/info 请求错误
    vue项目中 —— rem布局适配方案
    JS判断对象是否为空
    JS生成一个特定格式随机数
    vue项目中axios请求网络接口封装
    vue报错——error Unexpected console statement no-console
    vue切换页面修改网页的标题
    处理js两个数相乘的坑
    js科学计数法问题
    (9)kendo UI使用基础介绍与问题整理——Validator/基础说明、实例介绍
  • 原文地址:https://www.cnblogs.com/fengmin/p/5551972.html
Copyright © 2020-2023  润新知