首先来看一下效果图：（这是医生的书《Android群英传》中的一个知识点）
我的 CSDN地址
刮刮卡效果
涉及到的知识点
1. [2D绘图基础](http://blog.csdn.net/zone_/article/details/70456348)
2. PorterDuffXfermode
绘制思路：
- 绘制两个图层，第一层绘制想要显示的图案，第二层绘制遮罩层（这两个图层中，是第二个图层覆盖第一个图层）
- 让手指滑过的地方变成透明，就可以看到第一层的图片了。
第一步：绘制两个图层
先来看一下第一步绘制好之后的效果：
这里写图片描述
首先是初始化一些数据：
成员变量：
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;
}
}
好了，我们一步一步实现了最终效果，如果文中有什么知识点是错误的或者更好的实现方法，请及时联系我进行修改，以免误导别人。谢谢。