Android自定义View-刮刮卡效果

首先来看一下效果图：（这是医生的书《Android群英传》中的一个知识点）

 涉及到的知识点
 1. [2D绘图基础](http://blog.youkuaiyun.com/zone_/article/details/70456348)
 2. PorterDuffXfermode

绘制思路：

1. 绘制两个图层，第一层绘制想要显示的图案，第二层绘制遮罩层（这两个图层中，是第二个图层覆盖第一个图层）
2. 让手指滑过的地方变成透明，就可以看到第一层的图片了。

第一步：绘制两个图层

先来看一下第一步绘制好之后的效果：

首先是初始化一些数据：
成员变量：

private Paint mTransparentPaint;//透明的画笔
private Path mFingerPath;//记录手指滑过的路径
private Bitmap mBgBitmap;//第一张图的 bitmap
private Bitmap mFgBitmap;//第二章图的 bitmap
private Canvas mCanvas1;//新建的画布，用于操作 mFgBitmap

构造方法中初始化的数据：

mTransparentPaint = new Paint();//设置透明画笔
mTransparentPaint.setAntiAlias(true);
mTransparentPaint.setAlpha(0);//设置成透明
mTransparentPaint.setStyle(Paint.Style.STROKE);
mTransparentPaint.setStrokeJoin(Paint.Join.ROUND);//让笔触和连接处更加圆滑
mTransparentPaint.setStrokeCap(Paint.Cap.ROUND);
mTransparentPaint.setStrokeWidth(50);
mTransparentPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

mFingerPath = new Path();//记录手指滑过的路径
mBgBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.qq2);//第一张图
mFgBitmap = Bitmap.createBitmap(mBgBitmap.getWidth(), mBgBitmap.getHeight(), Bitmap.Config.ARGB_8888);//第二章图
mCanvas1 = new Canvas(mFgBitmap);//mCanvas1 画布进行的一些列操作都会作用到 mFgBitmap
mCanvas1.drawColor(Color.GRAY);//例如这一步，绘制灰色，会使 mFgBitmap 变成一张全灰色的 bitmap

在 onDraw() 方法中绘制两个 bitmap ：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawBitmap(mBgBitmap, 0,0, null);
    canvas.drawBitmap(mFgBitmap, 0,0, null);
}

第二步：让手指滑过的地方变透明

这里需要重写 onTouchEvent()，来记录手指滑过的路径 ,那么重写之后的代码是这样的：

@Override
public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            mFingerPath.reset();//因为之前的效果已经作用在 fgBitmap 上了，所以需要重置 path ，避免对下一步造成影响
            mFingerPath.moveTo(event.getX(), event.getY());
            break;
        case MotionEvent.ACTION_MOVE:
            mFingerPath.lineTo(event.getX(), event.getY());
            break;
        case MotionEvent.ACTION_UP:

            break;
    }
    mCanvas1.drawPath(mFingerPath, mTransparentPaint);//使透明的效果作用到 fgBitmap 上。
    invalidate();//执行重绘
    return true;
}

总结

经过上面的两步绘制，就可以实现刮刮卡的效果了，其实自定义 view 就是坐标的计算和实现思路。那么完整的代码是下面这样的：

public class ScratchCardView extends View {
    private Paint mTransparentPaint;//透明的画笔
    private Path mFingerPath;//手指的路径
    private Bitmap mBgBitmap;//第一张图的 bitmap
    private Bitmap mFgBitmap;//第二章图的 bitmap
    private Canvas mCanvas1;//新建的画布，用于操作 mFgBitmap

    public ScratchCardView(Context context) {
        super(context);
        init();
    }

    public ScratchCardView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public ScratchCardView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public ScratchCardView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init();
    }

    private void init() {
        mTransparentPaint = new Paint();//设置透明画笔
        mTransparentPaint.setAntiAlias(true);
        mTransparentPaint.setAlpha(0);//设置成透明
        mTransparentPaint.setStyle(Paint.Style.STROKE);
        mTransparentPaint.setStrokeJoin(Paint.Join.ROUND);//让笔触和连接处更加圆滑
        mTransparentPaint.setStrokeCap(Paint.Cap.ROUND);
        mTransparentPaint.setStrokeWidth(50);
        mTransparentPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

        mFingerPath = new Path();//记录手指滑过的路径
        mBgBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.qq2);//第一张图
        mFgBitmap = Bitmap.createBitmap(mBgBitmap.getWidth(), mBgBitmap.getHeight(), Bitmap.Config.ARGB_8888);//第二章图
        mCanvas1 = new Canvas(mFgBitmap);//mCanvas1 画布进行的一些列操作都会作用到 mFgBitmap
        mCanvas1.drawColor(Color.GRAY);//例如这一步，绘制灰色，会使 mFgBitmap 变成一张全灰色的 bitmap
    }


    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mFingerPath.reset();//因为之前的效果已经作用在 fgBitmap 上了，所以需要重置 path ，避免对下一步造成影响
                mFingerPath.moveTo(event.getX(), event.getY());
                break;
            case MotionEvent.ACTION_MOVE:
                mFingerPath.lineTo(event.getX(), event.getY());
                break;
            case MotionEvent.ACTION_UP:

                break;
        }
        mCanvas1.drawPath(mFingerPath, mTransparentPaint);//使透明的效果作用到 fgBitmap 上。
        invalidate();//执行重绘
        return true;
    }
}

好了，我们一步一步实现了最终效果，如果文中有什么知识点是错误的或者更好的实现方法，请及时联系我进行修改，以免误导别人。谢谢。