Android App中实现简单的刮刮卡抽奖效果的实例详解

主要思想：
将一个view设计成多层：背景层，含中奖信息等；
遮盖层，用于刮奖，使用关联一个Bitmap的Canvas
在该Bitmap上，使用它的canvas.drawPath的api来处理 手势滑动(类似刮奖的动作)
使用paint.setXfermode 来进行消除手势滑动区域

public class GuaView extends View {

private Bitmap mBitmap; //遮盖的图层
 private Canvas mCanvas; //绘制遮盖图层
 private Paint mOuterPaint;
 private Path mPath;
 private float mLastX;
 private float mLastY;

private Bitmap mCoverBitmap; //遮盖图
 private int mWidth, mHeight;
 private Paint mInnerPaint;
 private String mInfo;

public GuaView(Context context) {
   this(context, null);
 }

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

init();
 }

private void init() {
   mPath = new Path();
   mOuterPaint = new Paint();
   mInnerPaint = new Paint();
   mCoverBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.fg_guaguaka);

mInfo = "￥ 5 0 0";
 }

@Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
   super.onMeasure(widthMeasureSpec, heightMeasureSpec);
   mWidth = mCoverBitmap.getWidth();
   mHeight = mCoverBitmap.getHeight();
   setMeasuredDimension(mWidth, mHeight);

mBitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);
   mCanvas = new Canvas(mBitmap);
   mCanvas.drawBitmap(mCoverBitmap, 0, 0, null);

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();//调用onDraw
   return true;
 }

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

canvas.drawColor(Color.parseColor("#bbbbbb")); //背景底色 灰色
   canvas.drawText(mInfo, mWidth / 2, mHeight / 4 * 3, mInnerPaint); //绘制文本
   canvas.drawBitmap(mBitmap, 0, 0, null); //绘制mBitmap  这是一个可变的bitmap，通过mCanvas绘制，首先绘制了mCoverBitmap
   drawPath();

}

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

Paint.Join 连续画笔衔接时：

•         MITER 在外边缘以一个锐角连接

•         ROUND 以圆弧

•         BEVEL 以直线

Paint.Cap 指定对于 线和路径(lines and paths) 的开始和结束点的处理方式：

•         BUTT  ends with the path  不超越它

•         ROUND  with the center at the end of the path 半圆

•         SQUARE  with the center at the end of the path 方形