传统依然是效果展示,请看下图 ↓
这个显示效果的做法有很多:
方法一: 使用两张图片, 作为边框的背景图片和中间的图片,然后使用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();
接下来解释一下上边的代码
- 首先是原理: 画一个圆环, 宽度为borderWidth,然后将图片放入这个圆环中, 使其只显示圆环中的部分.
- 前三行代码: 得到带边框的图片的整体宽度和高度(因为要得到圆形图片, 所以需要宽和高相同), 同时得到一个CGSize对象留着后边用
- 代码:
UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0.0);
表示开启图形上下文, 我们来看一些头文件中的方法声明:
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
- 代码:
CGContextRef context = UIGraphicsGetCurrentContext();
既然要使用上下文来绘制图片, 当然得获取当前的上下文对象了
- 代码:
[borderColor set];
先来看一下这个set的头文件注释
// Sets the fill and stroke colors in the current drawing context
给当前的上下文设置填充和描边的颜色, 说起填充色有没有想到画图软件中的填充 ?使用过PS的朋友应该很清楚.说白了这行代码的意思就是设置好颜色, 待会给上下文上色用...
- 代码:
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 这个方法表示给当前的上下文画一个圆弧, 我们来看下头文件的方法声明
void CGContextAddArc(CGContextRef cg_nullable c, CGFloat x, CGFloat y, CGFloat radius, CGFloat startAngle, CGFloat endAngle, int clockwise)
参数比较多, 我分别列出来其表示的意义:
@param c 上下文
@param x 圆弧中心点的x
@param y 圆弧中心点的y
@param radius 圆弧的半径(bigRadius)
@param startAngle 起始点的角度
@param endAngle 结束点的角度 M_PI * 2表示一周
@param clockwise 顺时针画圆弧填1 逆时针填0
- 代码:
CGContextFillPath(context);
填充当前上下文, 用什么填充 ? 当然是填充色! 到这里我们得到了一个半径为bigRadius, 颜色为填充色的圆形上下文
- 代码:
CGFloat smallRadius = bigRadius - borderWidth;
CGContextAddArc(context, centerX, centerY, smallRadius, 0, M_PI * 2, 0);
意义和 -代码6- 一样, 给当前的上下文(一个有颜色的圆)添加一个圆弧, 其中的smallRadius就是中间图片的半径
- 代码:
CGContextClip(context);
头文件是这么说的: Intersect the context's path with the current clip path and use the
resulting path as the clip path for subsequent rendering operations.
大意是将当前的上下文以当前的剪辑路径(代码8所画的圆弧)进行剪辑, 然后使用剪辑后的路径(代码8得到的圆弧)来进行后续的着色操作.
简单说就是使用 -代码7- 得到的圆形上下文中间的部分来进行后续的绘制...
- 代码:
[image drawInRect:CGRectMake(borderWidth, borderWidth, image.frame.size.width, image.frame.size.height)];
这个方法是将图片以给定的范围绘制到当前的图形上下文中, -代码9- 中已经得到了进行绘制操作的路径, 也就是说, 这张图只保留 -代码9- 中路径内的部分. 注意此时上下文已经变成了带边框的圆形图片了!
- 代码:
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
从当前上下文中得到图片并关闭图形上下文
到这里呢就算是结束了, 我们得到了一个带有边框的圆形图片, 从方法复杂性来说方法二比较复杂, 使用了图形上下文. 但是就得到圆形图片来说他们的意义不同.
方法一是用叠加的原理得到视觉上的带边框
方法二则完全生成了一张带边框的圆形图片
在日常开发中完成某项功能需要根据需求去决定如何实现, 同样的, 上边的两种方法也是, 如果想要一张自带边框的圆形图片使用方法二即可.