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