iOS-仿支付宝刮刮乐效果

原创

676015863 2023-06-01 09:56:12 ©著作权

文章标签 iOS 仿支付宝刮刮乐效果控件压缩文件支付宝 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者676015863的原创作品，请联系作者获取转载授权，否则将追究法律责任

概述

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

详细

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

一、实现思路

其实很简单的三步:

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

二、程序实现

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

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

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

下面就直接上核心代码!

展示刮开出来的效果:显示的文字 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;
}