［一句秒懂］ios圓形圖片顯示

簡介：

1:通常狀況下，在tableView上顯示一張圓形圖片（從網絡下載好的圖片），按照常規方法設置layer圖層的話，用戶會感受有些卡頓現象，不推薦使用！

2:如今我推薦的是一個比較流暢的作法：使用quartz2D繪製一個圓形上下文圖形，而後剪切，將原來控件繪製上去會自動剪切成圓形，而後將網絡下載圖片貼上去便可！

 

步驟：

1－在image分類裏面寫一個方法，繪製成圓形圖片

/**
 * 返回一張圓形圖片 (推薦使用)
 */
- (instancetype)circleImage;

/**
 * 返回一張圓形圖片
 */
+ (instancetype)circleImageNamed:(NSString *)name;




- (instancetype)circleImage
{
    // 開啓圖形上下文
    UIGraphicsBeginImageContext(self.size);
    
    // 得到上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    // 矩形框
    CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height);
    
    // 添加一個圓
    CGContextAddEllipseInRect(ctx, rect);
    
    // 裁剪(裁剪成剛纔添加的圖形形狀)
    CGContextClip(ctx);
    
    // 往圓上面畫一張圖片
    [self drawInRect:rect];
    
    // 得到上下文中的圖片
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    
    // 關閉圖形上下文
    UIGraphicsEndImageContext();
    
    return image;
}

+ (instancetype)circleImageNamed:(NSString *)name
{
    return [[self imageNamed:name] circleImage];
}

 2-在UIImageView中寫一個分類方法：從網絡下載下來的圖片，經過SDWebImage框架異步下載和緩存圖片，直接在這裏處理網絡下載下來的圖片變成圓形圖片便可

/**
 *  設置圓形圖像
 */
- (void)setHeader:(NSString *)url;



#pragma mark - 選擇－設置圓形圖像

- (void)setHeader:(NSString *)url
{
    [self setCircleHeader:url];
}


#pragma mark - 矩形圖像

- (void)setRectHeader:(NSString *)url
{
    [self sd_setImageWithURL:[NSURL URLWithString:url] placeholderImage:[UIImage imageNamed:@"defaultUserIcon"]];
}

#pragma mark - 圓形圖像

- (void)setCircleHeader:(NSString *)url
{
    WS(weakSelf);
    UIImage *placeholder = [[UIImage imageNamed:@"defaultUserIcon"] circleImage];
    [self sd_setImageWithURL:[NSURL URLWithString:url] placeholderImage:placeholder completed:
     ^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
         // 若是圖片下載失敗，就不作任何處理，按照默認的作法：會顯示佔位圖片
         if (image == nil) return;
         
         weakSelf.image = [image circleImage];
     }];
}

3-開始使用了：一句話秒懂吧！

[self.rightImageView setHeader:model.avatar];