iOS之CAShapeLayer和貝塞爾曲線的使用

最近在開發(fā)一個(gè)新項(xiàng)目双吆,項(xiàng)目里面需要繪圖的地方比較多眨唬,所以就花點(diǎn)時(shí)間把iOS開發(fā)中經(jīng)常使用的CAShapeLayer相關(guān)的知識(shí)進(jìn)行梳理總結(jié)。初步效果如下圖
效果圖

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)需要已知的條件:圓心、半徑袍啡、角度


圖片來源網(wǎng)絡(luò)

在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è)系列專題來講了趁啸。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市督惰,隨后出現(xiàn)的幾起案子不傅,更是在濱河造成了極大的恐慌,老刑警劉巖赏胚,帶你破解...
    沈念sama閱讀 211,123評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件访娶,死亡現(xiàn)場離奇詭異,居然都是意外死亡栅哀,警方通過查閱死者的電腦和手機(jī)震肮,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評(píng)論 2 384
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來留拾,“玉大人戳晌,你說我怎么就攤上這事〕杖幔” “怎么了沦偎?”我有些...
    開封第一講書人閱讀 156,723評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長咳蔚。 經(jīng)常有香客問我豪嚎,道長,這世上最難降的妖魔是什么谈火? 我笑而不...
    開封第一講書人閱讀 56,357評(píng)論 1 283
  • 正文 為了忘掉前任侈询,我火速辦了婚禮,結(jié)果婚禮上糯耍,老公的妹妹穿的比我還像新娘扔字。我一直安慰自己,他們只是感情好温技,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,412評(píng)論 5 384
  • 文/花漫 我一把揭開白布革为。 她就那樣靜靜地躺著,像睡著了一般舵鳞。 火紅的嫁衣襯著肌膚如雪震檩。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,760評(píng)論 1 289
  • 那天蜓堕,我揣著相機(jī)與錄音抛虏,去河邊找鬼博其。 笑死,一個(gè)胖子當(dāng)著我的面吹牛嘉蕾,可吹牛的內(nèi)容都是我干的贺奠。 我是一名探鬼主播,決...
    沈念sama閱讀 38,904評(píng)論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼错忱,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼!你這毒婦竟也來了挂据?” 一聲冷哼從身側(cè)響起以清,我...
    開封第一講書人閱讀 37,672評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎崎逃,沒想到半個(gè)月后掷倔,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,118評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡个绍,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,456評(píng)論 2 325
  • 正文 我和宋清朗相戀三年勒葱,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片巴柿。...
    茶點(diǎn)故事閱讀 38,599評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡凛虽,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出广恢,到底是詐尸還是另有隱情凯旋,我是刑警寧澤,帶...
    沈念sama閱讀 34,264評(píng)論 4 328
  • 正文 年R本政府宣布钉迷,位于F島的核電站至非,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏糠聪。R本人自食惡果不足惜荒椭,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,857評(píng)論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望舰蟆。 院中可真熱鬧趣惠,春花似錦、人聲如沸夭苗。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽题造。三九已至傍菇,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間界赔,已是汗流浹背丢习。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評(píng)論 1 264
  • 我被黑心中介騙來泰國打工牵触, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人咐低。 一個(gè)月前我還...
    沈念sama閱讀 46,286評(píng)論 2 360
  • 正文 我出身青樓揽思,卻偏偏與公主長得像,于是被迫代替她去往敵國和親见擦。 傳聞我的和親對(duì)象是個(gè)殘疾皇子钉汗,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,465評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容