CAShapeLayer的使用

之前在項目中,經(jīng)常會需要設(shè)置圓角的一些屬性或者一些動畫,經(jīng)常會涉及到layer層的東西,而如果需要我們自定義圖形的話,那么我們經(jīng)常就會用到CAShapeLayer來創(chuàng)建了.而且經(jīng)常與其一起搭配使用的是UIBezierPath.這兩天比較閑,就寫了這篇博客來記錄下自己寫的一個小Demo,雖然使用起來很簡單,但是偶爾想不起來如何設(shè)置的話,也是一件很糾結(jié)的事情…

如果我們要繪制一個幾何圖形的話,我們可以使用簡單的UIBezierPath來繪制,但是這樣的話就必須在UIView的drawRect方法里來繪制或者調(diào)用,但是drawRect：方法不能手動顯式調(diào)用，必須通過調(diào)用setNeedsDisplay或者setNeedsDisplayInRect匪蟀，讓系統(tǒng)自動調(diào)該方法,如果我們需要即時的繪圖的話,這對我們來說難免是一個約束,但是使用CAShapeLayer和UIBezierPath的話,則可以讓我們放開雙手,隨時隨地的進(jìn)行繪圖.該博客只是示范CAShapeLayer的簡單使用,下一篇博客我會具體說一下UIBezierPath的使用.

Demo效果圖：

1. CAShaperLayer簡介及使用注意
   CAShapeLayer是CALayer的子類,但是要比CALayer更加的靈活,也為我們提供了更多樣的設(shè)置元素.使用CAShapeLayer的話,需要使用一個給定的Path來設(shè)置他的繪圖路線,這個path就是由UIBezierPath來提供的.

   CAShapeLayer在初始化時也需要給一個frame值,但是,它本身沒有形狀,它的形狀來源于你給定的一個path,然后它去取CGPath值,它與CALayer有著很大的區(qū)別廢話不多說,看代碼,代碼很簡單,我有詳細(xì)的注解.看代碼是最好的交流方式.

2. 代碼講解

   • 首先創(chuàng)建創(chuàng)建CALayer對象并且設(shè)置frame,將shapeLayer放在視圖的中心
     CAShapeLayer *shapeLayer = [CAShapeLayer layer];
     shapeLayer.frame = CGRectMake(0, 0, 200, 200);
     shapeLayer.position = self.view.center;

   • 使用貝塞爾曲線繪制一個圓形的路徑,并且將shapeLayer的路徑設(shè)置為繪制好的貝塞爾曲線(圓形)
     UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect: CGRectMake(0, 0, 200, 200)];
     path.lineCapStyle = kCGLineCapRound; //貝塞爾線段端點格式 (該demo暫不做詳細(xì)介紹 請參考我的其他博文有詳細(xì)介紹)
     path.lineJoinStyle = kCGLineJoinRound; //貝塞爾線段連接點格式
     shapeLayer.path = path.CGPath;

   • 設(shè)置填充顏色和背景顏色
     shapeLayer.fillColor = [UIColor redColor].CGColor;
     shapeLayer.backgroundColor = [UIColor greenColor].CGColor;

   • 設(shè)置邊框?qū)挾群瓦吙蝾伾?這個地方說的是住背景邊框,并不是我們繪制path
     shapeLayer.borderWidth = 4;
     shapeLayer.borderColor = [UIColor blueColor].CGColor;

   • 設(shè)置陰影的顏色以及偏移量和透明度,透明度的屬性默認(rèn)是0.0 所以如果我們不設(shè)置透明度的屬性的話,那么將看不到陰影
     ,需要說明的是,我們添加的這個陰影暫時是看不到效果的,原因我會在后面講解.
     shapeLayer.shadowColor = [UIColor grayColor].CGColor;
     shapeLayer.shadowOffset = CGSizeMake(5, 15);
     shapeLayer.shadowOpacity = 0.6;

   • 設(shè)置圓角屬性,需要注意的是,cornerRadius設(shè)置的是圓角的值,maskToBounds設(shè)置的是切除超過主視圖范圍的內(nèi)容,在UIView里這一屬性對應(yīng)的方法是clipsToBounds.在后面我會具體講解這個概念
     shapeLayer.cornerRadius = 13;
     shapeLayer.masksToBounds = true;
     值得一提的是,當(dāng)我們設(shè)置masksToBounds屬性為true的時候,圖層屬性的混合體被指定為在未預(yù)合成之前不能直接在屏幕中繪制扣囊，所以就需要屏幕外渲染被喚起,這就是我們平常說的離屏渲染.如果說需要渲染的控件不多的話,那么對程序的性能不會咋造成太大的影響,但是如果需要渲染的控件很多的話,比如在tableView里需要渲染很多控件,那么就會導(dǎo)致界面卡頓的現(xiàn)象十分嚴(yán)重.關(guān)于離屏渲染這個問題,我會在以后的博客中進(jìn)行討論.

   • 設(shè)置路徑寬度(使用貝塞爾曲線繪制的路徑寬度)以及路徑顏色
     shapeLayer.lineWidth = 20;
     shapeLayer.strokeColor = [UIColor blackColor].CGColor;

   • 將主圖層添加到視圖圖層上去并顯示出來
     [self.view.layer addSublayer:shapeLayer];

