Andriod实现刮刮卡的效果

思想：

将一个View设计成多层，内层（包括中奖信息）和外层（用于刮奖），外层的图层用Canvas与一个Bitmap关联，用这个关联的Bitmap来处理手势的滑动，类似于刮奖的动作。

使用paint.setXfermode 来进行消除手势滑动区域

package com.jackie.guaguale;

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.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

/**
* Created by Administrator on 2015/7/29.
*/
public class GuaView extends View {
private Path mPath;
private Paint mInnerPaint;  //内层图层Paint
private Paint mOuterPaint;  //外层图层Paint
private Bitmap mGuaBitmap;  //用于处理刮奖的Bitmap
private Bitmap mOuterBitmap;  //外层图层Bitmap
private Canvas mCanvas;

private int mWidth, mHeight;

private float mLastX;
private float mLastY;

private String mText;

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

private void init() {
mPath = new Path();
mOuterPaint = new Paint();
mInnerPaint = new Paint();

//创建外层图层
mOuterBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.guaguaka).copy(Bitmap.Config.ARGB_8888, true);
mText = "¥500";
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);

mWidth = mOuterBitmap.getWidth();
mHeight = mOuterBitmap.getHeight();

//创建内层图层
mGuaBitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);
mCanvas = new Canvas(mGuaBitmap);
mCanvas.drawBitmap(mOuterBitmap, 0, 0, null); //将mOuterBitmap画到mCanvas上，与mGuaBitmap关联

setOuterPaint();
setInnerPaint();
}

private void setInnerPaint() {
mInnerPaint.setColor(Color.RED);
mInnerPaint.setStyle(Paint.Style.STROKE);
mInnerPaint.setStrokeCap(Paint.Cap.ROUND);
mInnerPaint.setStrokeJoin(Paint.Join.ROUND);
mInnerPaint.setAntiAlias(true);
mInnerPaint.setDither(true); //防抖
mInnerPaint.setStrokeWidth(5);
mInnerPaint.setTextSize(100);
mInnerPaint.setTextAlign(Paint.Align.CENTER);
}

private void setOuterPaint() {
mOuterPaint.setColor(Color.GREEN);
mOuterPaint.setStyle(Paint.Style.STROKE);
mOuterPaint.setStrokeCap(Paint.Cap.ROUND);
mOuterPaint.setStrokeJoin(Paint.Join.ROUND);
mOuterPaint.setAntiAlias(true);
mOuterPaint.setDither(true); //防抖
mOuterPaint.setStrokeWidth(20);
}

@Override  //Path
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX();
float y = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mLastX = x;
mLastY = y;
mPath.moveTo(x, y);
break;
case MotionEvent.ACTION_MOVE:
float deltaX = Math.abs(x - mLastX);
float deltaY = Math.abs(y - mLastY);
if (deltaX > 5 || deltaY > 5) {
mPath.lineTo(x, y);
}
mLastX = x;
mLastY = y;
break;
case MotionEvent.ACTION_UP:
break;
}
invalidate();
return true;
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);

canvas.drawColor(Color.parseColor("#bbbbbb")); //背景底色  灰色
canvas.drawText(mText, mWidth / 2, mHeight / 4 * 3, mInnerPaint); //绘制文本
canvas.drawBitmap(mGuaBitmap, 0, 0, null); //绘制外层Bitmap, 将mBitmap显示在界面上
drawPath();
}

private void drawPath() {
//使用该mode：dst和src相交后， 只保留dst，且除去相交的部份
mOuterPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
mCanvas.drawPath(mPath, mOuterPaint);
}
}

效果图如下：