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

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

關(guān)于對圖片進(jìn)行切圓角處理時，并避免離屏渲染，其中YYKit和SDWebImageView都有對應(yīng)的處理方法，我們可以看下代碼

• 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;
        }
    }];

image.png

你會奇怪的發(fā)現(xiàn)，不管我怎么設(shè)置radius（除非設(shè)置了圖片的寬的一半），總是看不到我們想要的切掉圓角的圖片，那么問題是什么呢？
你可以這樣想，我給你一個 200 X 200 的UIimagView ，然后在該imageView 放一個 1000 X1000 的圖片，結(jié)果會怎么樣呢， 你會看到，當(dāng)你不管是利用YYKit 還是SDImageView 如果設(shè)置radius = 10 的時候，你會很詫異，為什么圖片還是方的，沒有效果??，請看下圖

image.png

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

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

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

但是經(jīng)過你仔細(xì)觀察上圖，你會發(fā)現(xiàn)，其實image確實是被切了的，只是，你看不到切得圓角，因為我們的image是自適應(yīng)紅色的（200x200）的UIimageView 所以，切完圓角然后再設(shè)置給UIimageView，你依然看不到圓角，那怎么解決了，此時你看了圖應(yīng)該知道了吧，就是把radius設(shè)置的足夠的大，你絕對就可以看到了，大佬不妨可以試試，保你滿意，哈哈????

這個可以說是三方庫的bug，但也不全是，為啥你非要給一個小的UIImageView 設(shè)置一個這么大的圖片呢?????? 我也很無奈，測試真是太會玩了，總是給我想不到的驚喜?。。??????

那么問題怎么解決呢，一句話，就是自己再計算比例唄，就是 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，就不會有問題了，親測，有效果，有問題可以留言討論哦~~~