iOS之CAShapeLayer和贝塞尔曲线的使用
2018-09-12 本文已影响72人
Sun橙子
最近在开发一个新项目，项目里面需要绘图的地方比较多，所以就花点时间把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看起来更酷炫。这个就先总结到这里吧，以后还会进行更深入的总结，估计这个可以形成一个系列专题来讲了。
