完全封装简单的实现图片的圆形剪切效果

来源：互联网发布：linux常用基本命令编辑：程序博客网时间：2024/06/04 19:27

1.给UIImage添加分类

.h文件

#import <UIKit/UIKit.h>@interface UIImage (WQ)/** *  @param name        图片的名称 *  @param borderWidth 圆形图片的外轮廓宽度 *  @param borderColor 圆形图片的外轮廓颜色 * */+ (instancetype)circleImageWithName:(NSString *)name borderWidth:(CGFloat)borderWidth borderColor:(UIColor *)borderColor;@end

.m文件的实现

#import "UIImage+WQ.h"// 添加相关所需的库文件#import <objc/message.h>@implementation UIImage (WQ)+ (instancetype)circleImageWithName:(NSString *)name borderWidth:(CGFloat)borderWidth borderColor:(UIColor *)borderColor{    // 1.加载原图    UIImage *oldImage = [UIImage imageNamed:name];        // 2.开启上下文    CGFloat imageW = oldImage.size.width + 2 * borderWidth;    CGFloat imageH = oldImage.size.height + 2 * borderWidth;    CGSize imageSize = CGSizeMake(imageW, imageH);    UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0.0);        // 3.取得当前的上下文    CGContextRef ctx = UIGraphicsGetCurrentContext();        // 4.画边框(大圆)    [borderColor set];    CGFloat bigRadius = imageW * 0.5; // 大圆半径    CGFloat centerX = bigRadius; // 圆心    CGFloat centerY = bigRadius;    CGContextAddArc(ctx, centerX, centerY, bigRadius, 0, M_PI * 2, 0);    CGContextFillPath(ctx); // 画圆        // 5.小圆    CGFloat smallRadius = bigRadius - borderWidth;    CGContextAddArc(ctx, centerX, centerY, smallRadius, 0, M_PI * 2, 0);    // 裁剪(后面画的东西才会受裁剪的影响)    CGContextClip(ctx);        // 6.画图    [oldImage drawInRect:CGRectMake(borderWidth, borderWidth, oldImage.size.width, oldImage.size.height)];        // 7.取图    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();        // 8.结束上下文    UIGraphicsEndImageContext();        return newImage;}@end

2.在控制器中的使用

#import "ViewController.h"#import "UIImage+WQ.h"@interface ViewController ()@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];     // 1.直接初始化    UIImageView *shapedImageView = [[UIImageView alloc] initWithFrame:CGRectMake(50, 50, 100, 100)];    // 2.设置imgage可以自定相关配置    shapedImageView.image = [UIImage circleImageWithName:@"test" borderWidth:5 borderColor:[UIColor blueColor]];    [self.view addSubview:shapedImageView];}@end

最终的效果图

0 0