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 方形 您可能感兴趣的文章:Android自定义View实现QQ运动积分转盘抽奖功能Android使用surfaceView自定义抽奖大转盘Android中利用SurfaceView制作抽奖转盘的全流程攻略Android抽奖轮盘的制作方法Android打造流畅九宫格抽奖活动效果Android简单实现圆盘抽奖界面Android实现抽奖转盘实例代码js和HTML5实现手机端刮刮卡抽奖效果完美兼容android/iOSAndroid自定义View实现抽奖转盘