IOS实现圆形图片效果的两种方法_IOS

先来看看效果图 ↓

IOS实现圆形图片效果的两种方法

这个显示效果的做法有很多:

方法一: 使用两张图片, 作为边框的背景图片和中间的图片,然后使用imageview的cornerradius来做圆, 具体代码如下:

									backimageview.layer.cornerradius = backimageview.frame.size.width / 2;

									backimageview.layer.maskstobounds = yes;

									frontimageview.layer.cornerradius = frontimageview.frame.size.width / 2;

									frontimageview.layer.maskstobounds = yes;

但是很显然, 今天的主角并不是上边的方法.上边的做法需要两张图片来完成带边框的圆形图片,而接下来要介绍的方法并不需要两张图片, 只需要一张图片就可以!

方法二: 使用图形上下文, 生成一张带有边框的圆形图片, 话不多说, 代码如下:

									// borderwidth 表示边框的宽度

									cgfloat imagew = image.size.width + 2 * borderwidth;

									cgfloat imageh = imagew;

									cgsize imagesize = cgsizemake(imagew, imageh);

									uigraphicsbeginimagecontextwithoptions(imagesize, no, 0.0);

									cgcontextref context = uigraphicsgetcurrentcontext();

									// bordercolor表示边框的颜色

									[bordercolor set];

									cgfloat bigradius = imagew * 0.5;

									cgfloat centerx = bigradius;

									cgfloat centery = bigradius;

									cgcontextaddarc(context, centerx, centery, bigradius, 0, m_pi * 2, 0);

									cgcontextfillpath(context);

									cgfloat smallradius = bigradius - borderwidth;

									cgcontextaddarc(context, centerx, centery, smallradius, 0, m_pi * 2, 0);

									cgcontextclip(context);

									[image drawinrect:cgrectmake(borderwidth, borderwidth, image.frame.size.width, image.frame.size.height)];

									uiimage *newimage = uigraphicsgetimagefromcurrentimagecontext();

									uigraphicsendimagecontext();

接下来解释一下上边的代码

1、首先是原理: 画一个圆环, 宽度为borderwidth,然后将图片放入这个圆环中, 使其只显示圆环中的部分.

2、前三行代码: 得到带边框的图片的整体宽度和高度(因为要得到圆形图片, 所以需要宽和高相同), 同时得到一个cgsize对象留着后边用

3、代码:

1	`uigraphicsbeginimagecontextwithoptions(imagesize, no, 0.0);`

表示开启图形上下文, 我们来看一些头文件中的方法声明:

1	`uigraphicsbeginimagecontextwithoptions(cgsize size,` `bool` `opaque, cgfloat scale)`

第一个参数需要填入一个cgsize对象, 也就是第三行的imagesize,表示绘制图形的范围

第二个参数的布尔值表示是否透明, 选择no即可

if the opaque parameter is yes, the alpha channel is ignored and the bitmap is treated as fully opaque

第三个参数的scale是比例因子, 我们填入0.0, 表示是以屏幕的比例来计算

if you specify a value of 0.0, the scale factor is set to the scale factor of the device's main screen

4、代码:

1	`cgcontextref context = uigraphicsgetcurrentcontext();`

既然要使用上下文来绘制图片, 当然得获取当前的上下文对象了

5、代码:

1	`[bordercolor set];`

先来看一下这个set的头文件注释

1	`// sets the fill and stroke colors in the current drawing context`

给当前的上下文设置填充和描边的颜色, 说起填充色有没有想到画图软件中的填充 ?使用过ps的朋友应该很清楚.说白了这行代码的意思就是设置好颜色, 待会给圆环上色用...

6、代码:

									cgfloat bigradius = imagew * 0.5;

									cgfloat centerx = bigradius;

									cgfloat centery = bigradius;

									cgcontextaddarc(context, centerx, centery, bigradius, 0, m_pi * 2, 0);

正常来讲画一个圆需要什么 ? 需要半径和圆心对不对

bigradius 是带边框图片整体的绘制半径, 画圆需要半径, 这个就是!

centerx 和centery 是圆心坐标的x和y

cgcontextaddarc 这个方法表示给当前的上下文画一个圆弧, 我们来看下头文件的方法声明