ios – 实现圆角

栏目: IOS · 发布时间: 5年前

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

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

UIImageView *img = [[UIImageView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
imgTest.image = [UIImage imageNamed:@"img.jpg"];

[self.view addSubview:img]

;

1. 通过layer实现

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

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 ; //遮罩 裁切多余的部分

2. 通过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;

3. 通过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();

4.贝塞尔曲线+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

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/25404.html

ios – 实现圆角

ios – 实现圆角 微信打赏

ios – 实现圆角 支付宝打赏

感谢您对作者Miya的打赏,我们会更加努力!    如果您想成为作者,请点我


以上所述就是小编给大家介绍的《ios – 实现圆角》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Purely Functional Data Structures

Purely Functional Data Structures

Chris Okasaki / Cambridge University Press / 1999-6-13 / USD 49.99

Most books on data structures assume an imperative language such as C or C++. However, data structures for these languages do not always translate well to functional languages such as Standard ML, Ha......一起来看看 《Purely Functional Data Structures》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换