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);
    }
}