封装图片设置为圆形

简介: 封装图片设置为圆形

封装图片设置为圆形


在iOS开发中,我们经常会遇到把头像或者图片什么的设置为圆形

大部分人的第一思路是利用图层:让cornerRadius 等于宽度的一半

一:

self.lywimage.layer.masksToBounds = YES;
 self.lywimage.layer.cornerRadius = self.lywimage.lyw_W * 0.5;

效果图:

55cfbd117acc83cbef3a2ea9211a849e.png

Snip20160808_1.png

二:在xib 或者Storyboard中

b66e62e5855c6e60fcd94e6bb576e9a9.png

Snip20160808_2.png

效果图

1974c27a964851dfb63e0f4da599fdf6.png

Snip20160808_3.png

注意:如果你是将Xib 或者Storyboard将图片拖线过去代码中,则使用第一种方式就可以设置圆角

但是这种方式都是不好的,因为这里涉及到一个性能优化的问题,

比如有很多头像之类的需要设置为圆角这样会让UITableView非常卡顿

36123e0d361ddb13b99655d65f43a537.jpg

IMG_0677.JPG

所以我们尽量别使用这种方法

这是个面试题,很多面试官有时候会问怎么优化UITableView 
简单说一下这个面试题:
1.使用不透明视图。
2.不要重复创建不必要的table cell。
3.减少视图的数目。
4.不要做多余的绘制工作。
5.预渲染图像。
6.不要阻塞主线程。

上面给大家介绍了很多初学者使用的方法,下面给大家封装一个图片画圆

第一步:


bccb3a1ffc8484134c50020a83924d5c.png

Snip20160808_4.png

第二步:在UIImage+EXtension.h文件中提供一个对象方法出来


52df85fc085fcb93fde3ba96ae721474.png

Snip20160808_5.png

- (instancetype)circleImage;

第三步:在UIImage+EXtension.m文件中用


ace972a6135a2087d3db3d6b08a1cf41.png

Snip20160808_8.png

- (instancetype)circleImage
{
    // 开启图形上下文
    UIGraphicsBeginImageContext(self.size);
    // 上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 添加一个圆
    CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height);
    CGContextAddEllipseInRect(ctx, rect);
    // 裁剪
    CGContextClip(ctx);
    // 绘制图片
    [self drawInRect:rect];
    // 获得图片
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    // 关闭图形上下文
    UIGraphicsEndImageContext();
    return image;
}

第四步:导入头文件之后,利用这两句代码就可以实现


ffa6b67115b0f99307c1487448bfbf46.png

Snip20160808_6.png

UIImage *image = [UIImage circleImage:@"ic_launcher_xxx"];
 self.lywimage.image = [image circleImage];

效果图是一样的。给大家看一下。大家可以看时间,我上面截的图是九点多,现在截图是十一点多。

3733c449ac2af0cf69401b96299d40db.png

Snip20160808_11.png

有时候我们希望直接传一个图片过去然后就画好了圆这样更方便直接,

虽然这样就可以实现

self.lywimage.image = [[UIImage circleImage:@"ic_launcher_xxx"]  circleImage];

但是我给大家再提供一个方法出来

在UIImage+EXtension.h文件中

7628f02b2a3797eabe6039669f6df66a.png

Snip20160808_9.png

在UIImage+EXtension.m文件中

c2e44f04da8f4f740fff5ee2a608cb47.png

Snip20160808_10.png

然后我们就可以直接使用了  这里我给大家截取出刚才的那几个画圆方法


0dd9d4d1aba1bb7ed4b618679e66f6cd.png

Snip20160808_12.png

以后大家需要实现画圆,只需要把这个扩展的类

(就是UIImage+EXtension.h,和UIImage+EXtension.m)拖进文件里面调用这提供的两个方法就可以实现画圆功能了

扩展 :如果在上面的基础上给UIImageView添加直接设置图片为圆形的方法

前提是有之前的那些步骤

02809df9e129217c52bd747d85c832ca.png

Snip20160808_14.png

a72efa21f4811016a864d1ee2a6dd7ec.png

Snip20160808_15.png

8f2c1271e3de1f9a226c5239dc619122.png

Snip20160808_18.png


使用方法


ca6dbdc6732b86fa8ad2c489f8a586c3.png

Snip20160808_18.png


效果图


c581b05eaf540800a0d7eb4a1f0b31dd.png

Snip20160808_19.png

Dome:https://github.com/LYWGod/circleImage

相关文章
|
7月前
|
前端开发 算法 网络安全
图片滑块验证功能很难吗?做个可以自己抠形状的图片滑块验证组件
图片滑块验证功能很难吗?做个可以自己抠形状的图片滑块验证组件
163 0
|
5月前
|
前端开发
css动画 —— 自定义不规则的动画路径 offset-path (含不规则的动画路径参数获取方法)
css动画 —— 自定义不规则的动画路径 offset-path (含不规则的动画路径参数获取方法)
122 1
|
5月前
|
Web App开发 前端开发
canvas系列教程04 —— 渐变、阴影、路径、状态、Canvas对象、图形重叠模式
canvas系列教程04 —— 渐变、阴影、路径、状态、Canvas对象、图形重叠模式
466 0
|
5月前
|
前端开发
Canvas绘画之多边形画板,绘制多边形,携带背景图和绘画功能,带有全部清除的功能,用这个
Canvas绘画之多边形画板,绘制多边形,携带背景图和绘画功能,带有全部清除的功能,用这个
|
5月前
|
机器学习/深度学习 前端开发 算法
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(二)
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(二)
94 0
|
5月前
|
存储 前端开发 JavaScript
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(一)
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(一)
501 0
|
7月前
|
监控 API 计算机视觉
OpenCV这么简单为啥不学——1.4、基础标识绘制(绘制线line函数、rectangle函数绘制四边形、circle函数绘制圆形、putText函数绘制文字、putText绘制中文文字)
OpenCV这么简单为啥不学——1.4、基础标识绘制(绘制线line函数、rectangle函数绘制四边形、circle函数绘制圆形、putText函数绘制文字、putText绘制中文文字)
74 0
|
7月前
|
前端开发
|
C# 图形学
Winform控件优化之Paint事件实现圆角组件(提取绘制圆角的扩展方法)
Paint事件方法中实现圆角控件不要通过事件参数`e.ClipRectangle`获取控件区域范围,原因见最后介绍;注意设置控件背景透明(参见[Winform控件优化之背景透明那些事2...
851 0
Winform控件优化之Paint事件实现圆角组件(提取绘制圆角的扩展方法)
|
存储 前端开发
canvas自定义绘制顺序解决遮挡问题
canvas自定义绘制顺序解决遮挡问题
253 0