反驳有关博客关于PorterDuffXfermode的讲解

这个标题口气是真大，没办法，讲解这个的博客太多了，而且好多有误导性，有些自己都不知道为啥，还写博客，抄来抄去的。当然了，很多人写的还是很好的，但是感觉还是没有理解PorterDuffXfermode的用法以及为啥和官方demo的不一样的原因，所以写了该博客。
主要参考博客以及反驳博客是
http://blog.csdn.net/iispring/article/details/50472485，
http://blog.csdn.net/wingichoy/article/details/50534175。
通过该篇博客你可以学到
porterduffXfermode到底是怎么一回事，怎么样写才会保证不出错
当然预备知识是对自定义view的简单认识。
那么，接下来我们开始说问题。

网上官方demo真的有错吗，为什么我们写出来的跟demo不一样？

A:确实有错，但是错误在CLEAR,Daeken,Lighten,而不是错在设置SRC后，官方只显示了正方形而我们却显示正方形和圆形。
先看一下网上流传的图：

再看一下我运行的最新代码 安卓6.0自带demo,api版本是19；

运行平台，夜神模拟器，安卓版本4.4，在荣耀6 安卓6.0版本上运行结果一致。所以截取了模拟器截图。

可以看到后续谷歌已经修改过这个demo了，显示效果确实不一样的。我估计是网上的版本是2.3之前的版本了吧。但是博客写完后又没人后续维护，导致大家人云亦云，说白了就是互相抄来抄去，瞎扯淡。

有人在看到最新的demo的Clear属性后，大舒一口气，这不是和我写的demo
一样了吗，我设置了Clear属性后就是这么显示的，哈哈，洋洋飒飒几行代码，一运行，嗯，一致，很开心。

int sc = canvas.saveLayer(0, 0, canvas.getWidth(), canvas.getHeight(), null, Canvas.ALL_SAVE_FLAG);//增加一个缓冲层
        canvas.drawCircle(100, 100, 50, mDSTpaint);
        mSrcBluePaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
        canvas.drawRect(100, 100, 200, 200, mSrcBluePaint);
        mSrcBluePaint.setXfermode(null);
        canvas.restoreToCount(sc);

可是在设置了SRC属性后，显示为这个效果了，懵逼了。

哎哟我去，不是显示上部吗，怎么连下层的圆也显示出来了，和官方不一致啊，可是明明第一个正确的，为啥呢？
于是，第一篇博客诞生了。http://blog.csdn.net/iispring/article/details/50472485，被大家认知为神作~
并贴了所谓自己正确的贴图

当然这幅图对吗，确实是对的，（除了Daeken,Lighten，这个并没有产生相交部位的加深和变浅，官方也是这样，难道和api版本有关系？）。

有些人可能懵逼了，明明好多和官方不一样，为什么这篇也是对的，你的道理在哪里？为什么会有两种不同的版本，还都是对的？

这篇博客的博主出发点是好的，就是为了解疑为什么我们自己写的代码和官方不一致。但是他和初学者都犯了同一个错误，就是“你以为的以为就是你以为的以为吗？”哈哈，有点绕口。说白了，就是没有解释到点上。

总结一下初学者可能犯的最大错误，也是造成自己写的和demo不一样的根本原因：
以为黄圆是DST ,蓝方是SRC..。错错错！（以官方demo来看）
虽然上面的贴图和我们自己运行代码一致，但是他还是没有走出这个错误，否则写出来的代码就和官方的一样啦~
安卓源码里是这么写的（可以忽视）

@Override protected void onDraw(Canvas canvas) {
            canvas.drawColor(Color.WHITE);

            Paint labelP = new Paint(Paint.ANTI_ALIAS_FLAG);
            labelP.setTextAlign(Paint.Align.CENTER);

            Paint paint = new Paint();
            paint.setFilterBitmap(false);

            canvas.translate(15, 35);

            int x = 0;
            int y = 0;
            for (int i = 0; i < sModes.length; i++) {
                // draw the border
                paint.setStyle(Paint.Style.STROKE);
                paint.setShader(null);
                canvas.drawRect(x - 0.5f, y - 0.5f,
                                x + W + 0.5f, y + H + 0.5f, paint);

                // draw the checker-board pattern
                paint.setStyle(Paint.Style.FILL);
                paint.setShader(mBG);
                canvas.drawRect(x, y, x + W, y + H, paint);

                // draw the src/dst example into our offscreen bitmap
                int sc = canvas.saveLayer(x, y, x + W, y + H, null,
                                          Canvas.MATRIX_SAVE_FLAG |
                                          Canvas.CLIP_SAVE_FLAG |
                                          Canvas.HAS_ALPHA_LAYER_SAVE_FLAG |
                                          Canvas.FULL_COLOR_LAYER_SAVE_FLAG |
                                          Canvas.CLIP_TO_LAYER_SAVE_FLAG);
                canvas.translate(x, y);
                canvas.drawBitmap(mDstB, 0, 0, paint);
                paint.setXfermode(sModes[i]);
                canvas.drawBitmap(mSrcB, 0, 0, paint);
                paint.setXfermode(null);
                canvas.restoreToCount(sc);

                // draw the label
                canvas.drawText(sLabels[i],
                                x + W/2, y - labelP.getTextSize()/2, labelP);

                x += W + 10;

                // wrap around when we've drawn enough for one row
                if ((i % ROW_MAX) == ROW_MAX - 1) {
                    x = 0;
                    y += H + 30;
                }
            }

注意这段代码：

canvas.drawBitmap(mDstB, 0, 0, paint);
paint.setXfermode(sModes[i]);
canvas.drawBitmap(mSrcB, 0, 0, paint);
paint.setXfermode(null);

再看看博客里及我们自己写的代码，通常都是这么写的：（引用自第一篇博客）

protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //设置背景色
        canvas.drawARGB(255, 139, 197, 186);

        int canvasWidth = canvas.getWidth();
        int canvasHeight = canvas.getHeight();
        int layerId = canvas.saveLayer(0, 0, canvasWidth, canvasHeight, null, Canvas.ALL_SAVE_FLAG);
            int r = canvasWidth / 3;
            //正常绘制黄色的圆形
         paint.setColor(0xFFFFCC44);
            canvas.drawCircle(r, r, r, paint);
            //使用CLEAR作为PorterDuffXfermode绘制蓝色的矩形
            paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
            paint.setColor(0xFF66AAFF);
            canvas.drawRect(r, r, r * 2.7f, r * 2.7f, paint);        //最后将画笔去除Xfermode
            paint.setXfermode(null);
        canvas.restoreToCount(layerId);
    }

