手把手讲解 - 一个复杂动效的自定义绘制 3，最全 153 道 Spring 全家桶面试题

Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_4444);//构建一个指定宽高的 bitmapCanvas 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()并且用全局变量保存它。

@Overrideprotected 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 的内容委托给 canvasinited = true;}}

#####Tips：这里有个细节：mCoatCanvas = new Canvas(mCoatBitmap);这句话，利用一个全局的Canvas mCoatCanvas来接收封装了mCoatBitmap的 new Canvas.因为，mCoatCanvas的drawXXX操作可以影响Bitmap的实际内容.这里就不得不提Bitmap到底是个神马玩意了:

Bitmap，中文翻译：位图; 百度百科上对 Bitmap 的描述说了很多官话，其实翻译成人话就是这样的：Bitmap,位图，点阵图。如果是一个1080x1920的位图,就是由横向 1080 个点 乘以 纵向 1920 个像素点构成的一个矩形区域，每一个点都可以有独立的颜色（#AARRGGBB)对，他就是每一个像素点都可以独立配色的像素点矩形。

那么为啥canvas的draw操作改变它的内容，其实也就是改变了某些像素点的颜色。从demo的试验中可以得出这个结论.但是 源码内是如何进行的呢？开始探索源码咯:从mCoatCanvas = new Canvas(mCoatBitmap);开始

传入的 bitmap 被nInitRaster方法封装之后，赋值给了mNativeCanvasWrapper.

然后在真正去 drawPath 的时候，利用到了mNativeCanvasWrapper熟悉C++的朋友应该知道 long类型的mNativeCanvasWrapper,只是一个对象指针,但是它能代表之前构造函数传入的Bitmap.以此类推，看看其他的draw方法，无一例外，全都用到了mNativeCanvasWrapper

这下能解释得通了。

上面有了刮刮涂层的mCoatBitmap,那下一步就是画 刮刮涂层了:

@Overrideprotected 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 保存/**

• 监控手势，改变 mP

【一线大厂Java面试题解析+核心总结学习笔记+最新架构讲解视频+实战项目源码讲义】
浏览器打开：qq.cn.hn/FTf 免费领取

ath*

• @param e

• @return*/@Overridepublic 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:

@Overrideprotected 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 画 pathmPaint.setXfermode(xfermode);//设置模式 canvas.drawPath(mPath, mPaint);//再去画// 记得要把 mCoatBitmap 的状态保存一下 mCoatCanvas.drawPath(mPath, mPaint);//记得清掉 mode。。不然下一次 onDraw 会出事 mPaint.setXfermode(null);canvas.restoreToCount(layer);// 回到指定图层}

#####TIPS1、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) {//手指滑过之后，当前位置的像素点就会被置为 0cleanedPx++;//已经被清空的像素点个数}}}

float res = cleanedPx / totalPx;//计算一共滑过了百分之多少

前面解释过，bitmap 就是一个每个像素点颜色独立的矩形区域，这里先将矩形区域定义好，然后获得每一个像素点，而手指划过之后的像素点的颜色，会置为 0（这个和 xfermode 模式有关）,经过对比，就能计算出为 0 的像素点有多少个，和总的像素点个数相除，就能得出最终百分比。最后将百分比返回出去，提供一个回调给外界，就能得到文章开头的 gif 图效果。

#####2) 刮了一定的百分比就要自动显示全图：定义Runnable 按照对比 当前划过区域的百分比和显示全图的临界值，看情况决定是否刷新 View

Runnable showAllRunnable = new Runnable() {@Overridepublic 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) {//手指滑过之后，当前位置的像素点就会被置为 0cleanedPx++;//已经被清空的像素点个数}}}