50行代码实现刮刮奖自定义View

scratchvie.gif

原理是利用了canvas的 clipPath(path)的效果，
根据手指的移动不断向原本的Path中添加手指触摸过的区域。然后将真正需要的图片显示出来。

实际是一个ImageView显示了两张图片。和正常思维不同的是，刮奖效果的蒙板其实是在图片的下方。而图片一开始的显示区域只有0x0所以只显示了蒙板。
而通过不断向Path追加区域，不断增加图片可以显示的区域，所以渐渐的图片就越来越多的显示出来了。

代码如下，说是50行，其实根本没有到。甚至核心代码也就10行的样子

/**
 * 刮刮奖效果
 */
public class ScratchView extends AppCompatImageView {
    //被刮开的区域
    private  Path clipPath;

    public ScratchView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        clipPath = new Path();
    }

    @SuppressLint("ClickableViewAccessibility")
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_MOVE:
                // 记录移动的点；
                clipPath.addCircle(event.getX(),event.getY(),50, Path.Direction.CW);
                invalidate();
        }
        return true;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //绘制可以刮开的区域
        canvas.drawColor(Color.BLACK);

        canvas.save();
        //裁剪出可以显示图片的区域
        canvas.clipPath(clipPath);
        //绘制原本的图片
        super.onDraw(canvas);
        canvas.restore();
    }
}