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，就不会有问题了，亲测，有效果，有问题可以留言讨论哦~~~