CAShapeLayer的使用

CAShapeLayer的使用

以前在項目中,常常會須要設置圓角的一些屬性或者一些動畫,常常會涉及到layer層的東西,而若是須要咱們自定義圖形的話,那麼咱們常常就會用到CAShapeLayer來建立了.並且常常與其一塊兒搭配使用的是UIBezierPath.這兩天比較閒,就寫了這篇博客來記錄下本身寫的一個小Demo,雖然使用起來很簡單,可是偶爾想不起來如何設置的話,也是一件很糾結的事情…

若是咱們要繪製一個幾何圖形的話,咱們可使用簡單的UIBezierPath來繪製,可是這樣的話就必須在UIView的drawRect方法裏來繪製或者調用,可是drawRect：方法不能手動顯示調用，必須經過調用setNeedsDisplay或者setNeedsDisplayInRect，讓系統自動調該方法,若是咱們須要即時的繪圖的話,這對咱們來講不免是一個約束,可是使用CAShapeLayer和UIBezierPath的話,則可讓咱們放開雙手,隨時隨地的進行繪圖.該博客只是示範CAShapeLayer的簡單使用,下一篇博客我會具體說一下UIBezierPath的使用. Demo效果圖

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

   CAShapeLayer在初始化時也須要給一個frame值,可是,它自己沒有形狀,它的形狀來源於你給定的一個path,而後它去取CGPath值,它與CALayer有着很大的區別廢話很少說,看代碼,代碼很簡單,我有詳細的註解.看代碼是最好的交流方式.

2. 代碼講解

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

   • 使用貝塞爾曲線繪製一個圓形的路徑,而且將shapeLayer的路徑設置爲繪製好的貝塞爾曲線(圓形) 
     UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect: CGRectMake(0, 0, 200, 200)]; 
     path.lineCapStyle = kCGLineCapRound; //貝塞爾線段端點格式 (該demo暫不作詳細介紹 請參考個人其餘博文有詳細介紹) 
     path.lineJoinStyle = kCGLineJoinRound; //貝塞爾線段鏈接點格式 
     shapeLayer.path = path.CGPath;

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

   • 設置邊框寬度和邊框顏色,這個地方說的是住背景邊框,並非咱們繪製path 
     shapeLayer.borderWidth = 4; 
     shapeLayer.borderColor = [UIColor blueColor].CGColor;

   • 設置陰影的顏色以及偏移量和透明度,透明度的屬性默認是0.0 因此若是咱們不設置透明度的屬性的話,那麼將看不到陰影 
     ,須要說明的是,咱們添加的這個陰影暫時是看不到效果的,緣由我會在後面講解. 
     shapeLayer.shadowColor = [UIColor grayColor].CGColor; 
     shapeLayer.shadowOffset = CGSizeMake(5, 15); 
     shapeLayer.shadowOpacity = 0.6;

   • 設置圓角屬性,須要注意的是,cornerRadius設置的是圓角的值,maskToBounds設置的是切除超過主視圖範圍的內容,在UIView裏這一屬性對應的方法是clipsToBounds.在後面我會具體講解這個概念 
     shapeLayer.cornerRadius = 13; 
     shapeLayer.masksToBounds = true; 
     值得一提的是,當咱們設置masksToBounds屬性爲true的時候,圖層屬性的混合體被指定爲在未預合成以前不能直接在屏幕中繪製，因此就須要屏幕外渲染被喚起,這就是咱們日常說的離屏渲染.若是說須要渲染的控件很少的話,那麼對程序的性能不會咋形成太大的影響,可是若是須要渲染的控件不少的話,好比在tableView裏須要渲染不少控件,那麼就會致使界面卡頓的現象十分嚴重.關於離屏渲染這個問題,我會在之後的博客中進行討論.

   • 設置路徑寬度(使用貝塞爾曲線繪製的路徑寬度)以及路徑顏色 
     shapeLayer.lineWidth = 20; 
     shapeLayer.strokeColor = [UIColor blackColor].CGColor;
   • 將主圖層添加到視圖圖層上去並顯示出來 
     [self.view.layer addSublayer:shapeLayer];

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

   • shapeLayer.position = self.view.center; 
     只有layer層纔有position屬性,UIView有center屬性,咱們使用view.layer.position也能夠獲取到layer的position.這行代碼的意思是,將本身建立的shapeLayer放在父視圖的中央位置.
   • 咱們使用shapeLayer.masksToBounds對咱們建立的shapeLayer切了圓角,這個操做主要是將超出主視圖顯示區域的內容切除掉,你確定很奇怪爲何咱們添加了圓角可是看不到效果,實際上是由於咱們添加的陰影是超出父視圖範圍的,並且咱們又將masksToBounds設置爲true,這就意味着,添加的陰影將會被切除掉,由於它是超出父視圖範圍的.

   若是咱們設置這個屬性的爲false的話,那麼超出主視圖範圍的屬性也是可見的,效果以下所示:

同時咱們能夠看到,因爲設置的path比較寬(shapeLayer.lineWidth = 20),在咱們設置完maskToBouns屬性以後,超出主視圖的邊線也被切除掉了. 
以下所示: 

通過個人實驗,若是咱們設置路徑寬度爲20的話,那麼當繪製的時候,路徑會向內外各延伸10個單位,而後完成路徑的繪製,好比咱們繪製一個內切於正方形的圓,設置路線寬度爲20,那麼效果以下所示:

4 . 源碼

想看效果的話能夠去gitHub上下載個人工程:https://github.com/TheRuningAnt/TestCAShapeLayer.git

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

CAShapeLayer *shapeLayer = [CAShapeLayer layer]; //建立CALayer對象 shapeLayer.frame = CGRectMake(0, 0, 200, 200); //設置frame shapeLayer.position = self.view.center; //將shapeLayer放在視圖的中心 UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect: CGRectMake(0, 0, 200, 200)]; //使用貝塞爾曲線繪製一個圓形的路徑 path.lineCapStyle = kCGLineCapRound; //貝塞爾線段端點格式 (該demo暫不作詳細介紹 請參考個人其餘博文有詳細介紹) path.lineJoinStyle = kCGLineJoinRound; //貝塞爾線段鏈接點格式 (該demo暫不作詳細介紹 請參考個人其餘博文有詳細介紹) shapeLayer.path = path.CGPath; //將shapeLayer的路徑設置爲繪製好的貝塞爾曲線(圓形) shapeLayer.fillColor = [UIColor redColor].CGColor; //設置填充顏色 shapeLayer.backgroundColor = [UIColor greenColor].CGColor; //設置背景顏色 shapeLayer.borderWidth = 4; //設置邊框寬度 shapeLayer.borderColor = [UIColor blueColor].CGColor; //設置邊框顏色 shapeLayer.shadowColor = [UIColor grayColor].CGColor; //設置陰影顏色 shapeLayer.shadowOffset = CGSizeMake(5, 15); //設置陰影偏移量 shapeLayer.shadowOpacity = 0.6; //設置陰影的透明度 默認爲透明的 0.0 shapeLayer.cornerRadius = 13; //設置圓角 shapeLayer.masksToBounds = true; //將超出主圖層範圍的內容切掉 在UIView裏這一屬性對應的方法是clipsToBounds shapeLayer.lineWidth = 20; //設置路徑寬度(使用貝塞爾曲線繪製的路徑寬度) shapeLayer.strokeColor = [UIColor blackColor].CGColor; //設置路徑顏色 [self.view.layer addSublayer:shapeLayer]; //將主圖層添加到視圖圖層上去並顯示出來