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{CGFloatperAngle = M_PI/(180);self.frame =self.view.frame;//画圆弧，每隔1°画一个弧线，总共60条for(inti =0; i <=60; i++) {//起始角度CGFloatstartAngle = ((M_PI_2 *3+ M_PI /18+ M_PI/180/2)+perAngle*i);CGFloatendAngle = startAngle+perAngle/2;//画圆弧UIBezierPath*bezPath = [UIBezierPathbezierPathWithArcCenter: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 = [CAShapeLayerlayer];//每隔15°画一个白条刻度if(i%15==0) {            shapeLayer.strokeColor = [[UIColorwhiteColor]CGColor];            shapeLayer.lineWidth =20;        }else{            shapeLayer.strokeColor = [[UIColorgrayColor]CGColor];            shapeLayer.lineWidth =10;        }        shapeLayer.path = bezPath.CGPath;        shapeLayer.fillColor = [UIColorclearColor].CGColor;        [self.view.layer addSublayer:shapeLayer];//添加刻度说明if(i %15==0){NSString*tickText;if(i ==0) {                tickText =@"-4";            }elseif(i==15){                tickText =@"-2";            }elseif(i==30){                tickText =@"0";            }elseif(i==45){                tickText =@"2";            }elseif(i==60){                tickText =@"4";            }CGFloattextAngel = -startAngle * (180/M_PI);//记得在这里换算成角度//根据提供的圆点、角度和半径计算圆周上一点的坐标CGPointpoint = [selfcalcCircleCoordinateWithCenter:CGPointMake(self.frame.size.width /2,self.frame.size.height /2) andWithAngle:textAngel andWithRadius:(self.frame.size.width/2-26)];UILabel*label = [[UILabelalloc]initWithFrame:CGRectMake(point.x, point.y,30,15)];            label.center = point;            label.text = tickText;            label.textColor = [UIColorgrayColor];            label.font = [UIFontsystemFontOfSize:15];            label.textAlignment =NSTextAlignmentCenter;            [self.view addSubview:label];        }    }}

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

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

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

图片来源网络

在iOS开发中我们这样做

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

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

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

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

CGFloatsceenW = [UIScreenmainScreen].bounds.size.width;CGFloatsceenH = [UIScreenmainScreen].bounds.size.height;CAShapeLayer*layer = [CAShapeLayerlayer];    layer.frame =self.view.bounds;//设置背景色layer.backgroundColor = [UIColorclearColor].CGColor;//设置描边色layer.strokeColor = [UIColororangeColor].CGColor;//设置填充色layer.fillColor = [UIColorclearColor].CGColor;//圆UIBezierPath*outCircle = [UIBezierPathbezierPathWithOvalInRect:CGRectMake(sceenW/2-120, sceenH/2-120,240,240)];UIBezierPath*inCircle = [UIBezierPathbezierPathWithOvalInRect:CGRectMake(sceenW/2-100, sceenH/2-100,200,200)];//直线UIBezierPath*transverseLine = [UIBezierPathbezierPath];    [transverseLine moveToPoint:CGPointMake(sceenW/2-120, sceenH/2)];    [transverseLine addLineToPoint:CGPointMake(sceenW/2+120, sceenH/2)];UIBezierPath*verticalLine = [UIBezierPathbezierPath];    [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看起来更酷炫。这个就先总结到这里吧，以后还会进行更深入的总结，估计这个可以形成一个系列专题来讲了。

作者：Sun橙子

链接：https://www.jianshu.com/p/9f9a0a2216f6

来源：简书

简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。