美文网首页技术重塑
关于圆角的5种处理方式

关于圆角的5种处理方式

作者: flowerflower | 来源:发表于2016-08-10 10:32 被阅读394次

说明: 改造之前的圆角处理方式,新增加了两种,由于之前直接使用默认的富文本编辑,没有设置成Markdown编辑器,之前写的不能切换Markdown格式,所以只能再次重新在此添加了。
原效果 -> 改造后效果

1>无需任何代码直接在xib中实现:
只需要如下图中的几步即可实现效果:
其中的第4步
Key Path:layer.cornerRadius
type:Number
Value:20(宽的一半 例如:原图宽为40)


2>代码实现:
// _header.clipsToBounds = YES;(_header就是图片的名称)
// _header.layer.cornerRadius = 20;

3>使用CAShapeLayer和UIBezierPath设置圆角

//设置图片的尺寸大小
UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
//设置图片
imageView.image = [UIImage imageNamed:@"Snip20160726_2"];
CGSize radio = CGSizeMake(5, 5);//圆角尺寸
UIRectCorner corner = UIRectCornerTopLeft|UIRectCornerTopRight|UIRectCornerBottomLeft|UIRectCornerBottomRight;//设置圆角位置
/**
*  bezierPathWithRoundedRect:imgViewd的大小
   byRoundingCorners:设置圆角的位置(左上、左下、右上、右下)
   cornerRadii:设置圆角尺寸
*/
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:imageView.bounds byRoundingCorners:corner cornerRadii:radio];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc]init];
//设置大小
maskLayer.frame = imageView.bounds;
//设置图形样子
maskLayer.path = maskPath.CGPath;
imageView.layer.mask = maskLayer;
[self.view addSubview:imageView];

4>使用贝塞尔曲线UIBezierPath和Core Graphics框架画圆

//设置图片的尺寸大小
UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
//设置图片
imageView.image = [UIImage imageNamed:@"Snip20160726_2.png"];
//开始对imageView进行画图
UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, NO, 1.0);
//使用贝塞尔曲线画出一个圆形图
[[UIBezierPath bezierPathWithRoundedRect:imageView.bounds cornerRadius:imageView.frame.size.width] addClip];
[imageView drawRect:imageView.bounds];
imageView.image = UIGraphicsGetImageFromCurrentImageContext();
//结束画图
UIGraphicsEndImageContext();
[self.view addSubview:imageView];

5>封装
直接导入头文件即可直接调用:github送上门

Snip20160810_2.png

总结
上面的第1种和第2种方式都是通过对图层进行直接改动,假设项目图片多的话就会变得卡,所以建议最好不要使用此种方式,此种方式最消耗性能。而第3种、第4种、第5种的优势在于:此种做法不是对控件或者图片做手脚,而是将服务器返回的正方形,通过绘制做成了圆形的图片,再把圆形的图片设置到imageView上去,这样就直接显示图片了。

相关文章

  • 关于圆角的5种处理方式

    说明: 改造之前的圆角处理方式,新增加了两种,由于之前直接使用默认的富文本编辑,没有设置成Markdown编辑器,...

  • 关于Android 圆角 阴影

    1 圆角 阴影(支持所有View包括视频 GIF图等) 对于圆角,处理方式有很多种,但是好多都有所限制,比如不支持...

  • Flutter开发之圆角图片的实现

    Image 圆角的几种处理方式: 1.利用Container组件的decoration属性实现 2.利用裁剪组件C...

  • 图片圆角处理

    众所周知,普通的图片圆角处理方式会产生一定的性能问题,如: 其实在处理一般的圆角问题时可以用这种方法,但是假设你的...

  • iOS 几种圆角处理方式

    1.通过设置layer的属性 -最简单的一种,但是很影响性能 Core Graphics方式 -用贝塞尔曲线UIB...

  • iOS图片圆角优化(一)

    关于图片圆角的,用到了大量圆角图片。然而,系统圆角会导致离屏渲染的问题,出于性能考虑,于是有了图片圆角渲染工具HJ...

  • iOS的图片圆角处理方式对比

    第一种方法: 对layer做手脚 性能:对图层的圆角做太多操作和渲染会很卡,特别是圆角跟阴影的时候 第二种方法:(...

  • 关于设置圆角导致卡顿的深层原因解析

    小心别让圆角成了你列表的帧数杀手 --关于设置圆角导致卡顿的深层原因解析

  • SASS常用样式总结

    关于媒体查询 关于flex布局 关于动画 透明度 超出的文本省略 圆角 阴影 居中

  • 关于圆角控件

    如何新建shape文件:https://jingyan.baidu.com/article/b907e627951...

网友评论

本文标题:关于圆角的5种处理方式

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