iOS UIimage 切圓角避免離屏渲染 本文僅記錄開發過程中遇到的問題，僅供參考

本文僅記錄開發過程中遇到的問題，僅供參考

在項目性能優化中，離屏渲染是一定要避免的，今天說說，在對UIimageView中的image進行切圓角時出現了一個”詭異“的問題

關於對圖片進行切圓角處理時，並避免離屏渲染，其中YYKit和SDWebImageView都有對應的處理方法，我們可以看下代碼

• YYKit中的處理方式：

- (UIImage *)yy_imageByRoundCornerRadius:(CGFloat)radius {
    return [self yy_imageByRoundCornerRadius:radius borderWidth:0 borderColor:nil];
}

- (UIImage *)yy_imageByRoundCornerRadius:(CGFloat)radius
                             borderWidth:(CGFloat)borderWidth
                             borderColor:(UIColor *)borderColor {
    return [self yy_imageByRoundCornerRadius:radius corners:UIRectCornerAllCorners borderWidth:borderWidth borderColor:borderColor borderLineJoin:kCGLineJoinMiter];
}

- (UIImage *)yy_imageByRoundCornerRadius:(CGFloat)radius
                                 corners:(UIRectCorner)corners
                             borderWidth:(CGFloat)borderWidth
                             borderColor:(UIColor *)borderColor
                          borderLineJoin:(CGLineJoin)borderLineJoin {
    
    if (corners != UIRectCornerAllCorners) {
        UIRectCorner tmp = 0;
        if (corners & UIRectCornerTopLeft) tmp |= UIRectCornerBottomLeft;
        if (corners & UIRectCornerTopRight) tmp |= UIRectCornerBottomRight;
        if (corners & UIRectCornerBottomLeft) tmp |= UIRectCornerTopLeft;
        if (corners & UIRectCornerBottomRight) tmp |= UIRectCornerTopRight;
        corners = tmp;
    }
    
    UIGraphicsBeginImageContextWithOptions(self.size, NO, self.scale);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height);
    CGContextScaleCTM(context, 1, -1);
    CGContextTranslateCTM(context, 0, -rect.size.height);
    
    CGFloat minSize = MIN(self.size.width, self.size.height);
    if (borderWidth < minSize / 2) {
        UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectInset(rect, borderWidth, borderWidth) byRoundingCorners:corners cornerRadii:CGSizeMake(radius, borderWidth)];
        [path closePath];
        
        CGContextSaveGState(context);
        [path addClip];
        CGContextDrawImage(context, rect, self.CGImage);
        CGContextRestoreGState(context);
    }
    
    if (borderColor && borderWidth < minSize / 2 && borderWidth > 0) {
        CGFloat strokeInset = (floor(borderWidth * self.scale) + 0.5) / self.scale;
        CGRect strokeRect = CGRectInset(rect, strokeInset, strokeInset);
        CGFloat strokeRadius = radius > self.scale / 2 ? radius - self.scale / 2 : 0;
        UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:strokeRect byRoundingCorners:corners cornerRadii:CGSizeMake(strokeRadius, borderWidth)];
        [path closePath];
        
        path.lineWidth = borderWidth;
        path.lineJoinStyle = borderLineJoin;
        [borderColor setStroke];
        [path stroke];
    }
    
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}

• SDWebImageView的處理方法

SDImageRoundCornerTransformer *tr = [SDImageRoundCornerTransformer transformerWithRadius:10.0 corners:UIRectCornerAllCorners borderWidth:0.0f borderColor:[UIColor redColor]];
    
    SDWebImageMutableContext *context = [[SDWebImageMutableContext alloc] init];
    [context setValue:tr forKey:SDWebImageContextImageTransformer];
    
    [_subImageView sd_setImageWithURL:[NSURL URLWithString:bannerAddImg] placeholderImage:nil options:SDWebImageProgressiveLoad context:context progress:nil completed:^(UIImage * _Nullable image, NSError * _Nullable error, SDImageCacheType cacheType, NSURL * _Nullable imageURL) {
        if (image) {
            weakSelf.subImageView.image = image;
        }
    }];
    

還有其他的方式，不過思路大致都一樣，自己加一個layer或者貝塞爾曲線畫一個，在此不多說了。

那麼問題來了，如果我測試代碼如下：

WEAK_SELF;
    [_subImageView sd_setImageWithURL:[NSURL URLWithString:bannerAddImg] placeholderImage:nil options:SDWebImageProgressiveLoad completed:^(UIImage * _Nullable image, NSError * _Nullable error, SDImageCacheType cacheType, NSURL * _Nullable imageURL) {
        if (image) {
            image = [image yy_imageByRoundCornerRadius:12.0 imageView:weakSelf.subImageView];
            weakSelf.subImageView.image = image;
        }
    }];

你會奇怪的發現，不管我怎麼設置radius（除非設置了圖片的寬的一半），總是看不到我們想要的切掉圓角的圖片，那麼問題是什麼呢？
你可以這樣想，我給你一個 200 X 200 的UIimagView ，然後在該imageView 放一個 1000 X1000 的圖片，結果會怎麼樣呢， 你會看到，當你不管是利用YYKit 還是SDImageView 如果設置radius = 10 的時候，你會很詫異，爲什麼圖片還是方的，沒有效果😢，請看下圖

黃色的圓圈就是你看到的UIimageView

---

此時的我不淡定了 😂😂😂😂

---

難道是三方庫的bug，而且是兩個三方庫都有bug，我不敢相信，一定是我自己搞錯了。。。。

但是經過你仔細觀察上圖，你會發現，其實image確實是被切了的，只是，你看不到切得圓角，因爲我們的image是自適應紅色的（200x200）的UIimageView 所以，切完圓角然後再設置給UIimageView，你依然看不到圓角，那怎麼解決了，此時你看了圖應該知道了吧，就是把radius設置的足夠的大，你絕對就可以看到了，大佬不妨可以試試，保你滿意，哈哈😂😂

這個可以說是三方庫的bug，但也不全是，爲啥你非要給一個小的UIImageView 設置一個這麼大的圖片呢😩😩😩 我也很無奈，測試真是太會玩了，總是給我想不到的驚喜啊！！🐶🐶🐶

那麼問題怎麼解決呢，一句話，就是自己再計算比例唄，就是 radius/imageView的寬高的最小值 = 真正的radius/image的寬高的最小值， 有的童鞋會問，爲啥是寬高最小值，因爲一般我們切圓角都是用寬高的最小值，這樣的話，我們就可以計算出一個我們正常想要的radius了，直接上代碼：

- (CGFloat)configureImageRadius:(CGFloat)radius image:(UIImage *)image img:(UIImageView *)img {

    [img.superview layoutIfNeeded];
    [img.superview setNeedsLayout];

    CGFloat image_min = MIN(image.size.width, image.size.height);
    CGFloat ui_min = MIN(img.pf_width, img.pf_height);
    CGFloat imageRadius = radius*(image_min)/ui_min;

    return imageRadius;
}

按照上述，不管你是多大的圖片，放在UIimageView上，按照計算過後的radius，就不會有問題了，親測，有效果，有問題可以留言討論哦~~~