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 方形