DSImageViewRound

iOS圖片高性能設置圓角

一般我們在iOS開發的過程中設置圓角都是如下這樣設置的。

 avatarImageView.clipsToBounds = YES;
 [avatarImageView.layer setCornerRadius:50];

這樣設置會觸發離屏渲染，比較消耗性能。比如當一個頁面上有十幾頭像這樣設置了圓角
 會明顯感覺到卡頓。
注意：ios9.0之后對UIImageView的圓角設置做了優化，UIImageView這樣設置圓角
 不會觸發離屏渲染，ios9.0之前還是會觸發離屏渲染。而UIButton還是都會觸發離屏渲染。</pre> 
  
 
  
所有如果要高性能的設置圓角就需要找另外的方法了。下面是我找到的一些方法
 
  
 
  
設置圓角的方法
 
  
 
   
 
直接使用setCornerRadius
 
    
 
     
這種就是最常用的，也是最耗性能的。
 
    
 
 
   
 
setCornerRadius設置圓角之后，shouldRasterize=YES光柵化
 
    
 
     
avatarImageView.clipsToBounds = YES; [avatarImageView.layer setCornerRadius:50]; avatarImageView.layer.shouldRasterize = YES;
 
     
shouldRasterize=YES設置光柵化，可以使離屏渲染的結果緩存到內存中存為位圖， 使用的時候直接使用緩存，節省了一直離屏渲染損耗的性能。
 
     
但是如果layer及sublayers常常改變的話，它就會一直不停的渲染及刪除緩存重新 創建緩存，所以這種情況下建議不要使用光柵化，這樣也是比較損耗性能的。
 
     
問題：我發現UIImageView上加載網絡圖片使用光柵化會有一點模糊，而UIButton 上使用光柵化沒有模糊，不知道為什么？求大神解答！
 
    
 
 
   
 
直接覆蓋一張中間為圓形透明的圖片
 
    
 
     
這種方法就是多加了一張透明的圖片，GPU計算多層的混合渲染blending也是會消耗 一點性能的，但比第一種方法還是好上很多的。
 
    
 
 
   
 
Core Graphics繪制圓角
 
    
 
     
這種方式性能最好，但是UIButton上不知道怎么繪制，可以用UIimageView添加個 點擊手勢當做UIButton使用。
 
     
  UIGraphicsBeginImageContextWithOptions(avatarImageView.bounds.size, NO, [UIScreen mainScreen].scale);
  [[UIBezierPath bezierPathWithRoundedRect:avatarImageView.bounds cornerRadius:50] addClip];
  [image drawInRect:avatarImageView.bounds];
  avatarImageView.image = UIGraphicsGetImageFromCurrentImageContext();
  UIGraphicsEndImageContext();
 
     
這段方法可以寫在SDWebImage的completed回調里，也可以在UIImageView+WebCache.h 里添加一個方法，isClipRound判斷是否切圓角，把上面繪制圓角的方法封裝到里面。
 
     
  - (void)sd_setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholder options:(SDWebImageOptions)options isClipRound:(BOOL)isRound progress:(SDWebImageDownloaderProgressBlock)progressBlock completed:(SDWebImageCompletionBlock)completedBlock;
    
 
 
  
 
  
 
  
使用Instruments的Core Animation查看性能
 
  
 
   
 
Color Offscreen-Rendered Yellow
 
    
 
     
開啟后會把那些需要離屏渲染的圖層高亮成黃色，這就意味著黃色圖層可能存在性能問題。
 
    
 
 
   
 
Color Hits Green and Misses Red
 
    
 
     
如果shouldRasterize被設置成YES，對應的渲染結果會被緩存，如果圖層是綠色，就表示這些緩存被復用；如果是紅色就表示緩存會被重復創建，這就表示該處存在性能問題了。
 
    
 
 
  
 
  
用Instruments測試得
 
  
 
   
 
第一種方法，ios9.0之前UIImageView和UIButton都高亮為黃色。ios9.0之后只有UIButton高亮為黃色。
 
 
   
 
第二種方法UIImageView和UIButton都高亮為綠色，但UIImageView加載網絡圖片后會有一點模糊
 
 
   
 
第三種方法無任何高亮，說明沒離屏渲染
 
 
   
 
第四種方法無任何高亮，說明沒離屏渲染
 
 
  
 
  
項目地址： https://github.com/walkdianzi/DSImageViewRound