前言
手把手讲解系列文章，是我写给各位看官，也是写给我自己的。
文章可能过分详细，但是这是为了帮助到尽量多的人，毕竟工作5,6年，不能老吸血，也到了回馈开源的时候.
这个系列的文章：
1、用通俗易懂的讲解方式，讲解一门技术的实用价值
2、详细书写源码的追踪，源码截图，绘制类的结构图，尽量详细地解释原理的探索过程
3、提供Github 的 可运行的Demo工程,但是我所提供代码，更多是提供思路，抛砖引玉，请酌情cv
4、集合整理原理探索过程中的一些坑，或者demo的运行过程中的注意事项
5、用gif图，最直观地展示demo运行效果如果觉得细节太细，直接跳过看结论即可。
本人能力有限，如若发现描述不当之处，欢迎留言批评指正。
学到老活到老，路漫漫其修远兮。与众君共勉 !
github地址：
下载之后找到其中的 ScratchCardImageView
效果
刮刮卡.gif
思路
上面的动态图，我们看到了一个
妹纸图，然后是一个灰色的涂层，然后是 通过光标去画的时候出现的空白区域.
然后，下面会显示出当前已经刮了百分之几.
OK, 那么，按照步骤我们一步一步来绘制：
1. 妹纸图
我猜有人可能想直接从资源文件中构建出一个Bitmap然后draw上去，没错，我之前也是这么想的，但是后来，其实有更简单的办法，让自定义View直接 AppCompatImageView，然后onDraw里面直接super.onDraw(canvas)..., 不但省了Draw原图的过程，还省了测量的过程，一举两得。
public class ScratchCardImageView extends AppCompatImageView {
//省略无关代码...
@Override
protected void onDraw(Canvas canvas) {
//1 画原图
super.onDraw(canvas);//这里不可以删掉。。因为画原始图片，就是这里画的
//省略无关代码...
}
}
然后:在布局里面直接使用它就好了:
<study.hank.com.draw001.custom.ScratchCardImageView
android:id="@+id/scView"
android:layout_width="300dp"
android:layout_height="300dp"
android:src="@drawable/girl" />
2. 刮刮卡的灰色涂层
这个时候我们只能老老实实自己写Bitmap了。代码：
/**
* 构建一个灰色图层Bitmap
* @param w
* @param h
* @return
*/
private Bitmap createCoatBitmap(int w, int h) {
Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_4444);//构建一个指定宽高的bitmap
Canvas canvas = new Canvas(bitmap);//新建一个画布
Paint paint = new Paint();//新建画笔
paint.setColor(cardColor);// 灰色
paint.setAntiAlias(true);// 抗锯齿
canvas.drawRect(0, 0, w, h, paint);//这个draw动作，会改变bitmap的内容
return bitmap;
}
在合适的地方，比如onMeasure中（因为测量，在绘制之前）调用createCoatBitmap()并且用全局变量保存它。
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (!inited) {//由于onMeasure有可能会执行两次，而我们没有必要去执行两次初始化绘制，所以加一层控制
//让涂层 和 图片一样宽高
w = getMeasuredWidth();
h = getMeasuredHeight();
mCoatBitmap = createCoatBitmap(w, h);
mCoatCanvas = new Canvas(mCoatBitmap);//把bitmap的内容委托给canvas
inited = true;
}
}
Tips：
这里有个细节：
mCoatCanvas = new Canvas(mCoatBitmap);
这句话，利用一个全局的Canvas mCoatCanvas来接收封装了mCoatBitmap的newCanvas.
因为，mCoatCanvas的drawXXX操作可以影响Bitmap的实际内容.
这里就不得不提Bitmap到底是个神马玩意了:Bitmap，中文翻译：位图; 百度百科上对Bitmap的描述说了很多官话，其实翻译成人话就是这样的：
Bitmap,位图，点阵图。如果是一个1080x1920的位图,就是由横向1080个点 乘以 纵向1920 个像素点构成的一个矩形区域，每一个点都可以有独立的颜色（#AARRGGBB)
对，他就是每一个像素点都可以独立配色的像素点矩形。那么为啥
canvas的draw操作改变它的内容，其实也就是改变了某些像素点的颜色。
从demo的试验中可以得出这个结论.
但是 源码内是如何进行的呢？开始探索源码咯:
从mCoatCanvas = new Canvas(mCoatBitmap);开始
image.png
传入的bitmap被nInitRaster方法封装之后，赋值给了mNativeCanvasWrapper.
image.png
然后在真正去drawPath的时候，利用到了mNativeCanvasWrapper
熟悉C++的朋友应该知道long类型的mNativeCanvasWrapper,只是一个对象指针,但是它能代表之前构造函数传入的Bitmap.
以此类推，看看其他的draw方法，无一例外，全都用到了mNativeCanvasWrapper
image.png
这下能解释得通了。
上面有了刮刮涂层的mCoatBitmap,那下一步就是画 刮刮涂层了:
@Override
protected void onDraw(Canvas canvas) {
//1 画原图
super.onDraw(canvas);//这里不可以删掉。。因为画原始图片，就是这里画的
//省略N行...
//看来drawBitmap有另外的图层保存方式
int layer = canvas.saveLayer(0, 0, getWidth(), getHeight(), mPaint, Canvas.ALL_SAVE_FLAG);//保存当前层
// 2 画涂层
canvas.drawBitmap(mCoatBitmap, 0, 0, mPaint);//绘制位图只需要 l和t两个参数，已这个为左上角起点开始绘制，可能会越界
//省略N行...
canvas.restoreToCount(layer);// 回到指定图层
}
TIPS:
这里又有一个细节,
canvas.saveLayer和canvas.restoreToCount,从命名可以知道是保存和恢复的意思:
他们的作用是，保存图层以及恢复到指定图层。由于我们这里使用了多层绘图（一层原图，一层刮涂层），而且绘制多次执行，所以必须绘制一次之后还原。具体关于save和restore，本文篇幅有限，就不详述了，可以参照 https://www.jianshu.com/p/e90accd0967f 说的很详细。
3.光标划过之后出现的透明区域
要根据 滑动事件来绘制图形，自然离不开 onTouchEvent的重写：
看了下面的代码，应该会发现，在构建
path的时候，我用了quadTo画了二阶贝塞尔曲线，原本我想的是直接用lineTo算了，后来发现，确实有点丑，而用贝塞尔曲线，好看的多。这里没有什么技术细节，纯粹是美观原因。
private Path mPath;//要接收手指滑过的地方，要用Path保存
/**
* 监控手势，改变mPath
*
* @param e
* @return
*/
@Override
public boolean onTouchEvent(MotionEvent e) {
//...省略无关代码
switch (e.getAction()) {
case MotionEvent.ACTION_DOWN:
lastX = e.getX();
lastY = e.getY();
mPath.moveTo(lastX, lastY);
break;
case MotionEvent.ACTION_MOVE: //?!!? MMP，为什么你收不到MOVE事件，只能认为是被拦截了
// 手指移动，划线
float endX = (lastX + e.getX()) / 2;
float endY = (lastY + e.getY()) / 2;
mPath.quadTo(lastX, lastY, endX, endY);
lastX = endX;
lastY = endY;
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
break;
default:
break;
}
//...省略无关代码
return super.onTouchEvent(e);
// 这里有个疑问.为什么这里不是true，我就收不到move事件，是不是ImageView特有的
// MMP,原来是clickable的问题。 我在xml里面加了
}
有了Path，那么就要drawPath:
@Override
protected void onDraw(Canvas canvas) {
//1 画原图
super.onDraw(canvas);//这里不可以删掉。。因为画原始图片，就是这里画的
//省略无关代码...
//看来drawBitmap有另外的图层保存方式
int layer = canvas.saveLayer(0, 0, getWidth(), getHeight(), mPaint, Canvas.ALL_SAVE_FLAG);//保存当前图层
// 2 画涂层
canvas.drawBitmap(mCoatBitmap, 0, 0, mPaint);//绘制位图只需要 l和t两个参数，已这个为左上角起点开始绘制，可能会越界
// 3 画path
mPaint.setXfermode(xfermode);//设置模式
canvas.drawPath(mPath, mPaint);//再去画
// 记得要把mCoatBitmap的状态保存一下
mCoatCanvas.drawPath(mPath, mPaint);
//记得清掉mode。。不然下一次 onDraw 会出事
mPaint.setXfermode(null);
canvas.restoreToCount(layer);// 回到指定图层
}
TIPS
1、drawPath，这里将画笔设置了Xfermode模式，此模式能够决定绘制的内容和原内容的关系，不同的模式决定在绘制之后保留不同的部分，
这里使用的是xfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_OUT);它会保留 原内容和新绘制的内容交集之外的部分。（Xfermode的16种模式，请参考其他博客，此文不作详细描述 ）
2、绘制完了之后，记得将mPaint的xfermode设置为null，因为绘制会多次执行，画笔必须还原状态.
3、记得给之前 涂层委托者mCoatCanvas也绘制一次，这是为了记录当前path一共划过了整个涂层的百分之多少.
其实到了这里，我们已经实现了涂层刮刮卡的效果。
但是锦上添花，多加3个功能:
1)计算当前一共划过了百分之多少
int w = getWidth();
int h = getHeight();
float totalPx = w * h;//总像素点个数
int[] pxArr = new int[w * h];//用一个数组去缓存
mCoatBitmap.getPixels(pxArr, 0, w, 0, 0, w, h);// 获得当前bitmap的像素点数组，把它注入到pxArr中
int cleanedPx = 0;
//宽高二维解析
for (int col = 0; col < h; col++) {
for (int row = 0; row < w; row++) {
if (pxArr[col * w + row] == 0) {//手指滑过之后，当前位置的像素点就会被置为0
cleanedPx++;//已经被清空的像素点个数
}
}
}
float res = cleanedPx / totalPx;//计算一共滑过了百分之多少
前面解释过，bitmap就是一个每个像素点颜色独立的矩形区域，这里先将矩形区域定义好，然后获得每一个像素点，而手指划过之后的像素点的颜色，会置为0（这个和xfermode模式有关）,经过对比，就能计算出为0的像素点有多少个，和总的像素点个数相除，就能得出最终百分比。最后将百分比返回出去，提供一个回调给外界，就能得到文章开头的gif图效果。
2) 刮了一定的百分比就要自动显示全图：
定义Runnable 按照对比 当前划过区域的百分比和显示全图的临界值，看情况决定是否刷新View
Runnable showAllRunnable = new Runnable() {
@Override
public void run() {
//判定是否具备展示全图的条件：
//条件为：当前滑过的面积是否超过了临界百分比，比如30%
int w = getWidth();
int h = getHeight();
float totalPx = w * h;//总像素点个数
int[] pxArr = new int[w * h];//用一个数组去缓存
mCoatBitmap.getPixels(pxArr, 0, w, 0, 0, w, h);// 获得当前bitmap的像素点数组，把它注入到pxArr中
int cleanedPx = 0;
//宽高二维解析
for (int col = 0; col < h; col++) {
for (int row = 0; row < w; row++) {
if (pxArr[col * w + row] == 0) {//手指滑过之后，当前位置的像素点就会被置为0
cleanedPx++;//已经被清空的像素点个数
}
}
}
float res = cleanedPx / totalPx;//计算一共滑过了百分之多少
if (callback != null)
callback.scratch(res);
if (res > SHOW_ALL_PERCENT) {//临界值0.2
ifShowAll = true;//保存状态，显示全图
postInvalidate();//利用handler发送事件
} else {
ifShowAll = false;
}
}
};
3) 增加 涂层重置 和 显示原图的api
public void showAll() {
ifShowAll = true;//保存状态，显示全图
postInvalidate();
}
public void reset() {
//重置mCoatBitmap，重置path，重置ifShowAll为false，然后刷新
mCoatBitmap = createCoatBitmap(w, h);
mCoatCanvas = new Canvas(mCoatBitmap);
mPath.reset();
ifShowAll = false;
postInvalidate();
}
最后
别忘了
Bitmap是重量级的，不用了必须回收
public void recycle() {
if (mCoatBitmap != null)
mCoatBitmap.recycle();
}
public class ScratchCardActivity extends AppCompatActivity {
...
@Override
protected void onDestroy() {
super.onDestroy();
scratchCardImageView.recycle();
}
}
结语
本文主要是 学会展示xfermode在实际工作中的应用，这种刮刮卡效果，在现有需求中并不罕见，所以学会了，一定不会亏。除了xfermode之外，还有一些发散只是，比如 save/saveLayer /restore/restoreToCount ，贝塞尔曲线等等，本文没有对他们进行详述。
喜欢的大佬们看过了记得点赞哟，蟹蟹~
网友评论