最近在開發(fā)一個(gè)新項(xiàng)目掷倔，項(xiàng)目里面需要繪圖的地方比較多，所以就花點(diǎn)時(shí)間把iOS開發(fā)中經(jīng)常使用的CAShapeLayer相關(guān)的知識(shí)進(jìn)行梳理總結(jié)个绍。初步效果如下圖
效果圖
1勒葱、CAShapeLayer簡(jiǎn)介
1.1 顧名思義CAShapeLayer繼承自CALayer，所以CALayer的所有屬性方法CAShapeLayer都可以使用
1.2 CAShapeLayer需要與貝塞爾曲線配合使用才有意義
1.3 使用CAShapeLayer與貝塞爾曲線可以實(shí)現(xiàn)不在view的drawRect方法中畫出有一些想要的圖形
1.4 CAShapeLayer屬于CoreAnimation框架巴柿，其動(dòng)畫渲染直接提交到手機(jī)的GPU當(dāng)中凛虽，相較于view的drawRect方法使用CPU渲染而言，其效率極高篮洁，能大大優(yōu)化內(nèi)存使用情況涩维。
2、CAShapeLayer與UIBezierPath的關(guān)系
2.1 CAShapeLayer中shape代表形狀的意思袁波，所以需要形狀才能生效
2.2 貝塞爾曲線可以創(chuàng)建基于矢量的路徑瓦阐，而UIBezierPath類是對(duì)CGPathRef的封裝
2.3 貝塞爾曲線給CAShapeLayer提供路徑，CAShapeLayer在提供的路徑中進(jìn)行渲染篷牌。路徑會(huì)閉環(huán)睡蟋，所以繪制出了Shape
2.4 用于CAShapeLayer的貝塞爾曲線作為path，其path是一個(gè)首尾相接的閉環(huán)的曲線枷颊，即使該貝塞爾曲線不是一個(gè)閉環(huán)的曲線
3戳杀、項(xiàng)目簡(jiǎn)介
本項(xiàng)目主要是顯示盾構(gòu)機(jī)的數(shù)量，掘進(jìn)狀態(tài)夭苗，故障信息信卡，報(bào)警信息等。我負(fù)責(zé)的是顯示盾構(gòu)機(jī)的狀態(tài)题造，包括掘進(jìn)狀態(tài)以及模擬盾首和盾尾在真實(shí)環(huán)境下的軌跡偏差傍菇， 包括水平偏差和垂直偏差。
首先是繪制弧形的刻度尺界赔，話不多少代碼很詳細(xì)：
-(void)setCompassView{CGFloatperAngle = M_PI/(180);self.frame =self.view.frame;//畫圓弧丢习，每隔1°畫一個(gè)弧線，總共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°畫一個(gè)白條刻度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);//記得在這里換算成角度//根據(jù)提供的圓點(diǎn)淮悼、角度和半徑計(jì)算圓周上一點(diǎn)的坐標(biāo)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];? ? ? ? }? ? }}
接下來的就是繪制刻度尺上的指針咐低，要求是指針可以根據(jù)提供的角度進(jìn)行移動(dòng)。
-(void)setPoint:(CGPoint)pointT pointB:(CGPoint)pointB lineColor:(UIColor*)color{//設(shè)置刻度盤上的綠指針和紅指針//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繪制直線袜腥，所以重點(diǎn)是計(jì)算出來直線的起點(diǎn)和終點(diǎn)的坐標(biāo)见擦，根據(jù)數(shù)學(xué)知識(shí)可知，求圓上點(diǎn)的坐標(biāo)需要已知的條件：圓心、半徑鲤屡、角度
圖片來源網(wǎng)絡(luò)
在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);}
好了儡湾，有了點(diǎn)的坐標(biāo)那么我們就可以繪制指針了：
-(void)setPoint:(CGPoint)pointT pointB:(CGPoint)pointB lineColor:(UIColor*)color{//設(shè)置刻度盤上的綠指針和紅指針//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];}
這個(gè)是繪制兩個(gè)圓的代碼實(shí)現(xiàn)：
CGFloatsceenW = [UIScreenmainScreen].bounds.size.width;CGFloatsceenH = [UIScreenmainScreen].bounds.size.height;CAShapeLayer*layer = [CAShapeLayerlayer];? ? layer.frame =self.view.bounds;//設(shè)置背景色layer.backgroundColor = [UIColorclearColor].CGColor;//設(shè)置描邊色layer.strokeColor = [UIColororangeColor].CGColor;//設(shè)置填充色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];
好了，領(lǐng)導(dǎo)交代的任務(wù)算是基本完成执俩，這個(gè)也只是簡(jiǎn)單的圖形繪制徐钠，但是使用CAShapeLayer和貝塞爾曲線可以繪制你想要的任意圖形，比如自定義的圓形進(jìn)度條等役首，并且還可以使用動(dòng)畫尝丐，這樣可以讓你的app看起來更酷炫。這個(gè)就先總結(jié)到這里吧衡奥，以后還會(huì)進(jìn)行更深入的總結(jié)爹袁，估計(jì)這個(gè)可以形成一個(gè)系列專題來講了。
作者：Sun橙子
鏈接：http://www.reibang.com/p/9f9a0a2216f6
來源：簡(jiǎn)書
簡(jiǎn)書著作權(quán)歸作者所有矮固，任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處失息。
