跟支付宝那个刮刮卡差不多，体验可能更好点（个人以为）
先看图：
这是刮开的效果图
刮开.gif
看起来还可以吧
当刮开面积超过70%的时候，显示全部底图
显示奖励.gif
使用
xml
<com.riverlet.scratchcard.ScratchCardView
android:id="@+id/scratch_card_01"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_centerInParent="true"
android:layout_marginTop="5dp" />
activity
ScratchCardView scratchCardView = findViewById(R.id.scratch_card_01);
scratchCardView.setDownLayer(R.drawable.down);//设置谜底
scratchCardView.setUpLayer(R.drawable.up);//设置遮盖层
//这是刮开谜底完成的回调
scratchCardView.setOnCompleteListener(new ScratchCardView.OnCompleteListener() {
@Override
public void onComplete() {
Log.d(TAG,"完成00");
}
});
setDownLayer和setUpLayer还支持文字、颜色和Bitmap
---------------------只使用看到这里就可以了----------------------------------
刮卡需要实现的基本代码
Bitmap canvasBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);//创建一个Bitmp
Canvas scratchCanvas = new Canvas(canvasBitmap);//初始化画布
RectF rectF = new RectF(0, 0, width, height);//初始化画布和遮盖层绘制的位置
scratchCanvas.drawBitmap(upLayer.bitmap, null, rectF, null);//把还在遮盖绘制到画布上
Paint pathPaint = new Paint();
pathPaint.setColor(Color.WHITE);//颜色随意，只要不是透明
pathPaint.setStrokeWidth(50);
pathPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));//这里是重点
scratchCanvas.drawPath(path, pathPaint);//把path绘制到画布上，这条遮盖层会被消除
//然后在onDraw或者dispatchDraw使用view的Canvas绘制这个canvasBitmap 就可以了
Coding
绘制
@Override
protected void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
if (rectF != null) {
//绘制下面的图层
drawDownLayer(canvas);
//绘制上面的图层
if (!isComplete) {
canvas.drawBitmap(canvasBitmap, null, rectF, null);
}
}
}
直接在dispatchDraw方法中绘制即可，不过我这里为了方便多种类型的绘制，做了一下封装，根据文字，颜色和图片分类绘制
绘制下面的图层比较简单
private void drawDownLayer(Canvas canvas) {
if (downLayer != null) {
switch (downLayer.type) {
case TYPE_BITMAP:
canvas.drawBitmap(downLayer.bitmap, null, rectF, null);
break;
case TYPE_COLOR:
canvas.drawColor(downLayer.color);
break;
case TYPE_TEXT:
canvas.drawColor(downLayer.color);
canvas.drawText(downLayer.text, downLayer.textStartX, downLayer.textStartY, downLayer.paint);
break;
}
}
}
绘制上面的图层
绘制上面的额图层就比较麻烦了，先创建一个跟View相同大小的Bitmap,使用它作为Canvas操作的对象,先把上面的图（遮盖层）绘制到上面，
private void initCanvas(int width, int height) {
//初始化画布
canvasBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
scratchCanvas = new Canvas(canvasBitmap);
rectF = new RectF(0, 0, width, height);
if (downLayer.type == TYPE_TEXT) {
measureDownText();
}
drawUpLayer();
}
初始化一个Path记录手机移动的位置，初始化Path的Paint
pathPaint = new Paint();
pathPaint.setColor(Color.WHITE);//颜色随意，只要不是透明
pathPaint.setAntiAlias(true);
pathPaint.setDither(true);
pathPaint.setStyle(Paint.Style.STROKE);
pathPaint.setStrokeJoin(Paint.Join.ROUND); // 圆角
pathPaint.setStrokeCap(Paint.Cap.ROUND); // 圆角
pathPaint.setStrokeWidth(50);
pathPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));//这里是重点
//初始化path
path = new Path();
关于Xfermode，这里配上经典说明图一张
Xfermode.jpg
也就是path的Paint的Xfermode类型是DST_OUT的情况，path所绘制的区域都会变成透明
重写onTouchEvent，记录使用path记录手指轨迹，并绘制在我们创建的画布上（scratchCanvas ）
@Override
public boolean onTouchEvent(MotionEvent event) {
int x = (int) (event.getX());
int y = (int) (event.getY());
int offsetX = (int) (rectF != null ? rectF.left : 0);
int offsetY = (int) (rectF != null ? rectF.top : 0);
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mLastX = x;
mLastY = y;
path.moveTo(x - offsetX, y - offsetY);
getParent().requestDisallowInterceptTouchEvent(true);
break;
case MotionEvent.ACTION_MOVE:
int dx = Math.abs(x - mLastX);
int dy = Math.abs(y - mLastY);
if (dx > 3 || dy > 3) {
//贝塞尔曲线
path.quadTo(mLastX - offsetX, mLastY - offsetY, (x + mLastX) / 2 - offsetX, (y + mLastY) / 2 - offsetY);
}
mLastX = x;
mLastY = y;
break;
case MotionEvent.ACTION_UP:
getParent().requestDisallowInterceptTouchEvent(false);
computeScratchArea();
break;
case MotionEvent.ACTION_CANCEL:
getParent().requestDisallowInterceptTouchEvent(false);
computeScratchArea();
break;
}
drawPath();
invalidate();
return true;
}
private void drawPath() {
if (scratchCanvas != null) {
scratchCanvas.drawPath(path, pathPaint);
}
}
计算刮开的面积
即就死按画布上透明像素所占比例，这里思路源于洋神，洋神无敌
private void computeScratchArea() {
if (!isComplete) {
executorService.execute(runnable);
} else {
executorService.shutdownNow();
}
}
//在子线程计算
private Runnable runnable = new Runnable() {
@Override
public void run() {
if (isComplete) {
return;
}
Bitmap bitmap = canvasBitmap;
int w = getWidth();
int h = getHeight();
int[] pixels = new int[w * h];
float wipeArea = 0;
float totalArea = w * h;
//获取像素数据
bitmap.getPixels(pixels, 0, w, 0, 0, w, h);
//遍历色素值为0的像素，也就是透明区域
for (int i = 0; i < w; i++) {
for (int j = 0; j < h; j++) {
int index = i + j * w;
if (pixels[index] == 0) {
wipeArea++;
}
}
}
if (wipeArea > 0 && totalArea > 0) {
int percent = (int) (wipeArea * 100 / totalArea);
Log.e("TAG", percent + "");
if (percent > 70 && !isComplete) {
isComplete = true;
postInvalidate();
Log.d(TAG, "........." + isComplete);
if (onCompleteListener != null) {
post(new Runnable() {
@Override
public void run() {
onCompleteListener.onComplete();
}
});
}
}
}
}
};
描述能力有限，看不懂的小伙伴，直接看代码：代码地址
-----------------------------------------------------------------------------------------------------------
暴富镇楼
暴富小时候.jpg
网友评论