3. 代碼中容易混淆的地方

   • shapeLayer.position = self.view.center;
     只有l(wèi)ayer層才有position屬性,UIView有center屬性,我們使用view.layer.position也可以獲取到layer的position.這行代碼的意思是,將自己創(chuàng)建的shapeLayer放在父視圖的中央位置.
   • 我們使用shapeLayer.masksToBounds對我們創(chuàng)建的shapeLayer切了圓角,這個操作主要是將超出主視圖顯示區(qū)域的內(nèi)容切除掉,你肯定很奇怪為什么我們添加了圓角但是看不到效果,其實是因為我們添加的陰影是超出父視圖范圍的,而且我們又將masksToBounds設(shè)置為true,這就意味著,添加的陰影將會被切除掉,因為它是超出父視圖范圍的.

   如果我們設(shè)置這個屬性的為false的話,那么超出主視圖范圍的屬性也是可見的,效果如下所示:

同時我們可以看到,由于設(shè)置的path比較寬(shapeLayer.lineWidth = 20),在我們設(shè)置完maskToBouns屬性之后,超出主視圖的邊線也被切除掉了.
如下所示:

image

經(jīng)過我的實驗,如果我們設(shè)置路徑寬度為20的話,那么當(dāng)繪制的時候,路徑會向內(nèi)外各延伸10個單位,然后完成路徑的繪制,比如我們繪制一個內(nèi)切于正方形的圓,設(shè)置路線寬度為20,那么效果如下所示:

4 . 源碼

想看效果的話可以去gitHub上下載我的工程:https://github.com/TheRuningAnt/TestCAShapeLayer.git

或者自行拷貝代碼,粘貼運行,各位看官請便:

    CAShapeLayer *shapeLayer = [CAShapeLayer layer];   //創(chuàng)建CALayer對象
    shapeLayer.frame = CGRectMake(0, 0, 200, 200);   //設(shè)置frame
    shapeLayer.position = self.view.center;           //將shapeLayer放在視圖的中心

    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect: CGRectMake(0, 0, 200, 200)]; //使用貝塞爾曲線繪制一個圓形的路徑
    path.lineCapStyle = kCGLineCapRound;    //貝塞爾線段端點格式  (該demo暫不做詳細(xì)介紹 請參考我的其他博文有詳細(xì)介紹)
    path.lineJoinStyle = kCGLineJoinRound;  //貝塞爾線段連接點格式 (該demo暫不做詳細(xì)介紹 請參考我的其他博文有詳細(xì)介紹)
    shapeLayer.path = path.CGPath;   //將shapeLayer的路徑設(shè)置為繪制好的貝塞爾曲線(圓形)

    shapeLayer.fillColor = [UIColor redColor].CGColor;  //設(shè)置填充顏色
    shapeLayer.backgroundColor = [UIColor greenColor].CGColor;  //設(shè)置背景顏色

    shapeLayer.borderWidth = 4;                          //設(shè)置邊框?qū)挾?    shapeLayer.borderColor = [UIColor blueColor].CGColor; //設(shè)置邊框顏色

    shapeLayer.shadowColor = [UIColor grayColor].CGColor;   //設(shè)置陰影顏色
    shapeLayer.shadowOffset = CGSizeMake(5, 15);             //設(shè)置陰影偏移量
    shapeLayer.shadowOpacity = 0.6;                        //設(shè)置陰影的透明度  默認(rèn)為透明的 0.0

    shapeLayer.cornerRadius = 13;             //設(shè)置圓角
    shapeLayer.masksToBounds = true;          //將超出主圖層范圍的內(nèi)容切掉  在UIView里這一屬性對應(yīng)的方法是clipsToBounds

    shapeLayer.lineWidth = 20;               //設(shè)置路徑寬度(使用貝塞爾曲線繪制的路徑寬度)
    shapeLayer.strokeColor = [UIColor blackColor].CGColor;  //設(shè)置路徑顏色

    [self.view.layer addSublayer:shapeLayer];  //將主圖層添加到視圖圖層上去并顯示出來