本文仅记录开发过程中遇到的问题,仅供参考
在项目性能优化中,离屏渲染是一定要避免的,今天说说,在对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;
}
}];
image.png
你会奇怪的发现,不管我怎么设置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,就不会有问题了,亲测,有效果,有问题可以留言讨论哦~~~
网友评论