Android实现简单刮刮卡效果

     目前在很多购物类APP上都可以看到一些转盘抽奖或是刮刮卡刮奖的功能，主要是在增加APP功能和体验的同时，吸引更多的用户使用相应的APP。这两天也在学习相关的资料，其实实现起来不难，首先我们来点简单的，就是实现刮奖效果，结果就是用手指刮屏幕后，会显示一张图片，这个图片是根据自己需要来设置的。

public class ScratchCardView extends View {
private Paint mPaint;// 画笔
private Path mPath;// 绘制路径
private Canvas mCanvas;// 画面Canvas
private int mLastX;// 手指移动后X位置
private int mLastY;// 手指移动后Y位置
private Bitmap mTopBitmap;// 位于上层图片
private Bitmap mBottomBitmap;// 两张图片中底下那一张

public ScratchCardView(Context context) {
this(context, null, 0);

}

public ScratchCardView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initViewsParams();
}

public ScratchCardView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

/**
* 初始化相关数据及参数
* @description：
*/
private void initViewsParams() {
mPath = new Path();
mPaint = new Paint();
mBottomBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.inner_bg);//这里就是设置底层图片数据

}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int width = getMeasuredWidth();// 获取到宽度
int height = getMeasuredHeight();// 获取到高度
mTopBitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);// 根据参数创建新位图
mCanvas = new Canvas(mTopBitmap);
// 设置画笔参数
setBitmapPaint();
}


private void setBitmapPaint() {
mPaint.setColor(Color.GREEN);// 设置颜色
mPaint.setAntiAlias(true);// 设置抗紧锯齿
mPaint.setDither(true);// 防抖动
mPaint.setStrokeJoin(Paint.Join.ROUND);// 设置图形结合处的样子
mPaint.setStrokeCap(Paint.Cap.ROUND);// 设置画笔的图形样式，如圆形样式
mPaint.setStyle(Style.STROKE);// 设置画笔样式为空心
mPaint.setStrokeWidth(20);// 设置画笔粗细
mCanvas.drawColor(Color.parseColor("#c0c0c0"));
}

@Override
public boolean onTouchEvent(MotionEvent event) {
int action = event.getAction();
int x = (int) event.getX();// 当前x
int y = (int) event.getY();// 当前y
switch (action) {
case MotionEvent.ACTION_DOWN:
mLastX = x;
mLastY = y;
mPath.moveTo(mLastX, mLastY);// 移动Path
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;
break;
case MotionEvent.ACTION_UP:
break;

default:
break;
}
invalidate();
return true;

}

@Override
protected void onDraw(Canvas canvas) {
canvas.drawBitmap(mBottomBitmap, 0, 0, null);
mPaint.setXfermode(new PorterDuffXfermode(Mode.DST_OUT));// ProterDuffXfermode用法可以参考：http://www.2cto.com/kf/201504/388144.html
mCanvas.drawPath(mPath, mPaint);
canvas.drawBitmap(mTopBitmap, 0, 0, null);
}
}

使用的话，把这个View放到布局文件中，添加好对应的图片资源，就可以实现啦！