iOS-仿支付宝刮刮乐效果

矫情吗；* 2022-05-31 09:53 271阅读 0赞

# 概述 #

仿支付宝刮刮乐效果, 可以按照自己需求更改展示刮出来的效果的view(即刮开后刮刮乐效果展示)

# 详细 #

#### 代码下载：[http://www.demodashi.com/demo/10673.html][http_www.demodashi.com_demo_10673.html] ####

支付宝里有个刮刮乐中奖, 和大街小巷里的类似彩票刮刮乐的效果一样。

#### 一、实现思路 ####

其实很简单的三步:

*  1. 展示刮出来的效果的view: 即刮开后刮刮乐效果展示-显示的文字Label
 *  2. 设置遮挡在外面的Image(被刮的图片)
 *  3. 在touchesMoved方法里面实现操作: 刮开图片获取文字

#### 二、程序实现 ####

虽然思路简单,但是还需要注意:

1. 这两个控件的位置切记要相同!

2. 一定要先创建下面的展示刮出来的效果控件的, 再创建上面的被刮的图片控件!

下面就直接上核心代码!

1.  展示刮开出来的效果:显示的文字 label

UILabel *showLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 274, 145)];
        showLabel.center = self.view.center;
        showLabel.backgroundColor = [UIColor redColor];
        showLabel.textColor = [UIColor yellowColor];
        showLabel.text = @"恭喜你中奖了";
        showLabel.font = [UIFont systemFontOfSize:30];
        showLabel.textAlignment = NSTextAlignmentCenter;
        [self.view addSubview:showLabel];

2. 设置遮挡在外面的Image(被刮的图片)

UIImageView *scratchedImg = [[UIImageView alloc] initWithFrame:showLabel.frame];
        scratchedImg.image = [UIImage imageNamed:@"scratched"];
        [self.view addSubview:scratchedImg];
        self.scratchedImg = scratchedImg;

3. 在touchesMoved方法里面实现操作

- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
        
        // 触摸任意位置
        UITouch *touch = touches.anyObject;
        // 触摸位置在图片上的坐标
        CGPoint cententPoint = [touch locationInView:self.scratchedImg];
        // 设置清除点的大小
        CGRect  rect = CGRectMake(cententPoint.x, cententPoint.y, 20, 20);
        // 默认是去创建一个透明的视图
        UIGraphicsBeginImageContextWithOptions(self.scratchedImg.bounds.size, NO, 0);
        // 获取上下文(画板)
        CGContextRef ref = UIGraphicsGetCurrentContext();
        // 把imageView的layer映射到上下文中
        [self.scratchedImg.layer renderInContext:ref];
        // 清除划过的区域
        CGContextClearRect(ref, rect);
        // 获取图片
        UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
        // 结束图片的画板, (意味着图片在上下文中消失)
        UIGraphicsEndImageContext();
        
        self.scratchedImg.image = image;
    }

#### 三、压缩文件截图及运行效果 ####

1、压缩文件截图:

![18CCB610-C822-4AC9-873F-A0A4831CCAEB.png][]

2、运行时的截图

![B18955F7-9EE7-4FAE-97AE-F58CA3CEBF68.png][]

#### 四、其他补充 ####

界面性问题可以根据自己项目需求调整即可, 具体可参考代码, 项目能够直接运行!

#### 注：本文著作权归作者，由demo大师（[http://www.demodashi.com][http_www.demodashi.com]）宣传，拒绝转载，转载需要作者授权 ####

[http_www.demodashi.com_demo_10673.html]: http://www.demodashi.com/demo/10673.html
[18CCB610-C822-4AC9-873F-A0A4831CCAEB.png]: /images/20220531/ff61d61b69074b8380183c25c2737bc2.png
[B18955F7-9EE7-4FAE-97AE-F58CA3CEBF68.png]: /images/20220531/2c5cb83a8798445686e53c9482fa9f98.png
[http_www.demodashi.com]: http://www.demodashi.com/