android之刮刮卡中獎效果PorterDuffXfermode與paint屬性詳解

支付寶支付的時候有個中獎的的刮刮效果，現仿造做一個，效果如下：

直接上代碼，複製替換圖片就可以使用：每一段幾乎都有註釋，看着已經是比較明瞭了

   

package com.example.administrator.shapedropshadow;

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;

/**
 * author : zhongwr on 2016/7/7
 */
public class PorterDuffXfermodeView extends View {

    /**
     * 圖層前景背景
     **/
    private Bitmap mBgBitmap, mFgBitmap;
    private Paint mPaint;
    /**
     * 記錄刮掉圖層的路徑,手勢劃過的路徑
     */
    private Path mPath;
    /**
     * 手勢劃過路徑的畫布
     **/
    private Canvas mCanvas;

    public PorterDuffXfermodeView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    /***
     * PorterDuffXfermode的屬性：
     * <p/>
     * 16條Porter-Duff規則
     * <p/>
     * 1.PorterDuff.Mode.CLEAR
     * <p/>
     * 所繪製不會提交到畫布上。
     * 2.PorterDuff.Mode.SRC
     * <p/>
     * 顯示上層繪製圖片
     * 3.PorterDuff.Mode.DST
     * <p/>
     * 顯示下層繪製圖片
     * 4.PorterDuff.Mode.SRC_OVER
     * <p/>
     * 正常繪製顯示，上下層繪製疊蓋。
     * 5.PorterDuff.Mode.DST_OVER
     * <p/>
     * 上下層都顯示。下層居上顯示。
     * 6.PorterDuff.Mode.SRC_IN
     * <p/>
     * 取兩層繪製交集。顯示上層。
     * 7.PorterDuff.Mode.DST_IN
     * <p/>
     * 取兩層繪製交集。顯示下層。
     * 8.PorterDuff.Mode.SRC_OUT
     * <p/>
     * 取上層繪製非交集部分。
     * 9.PorterDuff.Mode.DST_OUT
     * <p/>
     * 取下層繪製非交集部分。
     * 10.PorterDuff.Mode.SRC_ATOP
     * <p/>
     * 取下層非交集部分與上層交集部分
     * 11.PorterDuff.Mode.DST_ATOP
     * <p/>
     * 取上層非交集部分與下層交集部分
     * 12.PorterDuff.Mode.XOR
     * <p/>
     * <p/>
     * 13.PorterDuff.Mode.DARKEN
     * <p/>
     * <p/>
     * 14.PorterDuff.Mode.LIGHTEN
     * <p/>
     * <p/>
     * 15.PorterDuff.Mode.MULTIPLY
     * <p/>
     * <p/>
     * 16.PorterDuff.Mode.SCREEN
     */
    private void init() {
        mPaint = new Paint();
        //設置畫筆爲透明，Xfermode進行圖層計算時會計算透明通道值，纔會有顯示後面圖片背景的效果
        mPaint.setAlpha(0);
        //設置圖像合成：控制Paint如何與已有的Canvas圖像進行交互。Dst_IN是paint和已有的圖層的交集顯示上層的圖層,其它參考註釋
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
        //畫筆不填充只描邊
        mPaint.setStyle(Paint.Style.STROKE);
        //消除鋸齒，否則邊界會有鋸齒形狀
        mPaint.setAntiAlias(true);
        //讓筆觸和連接處更加圓滑，顯示的是圓形
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        //畫筆寬度
        mPaint.setStrokeWidth(10);

        mPath = new Path();

        mBgBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.jgz);
        mFgBitmap = Bitmap.createBitmap(mBgBitmap.getWidth(), mBgBitmap.getHeight(), Bitmap.Config.ARGB_8888);
        //創建了一個尺寸是mBgBitmap.getWidth*mBgBitmap.getHeight，使用它作爲Canvas操作的對象,或者說是創建一個內存，畫的操作都是在mFgBitmap（可當做畫布）上進行的
        mCanvas = new Canvas(mFgBitmap);//這時對此Canvas操作就是催mFgBitmap進行操作，mFgBitmap就當作是畫布
        mCanvas.drawColor(Color.GRAY);//將mFgBitmap畫成灰色

    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
//                mPaint.reset();//恢復默認設置後，沒有設置alpha的畫筆會看不到圖片
                mPath.moveTo(event.getX(), event.getY());
                break;
            case MotionEvent.ACTION_MOVE:
                mPath.lineTo(event.getX(), event.getY());
                break;
        }
        mCanvas.drawPath(mPath, mPaint);
        invalidate();
        return true;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawBitmap(mBgBitmap, 0, 0, null);
        canvas.drawBitmap(mFgBitmap, 0, 0, null);
    }
}