先来看看效果图 ↓
这个显示效果的做法有很多:
方法一: 使用两张图片, 作为边框的背景图片和中间的图片,然后使用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、代码:
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, 表示是以屏幕的比例来计算
