iOS 无敌刮刮乐+水印文字(UIGraphicsGetCurrentContext)

首先先看效果图,有福利,有福利,有福利! 重要的事情说三遍.

sexy.gif

步骤用法:

• 简单说下,首先是要准备2张图片,一个是刮奖后的图片,一个是遮罩层图片.
• 我在遮罩层图片上加上了水印文字,小伙伴们可以看一下具体方法.
• 最后就是根据触摸位置利用上下文清除图片.

代码,走起! 我写了注释比较多,方便理解.

- (void)setupUI
{
    // 刮出后要展示的图片
    UIImageView *imgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"meinv"]];
    
    // 设置frame
    imgView.frame = self.view.bounds;
    
    // 添加其为子控件
    [self.view addSubview:imgView];
    
    // 遮罩层图片
    UIImageView *coverView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"cowgirl"]];
    
    // 设置frame
    coverView.frame = self.view.bounds;
    
    // 打开与用户交互功能
    coverView.userInteractionEnabled = YES;
    
    // 添加其为子控件
    [self.view addSubview:coverView];
    
    // 配置遮罩层view(添加水印文字)
    coverView.image = [self deployCoverViewWithGivenImgView:coverView givenStr:@"刮开涂层有惊喜" givenFont:[UIFont systemFontOfSize:30.0]];
    
    self.coverView = coverView;
}

///  配置遮盖层view
///
///  @param coverImgView 遮盖层的imageView
///  @param givenStr     显示的文字
///  @param givenFont    字体大小
///
///  @return 返回一个有水印文字的image
- (UIImage *)deployCoverViewWithGivenImgView:(UIImageView *)coverImgView givenStr:(NSString *)givenStr givenFont:(UIFont *)givenFont
{
    CGSize size = CGSizeMake(coverImgView.width, coverImgView.height);
    
    // 画布大小
    UIGraphicsBeginImageContextWithOptions(size, NO, 0.0);
    
    // 画图起点
    [coverImgView.image drawAtPoint:CGPointMake(0, 0)];
    
    // 获取当前上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    // 绘制路径
    // kCGPathFill填充非零绕数规则,kCGPathEOFill表示用奇偶规则,kCGPathStroke路径,kCGPathFillStroke路径填充,kCGPathEOFillStroke表示描线,不是填充
    CGContextDrawPath(ctx, kCGPathStroke);
    
    // 要显示字体所占的宽度
    CGFloat w = [self boundingRectHeightWithText:givenStr font:givenFont].width;
    
    // 要显示字体的画图位置
    [givenStr drawAtPoint:CGPointMake((coverImgView.width - w) / 2, 50) withAttributes:@{NSFontAttributeName:givenFont,NSForegroundColorAttributeName:[UIColor blackColor]}];
    
    // 获取从当前上下文中的图片
    UIImage *newImg = UIGraphicsGetImageFromCurrentImageContext();
    
    // 结束上下文
    UIGraphicsEndPDFContext();
    
    return newImg;
}

// 返回文字所占大小
- (CGSize)boundingRectHeightWithText:(NSString *)text font:(UIFont *)font {
    
    CGSize maximumSize = CGSizeMake(270, CGFLOAT_MAX);
    CGRect boundingRect = [text boundingRectWithSize:maximumSize
                                             options:NSStringDrawingUsesLineFragmentOrigin
                                          attributes:@{ NSFontAttributeName : font}
                                             context:nil];
    return boundingRect.size;
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    // 任意触摸位置
    UITouch *touch = touches.anyObject;
    
    // 获取在当前view中的坐标
    CGPoint centerPoint = [touch locationInView:self.coverView];
    
    // 设置清除点的大小
    CGRect rect = CGRectMake(centerPoint.x, centerPoint.y, 40, 40);
    
    // 画布大小
    UIGraphicsBeginImageContextWithOptions(self.coverView.size, NO, 0.0);
    
    // 获取当前上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    // 将coverView的layer映射渲染到上下文中
    [self.coverView.layer renderInContext:ctx];
    
    // 清除划过位置的图片
    CGContextClearRect(ctx, rect);
    
    // 获取从当前上下文中的图片
    UIImage *newImg = UIGraphicsGetImageFromCurrentImageContext();
    
    // 结束上下文
    UIGraphicsEndImageContext();
    
    self.coverView.image = newImg;
}

至此基本上功能都能实现,后期将把它封装的更优化,欢迎收看~