注意这段代码：

            canvas.drawCircle(r, r, r, paint);
            //使用CLEAR作为PorterDuffXfermode绘制蓝色的矩形
            paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
            canvas.drawRect(r, r, r * 2.7f, r * 2.7f, paint);

看到区别了吗？
放到一起对比一下：

//官方demo
canvas.drawBitmap(mDstB, 0, 0, paint);
paint.setXfermode(sModes[i]);
canvas.drawBitmap(mSrcB, 0, 0, paint);
paint.setXfermode(null);

//很多人的写法：
canvas.drawCircle(r, r, r, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
canvas.drawRect(r, r, r * 2.7f, r * 2.7f, paint);

这两段代码的区别就在与Xfermode的作用域。
官方的作用域在整个bitmap，而很多人的写法仅仅在于蓝色方形。。。注意，这是重点，重点！！！！！！！！！！！！！！

反驳观点1：官方在图的大小上做了手脚了吗？—（ Xfermode的作用域）

很明显，没有！！！！但是为什么显示效果不一样？
第一篇博客认为是官方在图的大小上做了手脚，其实根本不是
官方的做法是先把图形画在bitmap上，然后再对bitmap做了相交绘制
而大多数人的做法只是把圆和方进行相交绘制。所以产生了所谓的正确的图。这幅图是正确的，因为作用域的原因，但是用这幅图来反驳官方的图，那就是错上加错了~

作用域是我自己创造的名词。

以SRC_IN为例，表示展示上方相交的图，也就一个蓝色扇形。安卓源码里，是将圆和方画在两个bitmap里，两个图一样大小，然后相交绘制，注意，相交区域是bitmap的大小，bitmap默认是透明的。
那么就很容易知道为什么源码只显示蓝色扇形。相交区域通过某种算法，透明色和底部圆DST后变成透明，蓝方与黄圆相交部分，显示上部相交部分，也就是显示蓝色扇形。
为什么我们写的还存在底部黄圆呢？
因为我们设置的Xfermode 作用域只在蓝方。蓝方与黄圆相交显示上部，展示扇形，没问题，但是仅此而已，没相交的地方Xfermode 没有效果，该咋展示就咋展示，于是产生了和官方不一样的效果。
其他同理。都能解释的通。。。。。。。。

反驳观点2：和硬件加速有关吗？应该没关系

新开一个layer层同样可以解决设置Clear属性后黑圆的效果，调用canvas.saveLayer方法即可。
所以和硬件加速有关不成立，建议以后所有的操作新开图层进行处理。

反驳观点3：必须两个bitmap吗？还必须大小一致吗？

不是的，没必要两个bitmap。一个就完全够了，继续以SRC_IN为例，
代码如下

 //只有一个bitmap形式
    private void test3(Canvas canvas) {
        int sc = canvas.saveLayer(0, 0, canvas.getWidth(), canvas.getHeight(), null, Canvas.ALL_SAVE_FLAG);//增加一个缓冲层
        canvas.drawCircle(100,100,50,mDSTpaint);


        Bitmap bitmap = Bitmap.createBitmap(500, 500, Bitmap.Config.ARGB_8888);
        Canvas ca = new Canvas(bitmap);
        ca.drawRect(100, 100, 200, 200, mSrcBluePaint);
        //注意一下作用域~
        mSrcBluePaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(bitmap, 0, 0, mSrcBluePaint);
        mSrcBluePaint.setXfermode(null);
        canvas.restoreToCount(sc);

    }

可以看到至创建了一个bitmap，因为我们要的到的是蓝色扇形，我们的DST是圆，选用的模式是SRC_IN,只要保证画的蓝方和黄圆相交部位是个扇形即可，无所谓一个两个bitmap的，既然一个bitmap都能满足效果，那么就更没有必要要求两个必须一致了，毕竟另一个可以认为bitmap的大小是0 嘛~ 况且创建bitmap那么耗费内存~能省则省，看效果行事~

总结

1.源码是两个bitmap相交绘制的，不是黄圆和和蓝方，搞清楚这个你就不会画错了~
2.还是要多思考，源码比博客保险，不要人云亦云~
3.有些博客讲的都是么比~贴张demo图就去实现效果，虽然有的效果和预想的一样，但是我深刻怀疑是歪打正着而已