iOS之CAShapeLayer和贝塞尔曲线的使用

最近在开发一个新项目，项目里面需要绘图的地方比较多，所以就花点时间把iOS开发中经常使用的CAShapeLayer相关的知识进行梳理总结。初步效果如下图

效果图

1、CAShapeLayer简介

1.1 顾名思义CAShapeLayer继承自CALayer，所以CALayer的所有属性方法CAShapeLayer都可以使用

1.2 CAShapeLayer需要与贝塞尔曲线配合使用才有意义

1.3 使用CAShapeLayer与贝塞尔曲线可以实现不在view的drawRect方法中画出有一些想要的图形

1.4 CAShapeLayer属于CoreAnimation框架，其动画渲染直接提交到手机的GPU当中，相较于view的drawRect方法使用CPU渲染而言，其效率极高，能大大优化内存使用情况。

---

2、CAShapeLayer与UIBezierPath的关系

2.1 CAShapeLayer中shape代表形状的意思，所以需要形状才能生效

2.2 贝塞尔曲线可以创建基于矢量的路径，而UIBezierPath类是对CGPathRef的封装

2.3 贝塞尔曲线给CAShapeLayer提供路径，CAShapeLayer在提供的路径中进行渲染。路径会闭环，所以绘制出了Shape

2.4 用于CAShapeLayer的贝塞尔曲线作为path，其path是一个首尾相接的闭环的曲线，即使该贝塞尔曲线不是一个闭环的曲线

3、项目简介

本项目主要是显示盾构机的数量，掘进状态，故障信息，报警信息等。我负责的是显示盾构机的状态，包括掘进状态以及模拟盾首和盾尾在真实环境下的轨迹偏差， 包括水平偏差和垂直偏差。
首先是绘制弧形的刻度尺，话不多少代码很详细：

-(void)setCompassView{
    CGFloat perAngle = M_PI/(180);
    self.frame = self.view.frame;
    //画圆弧，每隔1°画一个弧线，总共60条
    for (int i = 0; i <= 60; i++) {
        //起始角度
        CGFloat startAngle = ((M_PI_2 *3 + M_PI / 18 + M_PI/180/2)+perAngle*i);
        CGFloat endAngle = startAngle+perAngle/2;
        //画圆弧
        UIBezierPath *bezPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.frame.size.width/2, self.frame.size.height/2)
                                                               radius:(self.frame.size.width/2 - 50)
                                                           startAngle:startAngle
                                                             endAngle:endAngle
                                                            clockwise:YES];
        CAShapeLayer *shapeLayer = [CAShapeLayer layer];
        //每隔15°画一个白条刻度
        if (i%15 == 0) {
            shapeLayer.strokeColor = [[UIColor whiteColor] CGColor];
            shapeLayer.lineWidth = 20;
        }else{
            shapeLayer.strokeColor = [[UIColor grayColor] CGColor];
            shapeLayer.lineWidth = 10;
        }
        shapeLayer.path = bezPath.CGPath;
        shapeLayer.fillColor = [UIColor clearColor].CGColor;
        [self.view.layer addSublayer:shapeLayer];
        
        //添加刻度说明
        if (i % 15 == 0){
            NSString *tickText;
            if (i ==0) {
                tickText = @"-4";
            }else if (i==15){
                tickText = @"-2";
            }else if(i==30){
                tickText = @"0";
            } else if (i==45){
                tickText = @"2";
            }else if (i==60){
                tickText = @"4";
            }
            CGFloat textAngel = -startAngle * (180/M_PI);//记得在这里换算成角度
            //根据提供的圆点、角度和半径计算圆周上一点的坐标
            CGPoint point = [self calcCircleCoordinateWithCenter:CGPointMake(self.frame.size.width / 2, self.frame.size.height / 2) andWithAngle:textAngel andWithRadius:(self.frame.size.width/2 - 26)];
            UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(point.x, point.y, 30, 15)];
            label.center = point;
            label.text = tickText;
            label.textColor = [UIColor grayColor];
            label.font = [UIFont systemFontOfSize:15];
            label.textAlignment = NSTextAlignmentCenter;
            [self.view addSubview:label];
        }
    }
}

