iOS - 实现圆角的方法总结

在日常的项目中,经常有将一个图片或者View设置成圆角的情况。通常我遇到这种情况的时候都会使用layer来实现效果,但是使用layer来出现离屏渲染的情况;
离屏渲染,指的是GPU在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作。会频繁的进行上下文之间的切换,这是非常的消耗性能的。
所以今天我来总结一下都有哪些方法能够实现圆角效果,新手说的不好勿喷。。。。。

‘打一个广告:本人目前离职状态(公司资金出现问题,原部门人员全体被迫离职。。。)如果有对我感兴趣的请给我留言或者简书私聊我,谢谢 !‘

一、layer实现

正如我引文所说的,通过 layercornerRadius 属性可以实现圆角的效果 :

UIImageView *img = [[UIImageView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
imgTest.image = [UIImage imageNamed:@"img.jpg"];
[self.view addSubview:img];
imgTest.layer.cornerRadius = 10; //其实cornerRadius不会产生离屏渲染,但是结合遮罩masks就会有离屏渲染 imgTest.layer.masksToBounds=YES ; //遮罩 裁切多余的部分
二、通过CAShapeLayer+贝塞尔曲线实现
//还可以规定范围UIRectCorner
/*UIRectCornerTopLeft 上左
UIRectCornerTopRight 上右
UIRectCornerBottomLeft 下左
UIRectCornerBottomRight 下右
UIRectCornerAllCorners 全部
*/

UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:img.bounds byRoundingCorners:UIRectCornerAllCorners cornerRadii:CGSizeMake(10, 10)];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
//设置切割的范围和路径
maskLayer.frame = imgTest.bounds;
maskLayer.path = maskPath.CGPath;
mgTest.layer.mask = maskLayer;
三、通过CoreGraphics

这种方法是推荐使用的:

UIGraphicsBeginImageContextWithOptions(imgTest.bounds.size, NO, 0);
//获取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
//设置一个范围
CGRect rect = CGRectMake(0, 0, imgTest.bounds.size.width, img.bounds.size.height);
//给上下文画一个椭圆
CGContextAddEllipseInRect(ctx, rect);
//裁剪
CGContextClip(ctx);
//开始绘图
[img drawRect:img.bounds]

; img.image = UIGraphicsGetImageFromCurrentImageContext(); //结束 UIGraphicsEndImageContext();
四、贝塞尔曲线+CoreGraphics

这种方法是推荐使用的:

//创建新的位图
//size 新位图的大小 opaque 透明开关 scale 缩放因子 设置为0 系统自动匹配
UIGraphicsBeginImageContextWithOptions(img.bounds.size, NO, 0);
//用贝塞尔曲线画一个圆形 addClip 进行切割
[[UIBezierPath bezierPathWithRoundedRect:img.bounds cornerRadius:10] addClip];
//开始绘图
[img drawRect:img.bounds];
 img.image = UIGraphicsGetImageFromCurrentImageContext(); 
//结束画图 
UIGraphicsEndImageContext();

对它的封装:

/**
 按钮的圆角设置
 @param view view类控件
 @param rectCorner UIRectCorner要切除的圆角
 @param borderColor 边框颜色
 @param borderWidth 边框宽度
 @param viewColor view类控件颜色
 */
 - (void)setupRoundedCornersWithView:(UIView *)view cutCorners:(UIRectCorner)rectCorner borderColor:(UIColor *)borderColor borderWidth:(CGFloat)borderWidth viewColor:(UIColor *)viewColor{    
    CAShapeLayer *mask=[CAShapeLayer layer];
    UIBezierPath * path= [UIBezierPath bezierPathWithRoundedRect:view.bounds byRoundingCorners:rectCorner cornerRadii:CGSizeMake(15,10)];
    mask.path=path.CGPath;
    mask.frame=view.bounds;    
    CAShapeLayer *borderLayer=[CAShapeLayer layer];
    borderLayer.path=path.CGPath;
    borderLayer.fillColor = [UIColor clearColor].CGColor;
    borderLayer.strokeColor = borderColor.CGColor;
    borderLayer.lineWidth = borderWidth;
    borderLayer.frame = view.bounds;
    view.layer.mask = mask;    
    [view.layer addSublayer:borderLayer];
 }

参考文献:https://www.jianshu.com/p/f10e1a3ec1cc
https://blog.csdn.net/qq136501564/article/details/51236536
https://www.cnblogs.com/malikun/p/5694513.html

到这里关于圆角的裁截就到这里了,希望大家对菜的抠脚的我大家多多提提意见;谢谢!!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,782评论 1 32
  • 屏幕显示图像的原理: 高中物理应该学过显示器是如何显示图像的:需要显示的图像经过CRT电子枪以极快的速度一行一行的...
    青火阅读 27,902评论 18 104
  • 相比于当前屏幕渲染,离屏渲染的代价是很高的,这也是iOS移动端优化的必要部分。 OpenGL中,GPU屏幕渲染有以...
    一个人在路上走下去阅读 9,156评论 0 74
  • 本文参考:https://imlifengfeng.github.io/article/593/ 一、概述 Ope...
    LUJQ阅读 659评论 2 3
  • 屏幕渲染的原理: 需要显示的图像经过CRT电子枪以极快的速度一行一行的扫描,扫描出来就呈现了一帧画面,随后电子枪又...
    一条鱼的星辰大海阅读 616评论 1 4

友情链接更多精彩内容