android刮奖控件,[Android]一个高自由度的刮刮卡刮奖效果Demo

本Demo旨在实现刮刮卡效果，优点是可自由实现刮层下的内容，附赠一个可随路径移动的橡皮擦。

在写正文之前，先感谢一下鸿洋大神的【Android 自定义控件实现刮刮卡效果 真的就只是刮刮卡么】这篇文章，此文章手把手教你实现一个刮刮卡效果，有助于从0开始理解刮奖效果是怎么实现的(绝大多数的刮奖效果实现原理是一样的)。

效果图

trimmedVideo_eo_20190726_175154.gif

实现

刮奖效果实现的核心是PorterDuffXfermode这个类，PorterDuffXfermode是一种集合概念，交集、并集等图像的混合显示模式。它提供了16个常用Mode，而我这里将要使用的Mode是PorterDuff.Mode.CLEAR，clear的意思很直白，清除。此外还有一个Mode， PorterDuff.Mode.DST_OUT可以使用，此处这两个Mode实现的效果是一样的。PorterDuffXfermode所有Mode的使用效果请自行百度。

刮奖效果实现原理

将Bitmap设置成底层画板，创建画笔，设置画笔Xfermode为PorterDuff.Mode.CLEAR，然后重写onTouchEvent，使用画笔画出手势移动的路径，那么画笔所经过的地方就会被擦除。

GuaGuaKaLayer.java

import android.content.Context;

import android.content.res.Resources;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.Path;

import android.graphics.PorterDuff;

import android.graphics.PorterDuffXfermode;

import android.support.annotation.Nullable;

import android.util.AttributeSet;

import android.view.MotionEvent;

import android.view.View;

import com.adminstrator.guaguakaapplication.R;

/**

* Created by Administrator on 2019/7/26.

* 刮刮卡的蒙层View

*/

public class GuaGuaKaLayer extends View {

/**

* 绘制线条的Paint,即用户手指绘制Path

*/

private Paint mOutterPaint = new Paint();

/**

* 记录用户绘制的Path

*/

private Path mPath = new Path();

/**

* 内存中创建的Canvas

*/

private Canvas mCanvas;

/**

* mCanvas绘制内容在其上

*/

private Bitmap mBitmap;

/**

* 蒙层和橡皮擦

* */

private Bitmap mBackBitmap;

private Bitmap moveBitmap;

/**

* 记录手势移动位置

* */

private int mLastX;

private int mLastY;

/**

* 用于判断何时算刮开完成

* */

private boolean isComplete = false;

/**

* 用于判断是否显示橡皮擦

* */

private boolean isDownOrMove = false;

private Resources resources;

public GuaGuaKaLayer(Context context) {

this(context, null);

}

public GuaGuaKaLayer(Context context, @Nullable AttributeSet attrs) {

this(context, attrs, 0);

}

public GuaGuaKaLayer(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

resources = context.getResources();

init();

}

private void init() {

mPath = new Path();

}

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

int width = getMeasuredWidth();

int height = getMeasuredHeight();

//初始化bitmap

mBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);

mCanvas = new Canvas(mBitmap);

//设置画笔

mOutterPaint.setColor(Color.RED);

mOutterPaint.setAntiAlias(true);

mOutterPaint.setDither(true);

mOutterPaint.setStyle(Paint.Style.STROKE);

mOutterPaint.setStrokeJoin(Paint.Join.ROUND);

mOutterPaint.setStrokeCap(Paint.Cap.ROUND);

//设置画笔宽度

mOutterPaint.setStrokeWidth(20);

//将Bitmap精确缩放到指定的大小

Bitmap tempBackBitmap = Bitmap.createBitmap(BitmapFactory.decodeResource(resources, R.drawable.guaguaceng));

Bitmap tempMoveBitmap = Bitmap.createBitmap(BitmapFactory.decodeResource(resources, R.drawable.cleaner));

moveBitmap = Bitmap.createScaledBitmap(tempMoveBitmap,100,100,true);

mBackBitmap= Bitmap.createScaledBitmap(tempBackBitmap, width, height, true);

mCanvas.drawBitmap(mBackBitmap, 0, 0, null);

}

@Override

protected void onDraw(Canvas canvas) {

if (!isComplete) {

drawPath();

canvas.drawBitmap(mBitmap, 0, 0, null);

if(isDownOrMove){

//绘制橡皮擦

canvas.drawBitmap(moveBitmap, mLastX - moveBitmap.getWidth()/2, mLastY - moveBitmap.getHeight()/2, null);

}

}

}

/**

* 绘制线条

* */

private void drawPath() {

mOutterPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));

// mOutterPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));

mCanvas.drawPath(mPath, mOutterPaint);

}

@Override

public boolean onTouchEvent(MotionEvent event) {

int action = event.getAction();

int x = (int) event.getX();

int y = (int) event.getY();

switch (action) {

case MotionEvent.ACTION_DOWN:

mLastX = x;

mLastY = y;

mPath.moveTo(mLastX, mLastY);

isDownOrMove = true;

break;

case MotionEvent.ACTION_MOVE:

int dx = Math.abs(x - mLastX);

int dy = Math.abs(y - mLastY);

if (dx > 3 || dy > 3) {

mPath.lineTo(x, y);

}

mLastX = x;

mLastY = y;

isDownOrMove = true;

break;

case MotionEvent.ACTION_UP:

isDownOrMove = false;

new Thread(mRunnable).start();

break;

}

invalidate();

return true;

}

/**

* 统计擦除区域任务

*/

private Runnable mRunnable = new Runnable() {

private int[] mPixels;

@Override

public void run() {

int w = getWidth();

int h = getHeight();

float wipeArea = 0;

float totalArea = w * h;

Bitmap bitmap = mBitmap;

mPixels = new int[w * h];

/**

* 拿到所有的像素信息

*/

bitmap.getPixels(mPixels, 0, w, 0, 0, w, h);

/**

* 遍历统计擦除的区域

*/

for (int i = 0; i < w; i++) {

for (int j = 0; j < h; j++) {

int index = i + j * w;

//被擦除

if (mPixels[index] == 0) {

wipeArea++;

}

}

}

/**

* 根据所占百分比，进行一些操作

*/

if (wipeArea > 0 && totalArea > 0) {

int percent = (int) (wipeArea * 100 / totalArea);

if (percent > 70) {

isComplete = true;

postInvalidate();

}

}

}

};

}

使用

在布局文件中使用FrameLayout包裹刮刮乐底层内容和蒙层

文件中TextView可替换成任意控件和布局，自由实现刮层下的内容

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

tools:context="com.adminstrator.guaguakaapplication.MainActivity">

android:layout_width="match_parent"

android:layout_height="match_parent">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@drawable/p1" />

android:layout_width="match_parent"

android:layout_height="match_parent" />