iOS中使用CAShapeLayer、UIBezierPath画图

使用CAShapeLayer和UIBezierPath可以画出一下我们想要的图，出于项目需要和兴趣，本人总结了一下其基本用法
我们先说一些实现CAShapeLayer和UIBezierPath的步骤吧
1、创建出一个UIBezierPath对象
2、创建CAShapeLayer对象
3、将UIBezierPath对象的CGPath赋值给CAShapeLayer对象的path： caShapeLayer.path = bezierPath.CGPath
4、把CAShapeLayer添加到某个显示该图形的layer中
好了、暂时知道这个多，我们直接上代码吧，在代码中感受它们的强大。（大家不要笑话我的国语水平~~~）我们创建一个环形：
.h

#import 
#import 
@interface LGJView : UIView

{
    CAShapeLayer *_trackLayer;
    UIBezierPath *_trackPath;
    CAShapeLayer *_progressLayer;
    UIBezierPath *_progressPath;
}
@property(nonatomic,strong)UIColor *trackColor;
@property(nonatomic,strong)UIColor *progressColor;
@property(nonatomic,assign)float progress;//0-1之间的数字
@property(nonatomic,assign)float progressWidth;
-(void)setProgress:(float)progress animated:(BOOL)animated;
@end

.m

#import "LGJView.h"
@implementation LGJView
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        _trackLayer = [CAShapeLayer new];
        [self.layer addSublayer:_trackLayer];
        _trackLayer.fillColor = nil;
        _trackLayer.frame = self.bounds;
        
        
        _progressLayer = [CAShapeLayer new];
        [self.layer addSublayer:_progressLayer];
        _progressLayer.fillColor = nil;
        _progressLayer.lineCap = kCALineCapRound;
        _progressLayer.frame = self.bounds;
        
        self.progressWidth = 5.0f;//默认是5
    }
    return self;
}

-(void)setProgressWidth:(float)progressWidth{
    _progressWidth = progressWidth;
    _trackLayer.lineWidth = _progressWidth;
    _progressLayer.lineWidth = _progressWidth;
    [self setBes];
    [self setProg];
}
-(void)setBes{
    _trackPath = [UIBezierPath bezierPathWithArcCenter:self.center radius:(self.frame.size.width-_progressWidth)/2 startAngle:0 endAngle:M_PI*2 clockwise:YES];
    _trackLayer.path = _trackPath.CGPath;
}

-(void)setProg{
    _progressPath = [UIBezierPath bezierPathWithArcCenter:self.center radius:(self.bounds.size.width-_progressWidth)/2 startAngle:- M_PI_2 endAngle:(M_PI *2)*self.progress clockwise:YES];
    _progressLayer.path = _progressPath.CGPath;
}
-(void)setTrackColor:(UIColor *)trackColor{
    _trackLayer.strokeColor = trackColor.CGColor;
}
-(void)setProgressColor:(UIColor *)progressColor{
    _progressLayer.strokeColor = progressColor.CGColor;
}
-(void)setProgress:(float)progress{
    _progress = progress;
    [self setProg];
}
-(void)setProgress:(float)progress animated:(BOOL)animated{
}
@end

紧接着我们在ViewController.m中

#import "ViewController.h"
#import "LGJView.h"
@implementation ViewController



- (void)viewDidLoad {
    [super viewDidLoad];
    
    LGJView *aView = [[LGJView alloc]initWithFrame:CGRectMake(100, 100, 200, 200)];
    [self.view addSubview:aView];
    
    aView.trackColor = [UIColor blackColor];
    aView.progressColor = [UIColor orangeColor];
    aView.progress= .7;
    aView.progressWidth = 10;
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
@end

运行以上代码程序的执行结果如下：

其实UIBezierPath通过

• (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise可以画出一段弧线。那么各个参数的含义是什么呢？
  center：圆心的坐标
  radius：半径
  startAngle：起始的弧度
  endAngle：圆弧结束的弧度
  clockwise：YES为顺时针，No为逆时针
  方法里面主要是理解startAngle与endAngle，刚开始我搞不清楚一段圆弧从哪算起始和终止，比如弧度为0的话，是从上下左右哪个点开始算
  看了下面这张图就明了了

  
  
  
  
  

  看出0Pi就是指圆最右边开始计算的，顺时针依次为M_PI/2,M_PI,M_PI*1.5
  明白这个，用BezierPath画圆弧就简单了
  比如要画上图加粗的那段就是：

UIBezierPath *path = [[UIBezierPath alloc] init];    
[path addArcWithCenter:center    
                radius:radius    
            startAngle:M_PI*1.1    
              endAngle:M_PI*1.9    
             clockwise:YES]; 

下面我们来看几个其他的例子

- (void)viewDidLoad {
    [super viewDidLoad];
    
//    /**创建椭圆形的贝塞尔曲线*/
    UIBezierPath *lgj1 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 100)];
//
//     /**创建矩形的贝塞尔曲线*/
    UIBezierPath *_rectPath=[UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 200, 100)];
//
//    
//     /**创建圆形的贝塞尔曲线*/
    UIBezierPath *_circlePath=[UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 100, 100)];
//
    UIBezierPath *_shapePath=[UIBezierPath bezierPathWithArcCenter:CGPointMake(20, 0) radius:100 startAngle:0 endAngle:3.14*2 clockwise:YES];
    
    /**创建带形状的图层*/
    CAShapeLayer *_shapeLayer = [CAShapeLayer layer];
    _shapeLayer.frame=CGRectMake(0, 0, 200, 100);
    _shapeLayer.position=self.view.center;
    
    
    /**注意:图层之间与贝塞尔曲线之间通过path进行关联*/
    _shapeLayer.path=lgj1.CGPath;
    
    _shapeLayer.fillColor=[UIColor redColor].CGColor;
    [self.view.layer addSublayer:_shapeLayer];
}