内容简介:在日常的项目中,经常有将一个图片或者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
微信打赏
支付宝打赏
感谢您对作者Miya的打赏,我们会更加努力! 如果您想成为作者,请点我
以上所述就是小编给大家介绍的《ios – 实现圆角》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
程序员2010精华本
程序员杂志社 / 电子工业 / 2011-1 / 49.00元
《程序员(2010精华本)》主要内容:《程序员》创刊10年来,每年末编辑部精心打造的“合订本”已经形成一个品牌,得到广大读者的认可和喜爱。今年,《程序员》杂志内容再次进行了优化整合,除了每期推出的一个大型专题策划,各版块也纷纷以专题、策划的形式,将每月的重点进行了整合,让内容非常具有凝聚力,如专题篇、人物篇、实践篇等。另外杂志的版式、色彩方面也有了很大的飞跃,给读者带来耳目一新的阅读体验。一起来看看 《程序员2010精华本》 这本书的介绍吧!