接下来的就是绘制刻度尺上的指针，要求是指针可以根据提供的角度进行移动。

-(void)setPoint:(CGPoint)pointT pointB:(CGPoint)pointB lineColor:(UIColor *)color{
    //设置刻度盘上的绿指针和红指针
    //perAngle >0,下滑
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    UIBezierPath *linePath = [UIBezierPath bezierPath];
    [linePath moveToPoint:pointT];
    [linePath addLineToPoint:pointB];
    shapeLayer.path = linePath.CGPath;
    shapeLayer.backgroundColor = [UIColor clearColor].CGColor;
    shapeLayer.strokeColor = color.CGColor;
    shapeLayer.lineWidth = 2;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    [self.view.layer addSublayer:shapeLayer];
}

由于指针我采用的是使用UIBezierPath绘制直线，所以重点是计算出来直线的起点和终点的坐标，根据数学知识可知，求圆上点的坐标需要已知的条件：圆心、半径、角度

图片来源网络

在iOS开发中我们这样做

-(CGPoint) calcCircleCoordinateWithCenter:(CGPoint) center  andWithAngle : (CGFloat) angle andWithRadius: (CGFloat) radius{
    CGFloat x2 = radius*cosf(angle*M_PI/180);
    CGFloat y2 = radius*sinf(angle*M_PI/180);
    return CGPointMake(center.x+x2, center.y-y2);
}

好了，有了点的坐标那么我们就可以绘制指针了：

-(void)setPoint:(CGPoint)pointT pointB:(CGPoint)pointB lineColor:(UIColor *)color{
    //设置刻度盘上的绿指针和红指针
    //perAngle >0,下滑
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    UIBezierPath *linePath = [UIBezierPath bezierPath];
    [linePath moveToPoint:pointT];
    [linePath addLineToPoint:pointB];
    shapeLayer.path = linePath.CGPath;
    shapeLayer.backgroundColor = [UIColor clearColor].CGColor;
    shapeLayer.strokeColor = color.CGColor;
    shapeLayer.lineWidth = 2;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    [self.view.layer addSublayer:shapeLayer];
}

这个是绘制两个圆的代码实现：

    CGFloat sceenW = [UIScreen mainScreen].bounds.size.width;
    CGFloat sceenH = [UIScreen mainScreen].bounds.size.height;
    
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.frame = self.view.bounds;
    //设置背景色
    layer.backgroundColor = [UIColor clearColor].CGColor;
    //设置描边色
    layer.strokeColor = [UIColor orangeColor].CGColor;
    //设置填充色
    layer.fillColor = [UIColor clearColor].CGColor;
    
    //圆
    UIBezierPath *outCircle = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(sceenW/2 -120, sceenH/2 - 120, 240, 240)];
    UIBezierPath *inCircle = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(sceenW/2 -100, sceenH/2 - 100, 200, 200)];
    //直线
    UIBezierPath *transverseLine = [UIBezierPath bezierPath];
    [transverseLine moveToPoint:CGPointMake(sceenW/2 - 120, sceenH/2)];
    [transverseLine addLineToPoint:CGPointMake(sceenW/2 + 120, sceenH/2)];
    UIBezierPath *verticalLine = [UIBezierPath bezierPath];
    [transverseLine moveToPoint:CGPointMake(sceenW/2, sceenH/2 -120)];
    [transverseLine addLineToPoint:CGPointMake(sceenW/2, sceenH/2 + 120)];
    
    [outCircle appendPath:inCircle];
    [outCircle appendPath:transverseLine];
    [outCircle appendPath:verticalLine];
    
    layer.path = outCircle.CGPath;
    [self.view.layer addSublayer:layer];

好了，领导交代的任务算是基本完成，这个也只是简单的图形绘制，但是使用CAShapeLayer和贝塞尔曲线可以绘制你想要的任意图形，比如自定义的圆形进度条等，并且还可以使用动画，这样可以让你的app看起来更酷炫。这个就先总结到这里吧，以后还会进行更深入的总结，估计这个可以形成一个系列专题来讲了。