最近在开发一个新项目，项目里面需要绘图的地方比较多，所以就花点时间把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
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
