android 实现刮刮乐刮奖效果

在做电商类产品时，经常会有一些活动需求，如抽奖，抽奖的一种方式就是刮刮乐，这次的内容是利用重写View的方式实现刮刮乐的效果。

思路：利用Bitmap做刮奖区的蒙版，利用paint将手指触摸过的区域置为透明，即可显示最先draw过的文字或者图片。以下为该View的具体实现：

package com.example.zhangyulong.guajiangtest;

import android.content.Context;
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.os.Handler;
import android.os.Message;
import android.os.SystemClock;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Toast;

/**
 * Created by zhangyulong on 16/3/31.
 */
public class RubblerView extends View {

private float TOUCH_TOLERANCE; // 填充距离，使线条更自然，柔和,值越小，越柔和。

 // private final int bgColor;
 // 位图
 private Bitmap mBitmap;

private Bitmap mCoverBitmap; //覆盖图 刮奖钱的页面

 // 画布
 private Canvas mCanvas;
// 画笔
 private Paint mPaint;
private Path mPath;
private float mX, mY;
private Paint mTextPaint;
private final int TEXT_SIZE = 60;
private String mText;
private boolean isDraw = false;
private int WIDTH;
private int HEIGHT;
private int openSize;
private Context mContext;
private boolean mHasOpen = false;


public RubblerView(Context context) {
super(context);
        init(context);
    }

public RubblerView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
        init(context);
    }

public RubblerView(Context context, AttributeSet attrs) {
super(context, attrs);
        init(context);
    }

private void init(Context context){
mContext = context;
//由于我们无法在代码里直接对资源文件作修改,故需要得到资源文件的副本
 mCoverBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.guaguale).copy(Bitmap.Config.ARGB_8888, true);

mBitmap = Bitmap.createBitmap(mCoverBitmap.getWidth(),
mCoverBitmap.getHeight(), Bitmap.Config.ARGB_8888);

mCanvas = new Canvas(mBitmap);

WIDTH = mBitmap.getWidth();
HEIGHT = mBitmap.getHeight();

//mCanvas.drawColor(getContext().getResources().getColor(bgColorResource));
 mCanvas.drawBitmap(mCoverBitmap, 0, 0, new Paint());
    }

@Override
    protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (isDraw) {
            canvas.drawText(mText, (mCoverBitmap.getWidth() - TEXT_SIZE * mText.length()) / 2,
                    (mCoverBitmap.getHeight() + TEXT_SIZE) / 2 , mTextPaint); //绘制中奖文字
 mCanvas.drawPath(mPath, mPaint);
            canvas.drawBitmap(mBitmap, 0, 0, null); //绘制刮奖图层
 }
    }

//解决自定义view wrap_content属性失效的问题
 @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int desiredWidth = WIDTH;
int desiredHeight = HEIGHT;

int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);

int width;
int height;

//Measure Width
 if (widthMode == MeasureSpec.EXACTLY) {
//Must be this size
 width = widthSize;
        } else if (widthMode == MeasureSpec.AT_MOST) {
//Can't be bigger than...
 width = Math.min(desiredWidth, widthSize);
        } else {
//Be whatever you want
 width = desiredWidth;
        }

//Measure Height
 if (heightMode == MeasureSpec.EXACTLY) {
//Must be this size
 height = heightSize;
        } else if (heightMode == MeasureSpec.AT_MOST) {
//Can't be bigger than...
 height = Math.min(desiredHeight, heightSize);
        } else {
//Be whatever you want
 height = desiredHeight;
        }

//MUST CALL THIS
 setMeasuredDimension(width, height);
    }

/**
 * 开启檫除功能
 *
 * @param paintStrokeWidth 触点（橡皮）宽度
 * @param touchTolerance 填充距离,值越小，越柔和。
 */
 public void beginRubbler(final int paintStrokeWidth,
float touchTolerance, String text) {
mText = text;
TOUCH_TOLERANCE = touchTolerance;
// 设置画笔
 mPaint = new Paint();
// mPaint.setAlpha(0);
 // 画笔划过的痕迹就变成透明色了
 mPaint.setColor(Color.BLACK); // 此处不能为透明色
 mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
mPaint.setAntiAlias(true);
mPaint.setDither(true);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeJoin(Paint.Join.ROUND); // 前圆角
 mPaint.setStrokeCap(Paint.Cap.ROUND); // 后圆角
 mPaint.setStrokeWidth(paintStrokeWidth); // 笔宽
 mTextPaint = new Paint();
mTextPaint.setColor(Color.BLACK);
mTextPaint.setStyle(Paint.Style.STROKE);
mTextPaint.setTextSize(TEXT_SIZE);

// 痕迹
 mPath = new Path();
isDraw = true;
        Thread thread = new Thread(mRunnable);
        thread.start();
    }

@Override
    public boolean onTouchEvent(MotionEvent event) {
if (!isDraw) {
return true;
        }
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: // 触点按下
 touchDown(event.getX(), event.getY());
                invalidate();
break;
case MotionEvent.ACTION_MOVE: // 触点移动
 touchMove(event.getX(), event.getY());
                invalidate();
break;
case MotionEvent.ACTION_UP: // 触点弹起
 touchUp(event.getX(), event.getY());
                invalidate();
break;
default:
break;
        }
return true;
    }

private void touchDown(float x, float y) {
mPath.reset();
mPath.moveTo(x, y);
mX = x;
mY = y;
    }

private void touchMove(float x, float y) {
float dx = Math.abs(x - mX);
float dy = Math.abs(y - mY);
if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
mPath.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);
mX = x;
mY = y;
        }

    }

private void touchUp(float x, float y) {
mPath.lineTo(x, y);
mCanvas.drawPath(mPath, mPaint);
mPath.reset();
    }

private Runnable mRunnable = new Runnable() {

@Override
        public void run() {

while (!mHasOpen) {

                SystemClock.sleep(100);

float wipeArea = 0;
float totalArea = WIDTH * HEIGHT;

for (int i = 0; i < WIDTH; i++) {
for (int j = 0; j < HEIGHT; j++) {
int pixel = mBitmap.getPixel(i, j);
if (pixel == 0) {
openSize++;
                        }

                    }
                }
//当刮开区域的像素占整个可刮区域的50%时,展示结果
 if (openSize * 100 / totalArea > 50) {
mHandler.sendEmptyMessage(0);
                }
openSize = 0; //刮开区域归零
 }

        }
    };

private Handler mHandler = new Handler() {
public void handleMessage(Message msg) {
            Toast.makeText(mContext, "已经刮开了", Toast.LENGTH_SHORT).show();
mHasOpen = true;
        }
    };
}

使用时的代码：

package com.example.zhangyulong.guajiangtest;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

//刮奖控件
 private RubblerView mRubblerView;

@Override
    protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);
mRubblerView = (RubblerView) findViewById(R.id.rubbler);
mRubblerView.beginRubbler(40,
1f , "一等奖");
    }
}