最近在開發(fā)一個新項目，項目里面需要繪圖的地方比較多，所以就花點時間把iOS開發(fā)中經常使用的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渲染而言，其效率極高，能大大優(yōu)化內存使用情況。
2、CAShapeLayer與UIBezierPath的關系
2.1 CAShapeLayer中shape代表形狀的意思，所以需要形狀才能生效
2.2 貝塞爾曲線可以創(chuàng)建基于矢量的路徑，而UIBezierPath類是對CGPathRef的封裝
2.3 貝塞爾曲線給CAShapeLayer提供路徑，CAShapeLayer在提供的路徑中進行渲染。路徑會閉環(huán)，所以繪制出了Shape
2.4 用于CAShapeLayer的貝塞爾曲線作為path，其path是一個首尾相接的閉環(huán)的曲線，即使該貝塞爾曲線不是一個閉環(huán)的曲線
3、項目簡介
本項目主要是顯示盾構機的數量，掘進狀態(tài)，故障信息，報警信息等。我負責的是顯示盾構機的狀態(tài)，包括掘進狀態(tài)以及模擬盾首和盾尾在真實環(huán)境下的軌跡偏差， 包括水平偏差和垂直偏差。
首先是繪制弧形的刻度尺，話不多少代碼很詳細：
-(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開發(fā)中我們這樣做
-(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橙子
鏈接：http://www.lxweimin.com/p/9f9a0a2216f6
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權并注明出處。
