Canvas Xfermode 绘制引导页蒙层

首先看下我们需要实现的效果：

Paste_Image.png

我们需要制造半透明的灰色蒙层，以及全透明的圆圈来着重显示功能点。当然在图层上的view可以使用各种切图实现不同的效果。

最开始我是通过自定义全屏的DIalog完成这个效果，但是测试发现，自定义的View一直无法绘制全屏，尽管我尝试通过测量手机宽高来绘制全屏的background bitmap，依然无功而返…(应该是写代码的姿势不对)

于是我换成了Activity…
当然我们还需要解决如何在半透明图层上"挖"出一个无背景色的圆。这里就需要依靠 paint.setXfermode()这个方法了。

Xfermode
Xfermode is the base class for objects that are called to implement custom "transfer-modes" in the drawing pipeline. The static function Create(Modes) can be called to return an instance of any of the predefined subclasses as specified in the Modes enum. When an Xfermode is assigned to an Paint, then objects drawn with that paint have the xfermode applied.

这是一种图形混合的模式，它有三个子类，我们主要利用PorterDuffXfermode，根据16条Porter-Duff规则的任意一条来控制Paint如何与已有的Canvas图像进行交互。

我希望一个全屏的背景bitmap，依靠PorterDuffXfermode的某个模式，来达到 不绘制全屏矩形与圆圈的交集。
我在网上找到16种模式的效果图：

Paste_Image.png

这里有几种模式可以达到我的目的：XOR,SRC_OUT/DST_OUT；
我最先开始实践的是XOR模式：

PorterDuff.Mode.XOR
异或：去除两图层交集部分

• 实践发现要达到异或去除交集部分的效果，两个图层的色值差要非常明显，否则效果不明显。举个例子，黑色矩形和红色圆圈可以实现黑色背景+无背景圆圈，而灰色矩形+接近白色圆圈却无法做到异或效果，明显不符合我的需求。

所以最终选定SRC_OUT模式。
布局XML:

Activity非常简单，只需要做到跳转，显示layout即可。
详细看下自定义View: ActiveView；

初始化Paint：

 private void init(Context context){
        mContext = context;
        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setAntiAlias(true);
        BackgroundColor = Color.parseColor("#cc222222");
        TransparentColor = Color.parseColor("#00000000");
        mPaint.setXfermode(null);
        WindowManager manager = (WindowManager) mContext.getSystemService(Context.WINDOW_SERVICE);
        mHeight = manager.getDefaultDisplay().getHeight();
        mWith = manager.getDefaultDisplay().getWidth();
    }

可以看到xml布局中我的View宽高是wrap_content的，所以我在ActiveView中重绘成全屏宽高。
绘制矩形：

private Bitmap drawReactBm(){
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(BackgroundColor);
        paint.setStyle(Paint.Style.FILL);
        paint.setAntiAlias(true);
        Bitmap bm = Bitmap.createBitmap(mWith,mHeight, Bitmap.Config.ARGB_8888);
        Canvas cavas = new Canvas(bm);
        cavas.drawRect(new RectF(0,0,mWith,mHeight),paint);
//        cavas.drawColor(GrayColor);
        return bm;
    }

到这里，我们就可以开始在Canvas上完成基本效果的绘制了：

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawBitmap(drawReactBm(),0,0,mPaint);
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(TransparentColor);
        paint.setStyle(Paint.Style.FILL);
        paint.setAntiAlias(true);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT));
        if(circleCenter == null) {
            canvas.drawCircle(mWith - 140, 390, 140, paint);
        }
        else {
            canvas.drawCircle(circleCenter[0], circleCenter[1], 120, paint);
        }

//        mPaint.setXfermode(null);
        // 还原画布
//        canvas.restoreToCount(sc);
    }

paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT));即完成蒙层的关键步骤。

这里还有一个问题，如何将绘制的圆适配不同的机型?
这也是这个判断句的来源：

 if(circleCenter == null) {
            canvas.drawCircle(mWith - 140, 390, 140, paint);
        }
        else {
            canvas.drawCircle(circleCenter[0], circleCenter[1], 120, paint);
        }

我们可以在显示蒙层的时候，将需要在蒙层中凸显的View的坐标位置传递过来，让ActiveView重绘一遍：

Intent i = new Intent(getActivity(), ActiveGuideActivity.class);
        int[] location = new int[2];
        mView.getLocationInWindow(location);
        int[] center = new int[2];
        center[0] = location[0] + mView.getWidth() / 2;
        center[1] = location[1] + mView.getHeight() / 2;
        i.putExtra("location",center);
        startActivity(i);

这样我们就可以定位Circle的圆心坐标了。

总结

• 完整代码：ActiveView

• 如果设置了全局Theme为Appcompat.Light...，建议最好单独为这个类设置透明background，毕竟整个效果我们可以自定义实现：

• 同理我们也可以设置不同形状，效果的图层。