支付寶里有個刮刮樂中獎, 和大街小巷里的類似彩票刮刮樂的效果一樣。

實現思路, 其實很簡單的三步:

展示刮出來的效果的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 仿支付宝刮刮乐效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。