iOS 仿支付宝刮刮乐效果

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

实现思路, 其实很简单的三步:

展示刮出来的效果的view: 即刮开后刮刮乐效果展示-显示的文字Label

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

在touchesMoved方法里面实现操作: 刮开图片获取文字

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

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

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

下面就直接上代码!

- (void)setupSubViews {// 1.展示刮开出来的效果:显示的文字 labelUILabel *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; } 复制代码

贴上 Demo , 如果需要直接这里下载就可以喽~

总结

以上是生活随笔为你收集整理的iOS 仿支付宝刮刮乐效果的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。