iOS 刮刮卡

先看下效果图

预览.gif

项目里需要做个刮刮卡功能，网上简单搜了一下，基本都是采用清除图层的方式来实现：
如下所示:

    // 触摸任意位置
    UITouch *touch = touches.anyObject;
    // 触摸位置在图片上的坐标
    CGPoint cententPoint = [touch locationInView:self.imageView];
    // 设置清除点的大小
    CGRect  rect = CGRectMake(cententPoint.x, cententPoint.y, 20, 20);
    // 默认是去创建一个透明的视图
    UIGraphicsBeginImageContextWithOptions(self.imageView.bounds.size, NO, 0);
    // 获取上下文(画板)
    CGContextRef ref = UIGraphicsGetCurrentContext();
    // 把imageView的layer映射到上下文中
    [self.imageView.layer renderInContext:ref];
    // 清除划过的区域
    CGContextClearRect(ref, rect);
    // 获取图片
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    // 结束图片的画板, (意味着图片在上下文中消失)
    UIGraphicsEndImageContext();
 
    self.imageView.image = image;

如果粗略使用没什么问题，但是一旦快速滑动的过程，划痕就非常难看。而且由于每次采用绘制图片的方式，比较消耗性能。
本人也尝试过优化划痕形状，或者修改绘制方式，始终不理想。

解决方案：
后来采用mask+UIBezierPath的方案来实现。（对于layer的mask不理解的同学可以去简单看下mask的原理）

就是把刮刮卡的思路反过来，原本是把遮盖层划掉，反过来也可以直接将目标图层划出来。这种做法就是遮盖界面在下层，奖励界面在上层。刚好和常识相反。

创建maskLayer

- (CAShapeLayer *)maskLayer{
    if(!_maskLayer) {
        _maskLayer = [CAShapeLayer layer];
        _maskLayer.lineCap = kCALineCapRound;
        _maskLayer.lineWidth = self.ScratchSize;
        _maskLayer.strokeColor = [UIColor blackColor].CGColor;
    }
    return _maskLayer;
}

将maskLayer作为奖品界面的mask

  self.prizeView.layer.mask = self.maskLayer;

然后在手势划过的地方，绘制线条（划痕），将路径传递给maskLayer。

- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    UITouch *touch = touches.anyObject;
    CGPoint prePoint = [touch previousLocationInView:self.prizeView];
    CGPoint currentPoint = [touch locationInView:self.prizeView];
    [self.maskPath moveToPoint:prePoint];
    [self.maskPath addLineToPoint:currentPoint];
    self.maskLayer.path = self.maskPath.CGPath;
}

完整代码地址：https://github.com/yitezh/YTScratchyCard