Android 自定义View之PorterDuffXfermode的使用（刮刮卡的效果实现）

回想一下，在刮奖的时候的那个效果，怎么实现的呢，我们来看一下简单的实现方法。



这里我们要用到画笔特效处理中的PorterDuffXfermode来实现这个效果。在学习PorterDuffXfermode之前，先看看看这张图：



图来自API demo。基本上讲PorterDuffXfermode的文章都引用了该图，类似于取并集，交集的概念。

它控制了两个图像之间的混合现实模式。

注意：PorterDuffXfermode显示的是两个图层交集区域的显示方式DST是先画的图形，src是后画的图形。一般来说，用得最多的是使用一张图片作为另一张图片的遮罩层，进而控制被遮罩层下的图片的显示效果，用得最多的就是DST_IN和SRC_IN,可以实现将矩形图片变成圆形图片或者圆形图片的效果。

不多费口舌，来看看刮刮卡的效果。

第一步，初始化画笔：

mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeJoin(Paint.Join.ROUND);
mPaint.setStrokeWidth(100);
mPaint.setStrokeCap(Paint.Cap.ROUND);

mPath = new Path();

mBgBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.home_menu3);
mFgBitmap = Bitmap.createBitmap(mBgBitmap.getWidth(), mBgBitmap.getHeight(), Bitmap.Config.ARGB_8888);
mCanvas = new Canvas(mFgBitmap);

mCanvas.drawColor(Color.GRAY);

为了让画笔笔触更润滑一点，设置一下paint的属性， mPaint.setStrokeJoin(Paint.Join.ROUND);和 mPaint.setStrokeCap(Paint.Cap.ROUND);

后面是两个背景了，后背景就是要瓜了之后看到的图，前背景大小根据后背景图大小而定。

接下来就是用户手指滑动产生的路径了，再把路径保存下来，这里使用Path来操作。

@Override
public boolean onTouchEvent(MotionEvent event) {

switch (event.getAction()) {
case MotionEvent.ACTION_MOVE:
mPath.lineTo(event.getX(), event.getY());
break;
case MotionEvent.ACTION_DOWN:
mPath.reset();
mPath.moveTo(event.getX(), event.getY());
break;
}
mCanvas.drawPath(mPath, mPaint);
invalidate();
return true;
}

最后还有一步，就是使用DET_IN模式将路径绘制到前面覆盖的图层上即可。最关键的一步就是要将画笔的透明度试着为0。这样才能显示擦除的效果。透明度设置为0的原因是因为PorterDuffXfermode进行图层混合时，并不是简单地只是进行图层的计算，同时也会去计算透明通道的值，正式由于混合了有名通道，才形成这样的效果。下面是完整代码：

/**
* Created by dong.he on 2017/3/15 0015.
* <p>
* 画笔特效处理
*/

public class PorterDuffXfermodeView extends View {

private Paint mPaint;
private Canvas mCanvas;
private Path mPath;
private Bitmap mBgBitmap, mFgBitmap;

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

private void init() {
mPaint = new Paint();
mPaint.setAlpha(0);
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeJoin(Paint.Join.ROUND);
mPaint.setStrokeWidth(100);
mPaint.setStrokeCap(Paint.Cap.ROUND);//为了让画笔笔触更润滑一点，设置一下paint的属性

mPath = new Path();

mBgBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.home_menu3);
mFgBitmap = Bitmap.createBitmap(mBgBitmap.getWidth(), mBgBitmap.getHeight(), Bitmap.Config.ARGB_8888);
mCanvas = new Canvas(mFgBitmap);

mCanvas.drawColor(Color.GRAY);

}
@Override
public boolean onTouchEvent(MotionEvent event) {

switch (event.getAction()) {
case MotionEvent.ACTION_MOVE:
mPath.lineTo(event.getX(), event.getY());
break;
case MotionEvent.ACTION_DOWN:
mPath.reset();
mPath.moveTo(event.getX(), event.getY());
break;
}
mCanvas.drawPath(mPath, mPaint);
invalidate();
return true;
}

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

布局：

<com.example.donghe.myview.view.PorterDuffXfermodeView
android:layout_width="wrap_content"
android:layout_gravity="center"
android:layout_height="200dp" />

自己动手试一下吧。