iOS-UIImageView圆角设置

作者: FlyElephant | 来源:发表于2018-04-16 11:31 被阅读20次

iOS开发中图片圆角设置是最常见的需求,圆角符合人类视觉安全体验,让人感觉舒适,设置圆角也是非常简单,有五种方式来设置.

CornerRadius.png

cornerRadius圆角设置

cornerRadius是最常见的设置,cornerRadius不会引发离屏渲染,masksToBounds设置才会引发.如果视图中圆角视图比较少,使用masksToBounds不会有太大影响,如果设置比较多页面才会有卡顿.

<pre><code>self.bottomImgView.image = [UIImage imageNamed:@"girl.jpg"]; self.bottomImgView.layer.cornerRadius = 50; self.bottomImgView.layer.masksToBounds = YES;</code></pre>

CAShapeLayer圆角设置

CAShapeLayer设置圆角路径,然后设置UIImageView的layer的mask,跟👆的直接设置圆角相比性能更低.
<pre><code>` self.bottomImgView.image = [UIImage imageNamed:@"girl.jpg"];
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.bottomImgView.bounds byRoundingCorners:UIRectCornerAllCorners cornerRadii:self.bottomImgView.bounds.size];

CAShapeLayer *maskLayer = [[CAShapeLayer alloc]init];
//设置大小
maskLayer.frame = self.bottomImgView.bounds;
maskLayer.path = maskPath.CGPath;
self.bottomImgView.layer.mask = maskLayer;`</code></pre>

UIBezierPath 贝塞尔曲线

UIBezierPath 裁剪出圆形路径,然后在drawRect进行渲染绘制,会导致内存增加.
<pre><code>` self.bottomImgView.image = [UIImage imageNamed:@"girl.jpg"];
//开始对imageView进行画图
UIGraphicsBeginImageContextWithOptions(self.bottomImgView.bounds.size, NO, [UIScreen mainScreen].scale);
//使用贝塞尔曲线画出一个圆形图
[[UIBezierPath bezierPathWithRoundedRect:self.bottomImgView.bounds cornerRadius:self.bottomImgView.frame.size.width] addClip];
[self.bottomImgView drawRect:self.bottomImgView.bounds];

self.bottomImgView.image = UIGraphicsGetImageFromCurrentImageContext();
//结束画图
UIGraphicsEndImageContext();`</code></pre>

Core Graphics设置

SDWebImage在处理图片时CGContext绘制圆角,设置圆角路径.
<pre><code>` int width = self.bottomImgView.frame.size.width * 2;
int height = self.bottomImgView.frame.size.height * 2;
int radius = width / 2;

UIImage *img = [UIImage imageNamed:@"girl.jpg"];
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = CGBitmapContextCreate(NULL, width, height, 8, 4 * width, colorSpace, kCGImageAlphaPremultipliedFirst);
CGRect rect = CGRectMake(0, 0, width, height);

CGContextBeginPath(context);
addRoundedRectToPath(context, rect, radius, radius);
CGContextClosePath(context);
CGContextClip(context);
CGContextDrawImage(context, CGRectMake(0, 0, width, height), img.CGImage);
CGImageRef imageMasked = CGBitmapContextCreateImage(context);
img = [UIImage imageWithCGImage:imageMasked];

CGContextRelease(context);
CGColorSpaceRelease(colorSpace);
CGImageRelease(imageMasked);

self.bottomImgView.image = img;`</code></pre>

辅助方法:
<pre><code>`static void addRoundedRectToPath(CGContextRef context, CGRect rect, float ovalWidth,
float ovalHeight)
{
float fw, fh;

if (ovalWidth == 0 || ovalHeight == 0)
{
    CGContextAddRect(context, rect);
    return;
}

CGContextSaveGState(context);
CGContextTranslateCTM(context, CGRectGetMinX(rect), CGRectGetMinY(rect));
CGContextScaleCTM(context, ovalWidth, ovalHeight);
fw = CGRectGetWidth(rect) / ovalWidth;
fh = CGRectGetHeight(rect) / ovalHeight;

CGContextMoveToPoint(context, fw, fh/2);  // Start at lower right corner
CGContextAddArcToPoint(context, fw, fh, fw/2, fh, 1);  // Top right corner
CGContextAddArcToPoint(context, 0, fh, 0, fh/2, 1); // Top left corner
CGContextAddArcToPoint(context, 0, 0, fw/2, 0, 1); // Lower left corner
CGContextAddArcToPoint(context, fw, 0, fw, fh/2, 1); // Back to lower right

CGContextClosePath(context);
CGContextRestoreGState(context);

}`</code></pre>

背景图片

圆角设置可以先让UI切一张背景透明的圆角图片作为子视图,最后设置图片,即可形成圆角图片.
<pre><code>` UIImageView *bgImgView = [[UIImageView alloc] initWithFrame:self.bottomImgView.bounds];
bgImgView.image = [UIImage imageNamed:@"circle_bg"];
[self.bottomImgView addSubview:bgImgView];

self.bottomImgView.image = [UIImage imageNamed:@"girl.jpg"];`</code></pre>

参考资料:
[iOS] 图像处理 - 一种高效裁剪图片圆角的算法
iOS图片设置圆角性能问题
小心别让圆角成了你列表的帧数杀手
圆角卡顿刨根问底

相关文章

  • iOS-UIImageView圆角设置

    iOS开发中图片圆角设置是最常见的需求,圆角符合人类视觉安全体验,让人感觉舒适,设置圆角也是非常简单,有五种方式来...

  • Image

    直接圆角图片 设置圆角图片度数 设置圆角图片带灰色圆角边框 设置圆角图片带灰色圆角边框带阴影

  • iOS 设置UI控件圆角

    一: 设置UIView上方圆角或者下方圆角 //设置UITableView section 圆角 设置好以后就这样了

  • iOS Masonry布局(四) - 视图设置圆角

    视图设置任意圆角 Masonry布局视图设置圆角 若使用Masonry布局的视图设置后发现,设置的圆角不起作用。这...

  • iOS Masonry - 视图设置圆角

    视图设置任意圆角 Masonry布局视图设置圆角 若使用Masonry布局的视图设置后发现,设置的圆角不起作用。这...

  • 按钮圆角

    //设置为圆角 [<#name#>.layer setMasksToBounds:YES]; //设置圆角弧度 [...

  • 玩转CALayer视觉效果

    圆角: cornerRadius 设置圆角的半径 边框: borderWidth 和borderColor 设置边...

  • 2019-01-31

    设置柱子的圆角。itemStyle 设置上右下左的圆角弧度

  • iOS设置圆角的四种方法

    原文iOS设置圆角的四种方法iOS设置圆角的方法及指定圆角的位置 一、设置CALayer的cornerRadius...

  • 边框效果-css-v1.0.0

    半透边框 通过设置颜色的透明度实现。 框内圆角 方式1:为元素设置圆角,外层设置轮廓outline。圆角与直角之间...

网友评论

    本文标题:iOS-UIImageView圆角设置

    本文链接:https://www.haomeiwen.com/subject/dlqdkxtx.html