UIBezierPath和CAShapeLayer 简单画圆

//

//  WSQCustomProgressView.h

//  Demo

//

//  Created by webapps on 17/3/6.

//  Copyright © 2017年 Passion. All rights reserved.

//

#import <UIKit/UIKit.h>

@interface WSQCustomProgressView : UIView

@property(nonatomic, assign) CGFloat circleWidth;//圆宽

@property(nonatomic,strong)  UIColor * backCircleClor;//背景圆环的颜色

@property(nonatomic,strong)  UIColor * progresCircleClor;//进度条圆环的颜色

@property(nonatomic,assign)  BOOL hidePercentL;//是否隐藏百分比Lable

@property(nonatomic,strong)  UIColor * percentLClor;//百分比Lable的颜色

// 开始创建Circle

- (void)createCricle;

//开始绘制

-(void)stareAnimationWithPercentage:(CGFloat )percent;

@end

//

//  WSQCustomProgressView.m

//  Demo

//

//  Created by webapps on 17/3/6.

//  Copyright © 2017年 Passion. All rights reserved.

//

/*    思路

 

   给View 加两个Layer 一个为底部的灰色，一个为深色，控制只有绘制图的时间

 

 

 */

#import "WSQCustomProgressView.h"

#define RGB(r,g,b,a) [UIColor colorWithRed:r/255.0 green:g/255.0 blue:b/255.0 alpha:a]

@interface WSQCustomProgressView()

@property (nonatomic, strong) CAShapeLayer *backgroundLayer;//背景圆

@property (nonatomic, strong) CAShapeLayer *progressLayer;//进度圆

@property (nonatomic, strong) UILabel      *percentLable;//百分比按钮

@end

@implementation WSQCustomProgressView

- (instancetype)initWithFrame:(CGRect)frame{

    self = [super initWithFrame:frame];

    if (self) {

        

        //初始化view

        self.backgroundColor = [UIColor clearColor];

        

        //默认圆宽度4

        _circleWidth = 4;

        //默认背景圆环为淡淡灰色

        _backCircleClor = RGB(240, 240, 240, 1);

        //默认进度圆环为橙色

        _progresCircleClor = [UIColor orangeColor];

        //默认显示百分比Lable

        _hidePercentL = NO;

        //默认显示百分比字体颜色我淡黑色

        _percentLClor = RGB(212, 212, 213, 1);

        

    }

 

    return self;

}

//开始创建圆环

- (void)createCricle{

    

    

    CGFloat radius = (CGRectGetWidth(self.bounds) - _circleWidth)/2;

    

    //灰色背景圆环

    _backgroundLayer = [self createLayerWithFillColor:[UIColor clearColor] StrokeColor:_backCircleClor lineWidth:_circleWidth radius:radius];

    //显示进度的圆环

    _progressLayer = [self createLayerWithFillColor:[UIColor clearColor] StrokeColor:_progresCircleClor lineWidth:_circleWidth radius:radius];

    _progressLayer.strokeEnd = 0;

    

  

    [self.layer addSublayer:_backgroundLayer];

    [self.layer addSublayer:_progressLayer];

    

    [self createPercentLable];

    

  

    

}

//创建百分比Lable

- (void)createPercentLable{

    CGFloat w = self.bounds.size.width;

    CGFloat H = self.bounds.size.height/2;

    

    _percentLable = [[UILabel alloc]initWithFrame:CGRectMake(0, H - 15, w, 30)];

    _percentLable.hidden = _hidePercentL;

    _percentLable.textColor = _percentLClor;

    _percentLable.textAlignment = NSTextAlignmentCenter;

    _percentLable.backgroundColor = [UIColor clearColor];

    [self addSubview:_percentLable];

}

/**

 对圆环做处理

 @param fillColor 圆环的内部填充颜色

 @param strokeColor 圆环圆填充的颜色

 @param linewidth 圆环宽度

 @param radius 角度

 @return 返回layer

 */

- (CAShapeLayer *)createLayerWithFillColor:(UIColor *)fillColor StrokeColor:(UIColor *)strokeColor lineWidth:(CGFloat)linewidth radius:(CGFloat)radius{

        

    CAShapeLayer *layer = [CAShapeLayer layer];

    layer.bounds = self.bounds;

    layer.anchorPoint = CGPointMake(0, 0);

    layer.lineWidth = linewidth;

    layer.fillColor = fillColor.CGColor;

    layer.strokeColor = strokeColor.CGColor;

    

    // 从1/4 pi处起绘制

    UIBezierPath *bPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds)) radius:radius startAngle:M_PI_2 endAngle:M_PI*2 + M_PI_2 clockwise:YES];

    

    layer.path = bPath.CGPath;

    

    return layer;

        

    }

/**

  开始执行绘制

 @param percent 百分比

 */

- (void)stareAnimationWithPercentage:(CGFloat)percent{

    

    CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];

    basic.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];

    basic.duration = 5;//绘制时间

    basic.fromValue = @(0);//起始，

    basic.toValue = @(percent);//结束

    basic.removedOnCompletion = NO;//动画执行完成后不删除动画

    basic.fillMode = @"forwards";

    [_progressLayer addAnimation:basic forKey:nil];

    

    int prer = (int)(percent *100);

    _percentLable.text = [NSString stringWithFormat:@"%d%@",prer,@"%"];

    

}

@end