引言

我們平時(shí)在使用支付寶的時(shí)候, 會(huì)看到類似彩票刮刮樂(lè)的效果。如何實(shí)現(xiàn)的呢?下面就直接上代碼了...

刮刮樂(lè)效果:

1.創(chuàng)建視圖:

-(void)createSubViews {
    /**
            注意:
        1. 這兩個(gè)控件的位置要相同
        2. 一定要先創(chuàng)建下面的label, 再創(chuàng)建圖片
     */
    
    // 展示刮出來(lái)的效果的view
    UILabel *labelL        = [[UILabel alloc] initWithFrame:CGRectMake(20, 100, 280, 200)];
    labelL.text            = @"刮刮樂(lè)效果展示";
    labelL.numberOfLines   = 0;
    labelL.backgroundColor = [UIColor brownColor];
    labelL.font            = [UIFont systemFontOfSize:30];
    labelL.textAlignment   = NSTextAlignmentCenter;
    [self.view addSubview:labelL];
    
    // 被刮的圖片
    self.imageView       = [[UIImageView alloc] initWithFrame:labelL.frame];
    self.imageView.image = [UIImage imageNamed:@"222.jpg"];
    [self.view addSubview:self.imageView];
}

2.實(shí)現(xiàn)刮刮樂(lè)效果:

-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    
    // 觸摸任意位置
    UITouch *touch = touches.anyObject;
    // 觸摸位置在圖片上的坐標(biāo)
    CGPoint cententPoint = [touch locationInView:self.imageView];
    // 設(shè)置清除點(diǎn)的大小
    CGRect  rect = CGRectMake(cententPoint.x, cententPoint.y, 20, 20);
    // 默認(rèn)是去創(chuàng)建一個(gè)透明的視圖
    UIGraphicsBeginImageContextWithOptions(self.imageView.bounds.size, NO, 0);
    // 獲取上下文(畫(huà)板)
    CGContextRef ref = UIGraphicsGetCurrentContext();
    // 把imageView的layer映射到上下文中
    [self.imageView.layer renderInContext:ref];
    // 清除劃過(guò)的區(qū)域
    CGContextClearRect(ref, rect);
    // 獲取圖片
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    // 結(jié)束圖片的畫(huà)板, (意味著圖片在上下文中消失)
    UIGraphicsEndImageContext();
    
    self.imageView.image = image;
}

效果圖:

效果圖

GitHub: https://github.com/LiCheng244/LCUtils
個(gè)人博客: http://www.licheng244.com/