#####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 ,那下一步就是画 刮刮涂层 了:
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int layer = canvas.saveLayer(0, 0, getWidth(), getHeight(), mPaint, Canvas.ALL_SAVE_FLAG);
canvas.drawBitmap(mCoatBitmap, 0, 0, mPaint);
canvas.restoreToCount(layer);
}
#####TIPS: 这里又有一个细节, canvas.saveLayer 和 canvas.restoreToCount ,从命名可以知道是 保存 和 恢复 的意思: 他们的作用是,保存图层以及恢复到指定图层。由于我们这里使用了多层绘图(一层原图,一层刮涂层),而且绘制多次执行,所以必须绘制一次之后还原。具体关于save 和restore ,本文篇幅有限,就不详述了,可以参照 https://www.jianshu.com/p/e90accd0967f 说的很详细。
###3.光标划过之后出现的透明区域 要根据 滑动事件来绘制图形,自然离不开 onTouchEvent 的重写:
看了下面的代码,应该会发现,在构建path 的时候,我用了quadTo 画了二阶贝塞尔曲线,原本我想的是直接用lineTo 算了,后来发现,确实有点丑,而用贝塞尔曲线 ,好看的多。这里没有什么技术细节,纯粹是美观原因。
private Path mPath;
@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:
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);
}
有了Path,那么就要drawPath :
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int layer = canvas.saveLayer(0, 0, getWidth(), getHeight(), mPaint, Canvas.ALL_SAVE_FLAG);
canvas.drawBitmap(mCoatBitmap, 0, 0, mPaint);
mPaint.setXfermode(xfermode);
canvas.drawPath(mPath, mPaint);
mCoatCanvas.drawPath(mPath, mPaint);
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);
int cleanedPx = 0;
for (int col = 0; col < h; col++) {
for (int row = 0; row < w; row++) {
if (pxArr[col * w + row] == 0) {
cleanedPx++;
}
}
}
float res = cleanedPx / totalPx;
前面解释过,bitmap就是一个每个像素点颜色独立的矩形区域,这里先将矩形区域定义好,然后获得每一个像素点,而手指划过之后的像素点的颜色,会置为0(这个和xfermode模式有关),经过对比,就能计算出为0的像素点有多少个,和总的像素点个数相除,就能得出最终百分比。最后将百分比返回出去,提供一个回调给外界,就能得到文章开头的gif图效果。
#####2) 刮了一定的百分比就要自动显示全图: 定义Runnable 按照对比 当前划过区域的百分比和显示全图的临界值,看情况决定是否刷新View
Runnable showAllRunnable = new Runnable() {
@Override
public void run() {
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);
int cleanedPx = 0;
for (int col = 0; col < h; col++) {
for (int row = 0; row < w; row++) {
if (pxArr[col * w + row] == 0) {
cleanedPx++;
}
}
}
float res = cleanedPx / totalPx;
if (callback != null)
callback.scratch(res);
if (res > SHOW_ALL_PERCENT) {
ifShowAll = true;
postInvalidate();
} else {
ifShowAll = false;
}
}
};
#####3) 增加 涂层重置 和 显示原图的api
public void showAll() {
ifShowAll = true;
postInvalidate();
}
|