1好乐、CAShapeLayer簡介
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)目簡介
本項(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{
CGFloat perAngle = M_PI/(180);
self.frame = self.view.frame;
//畫圓弧埋虹,每隔1°畫一個(gè)弧線猜憎,總共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°畫一個(gè)白條刻度
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);//記得在這里換算成角度
//根據(jù)提供的圓點(diǎn)、角度和半徑計(jì)算圓周上一點(diǎn)的坐標(biāo)
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];
}
}
}
接下來的就是繪制刻度尺上的指針搔课,要求是指針可以根據(jù)提供的角度進(jìn)行移動(dòng)胰柑。
-(void)setPoint:(CGPoint)pointT pointB:(CGPoint)pointB lineColor:(UIColor *)color{
//設(shè)置刻度盤上的綠指針和紅指針
//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繪制直線,所以重點(diǎn)是計(jì)算出來直線的起點(diǎn)和終點(diǎn)的坐標(biāo)爬泥,根據(jù)數(shù)學(xué)知識(shí)可知柬讨,求圓上點(diǎn)的坐標(biāo)需要已知的條件:圓心、半徑袍啡、角度
在iOS開發(fā)中我們這樣做
-(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);
}
好了踩官,有了點(diǎn)的坐標(biāo)那么我們就可以繪制指針了:
-(void)setPoint:(CGPoint)pointT pointB:(CGPoint)pointB lineColor:(UIColor *)color{
//設(shè)置刻度盤上的綠指針和紅指針
//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];
}
這個(gè)是繪制兩個(gè)圓的代碼實(shí)現(xiàn):
CGFloat sceenW = [UIScreen mainScreen].bounds.size.width;
CGFloat sceenH = [UIScreen mainScreen].bounds.size.height;
CAShapeLayer *layer = [CAShapeLayer layer];
layer.frame = self.view.bounds;
//設(shè)置背景色
layer.backgroundColor = [UIColor clearColor].CGColor;
//設(shè)置描邊色
layer.strokeColor = [UIColor orangeColor].CGColor;
//設(shè)置填充色
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];
好了,領(lǐng)導(dǎo)交代的任務(wù)算是基本完成境输,這個(gè)也只是簡單的圖形繪制蔗牡,但是使用CAShapeLayer和貝塞爾曲線可以繪制你想要的任意圖形颖系,比如自定義的圓形進(jìn)度條等,并且還可以使用動(dòng)畫辩越,這樣可以讓你的app看起來更酷炫嘁扼。這個(gè)就先總結(jié)到這里吧,以后還會(huì)進(jìn)行更深入的總結(jié)黔攒,估計(jì)這個(gè)可以形成一個(gè)系列專題來講了趁啸。