美文网首页文字特效每天写1000字互联网科技
iOS 无敌刮刮乐+水印文字(UIGraphicsGetCurr

iOS 无敌刮刮乐+水印文字(UIGraphicsGetCurr

作者: GiantAxe77 | 来源:发表于2016-09-09 16:48 被阅读591次

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

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<UITouch *> *)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;
}

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

相关文章

  • iOS 无敌刮刮乐+水印文字(UIGraphicsGetCurr

    首先先看效果图,有福利,有福利,有福利! 重要的事情说三遍. 步骤用法: 简单说下,首先是要准备2张图片,一个是刮...

  • iOS实现刮刮乐功能与图片添加水印功能

    代码简单直接上代码1.创建子视图 2.实现刮刮乐效果 3.图片添加文字水印 4.图片添加图片水印

  • iOS刮刮乐实现

    前言 突然看到支付宝的刮刮卡功能,闲来无事,写了一个小demo。 步骤及思路 UI布局; 获取触摸位置在图片上的坐...

  • 刮刮乐

  • 刮刮乐

    2007年3月3日,特别的日子。 为啥特别? 第一次坐飞机,青岛飞西安,提前4个小时就到机场了,在网上研究过攻略,...

  • 刮刮乐

    2014年11月3日 刮刮乐 今天杏子又在济南火车站候车了,这次她是故地重游,明显轻松了许多。 ...

  • 刮刮乐

    设置刮开后,显示的文字Label UILabel *label = [[UILabel alloc]initWit...

  • 刮刮乐

    刮刮乐这个东西真的是越刮越快乐,尤其是他给我准备的30张,现在有些喜欢30这个数字了,哈哈哈哈哈! 他给我准备...

  • 刮刮乐

    最近幻想中奖挣大钱的两个人于今晚走进彩票店刮起了刮刮乐,五块钱一张,最后刮了六张,付了十块钱,而我依然是好运绝缘体...

  • iOS “刮刮乐”的简单实现

    这两天闲来无事,做一个“刮刮乐”的小功能给大家乐一乐。哈哈哈,先来看看效果图: 这个女朋友奖很简单就可以实现:1....

网友评论

  • 小多多:self.coverView是加在哪里的
    GiantAxe77:@小多多 是的是的,我这里是添加到当前控制器的view中去了
    小多多:self.coverView这个需要加到self.view里面去嘛
    GiantAxe77:@小多多 声明一个全局的属性,用来保存遮罩层 :smile:

本文标题:iOS 无敌刮刮乐+水印文字(UIGraphicsGetCurr

本文链接:https://www.haomeiwen.com/subject/gtneettx.html