iOS-仿支付宝刮刮乐效果

最新推荐文章于 2024-03-26 10:46:33 发布

置顶 smileZhangli

最新推荐文章于 2024-03-26 10:46:33 发布

阅读量1.5k

点赞数

文章标签：刮刮乐

本文链接：https://blog.csdn.net/smileZhangli/article/details/78579092

版权

本文介绍了如何在iOS应用中实现类似支付宝刮刮乐的交互效果。通过展示刮开后的文字Label、设置遮挡图片，并在触摸移动事件中处理刮擦操作，实现了刮刮乐功能。关键步骤包括确保两个控件位置相同，以及正确处理触摸移动事件。项目代码可供直接运行和参考。

摘要由CSDN通过智能技术生成

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

一、实现思路

其实很简单的三步:

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(被刮的图片)

1

2

3

4

 
      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; 
     
      }