Android——PorterDuffXfermode

个人博客：haichenyi.com。感谢关注

简介

PorterDuffXfermode是什么鬼？个人理解，简单的来讲就是做两个Bitmap操作的，什么操作呢？有裁剪，合并等等，有16种图形混合模式。先举一个简单的例子，我们在慢慢讲：

/**
 * Author: 海晨忆
 * Date: 2018/3/28
 * Desc:
 */
public class MyCustomView extends View {
  private int width = 300;
  private int height = 300;
  private Bitmap dstBmp;
  private Bitmap srcBmp;
  private Paint mPaint;

  public MyCustomView(Context context) {
    this(context, null);
  }

  public MyCustomView(Context context, @Nullable AttributeSet attrs) {
    this(context, attrs, 0);
  }

  public MyCustomView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    initView();
  }

  private void initView() {
    setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    srcBmp = makeSrc(width, height);
    dstBmp = makeDst(width, height);
    mPaint = new Paint();
  }

  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.translate(getWidth() / 2 - width / 2, getHeight() / 2 - height / 2);
    canvas.drawColor(Color.BLUE);
    int layerID = canvas.saveLayer(0, 0, width * 2, height * 2, mPaint, Canvas.ALL_SAVE_FLAG);
    canvas.drawBitmap(dstBmp, 0, 0, mPaint);
    @SuppressLint("DrawAllocation") PorterDuffXfermode xfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
    mPaint.setXfermode(xfermode);
    canvas.drawBitmap(srcBmp, width / 2, height / 2, mPaint);
    mPaint.setXfermode(null);
    canvas.restoreToCount(layerID);
  }

  private Bitmap makeDst(int w, int h) {
    Bitmap dst = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
    Canvas mCanvas = new Canvas(dst);
    Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mPaint.setColor(Color.RED);
    mCanvas.drawOval(new RectF(0, 0, w, h), mPaint);
    return dst;
  }

  private Bitmap makeSrc(int w, int h) {
    Bitmap src = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
    Canvas mCanvas = new Canvas(src);
    Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mPaint.setColor(Color.YELLOW);
    mCanvas.drawRect(0, 0, w, h, mPaint);
    return src;
  }
}

效果图如下：
简介demo图.png

上面画了一个圆形bitmap，画了一个矩形bitmap，设置了一个模式 PorterDuff.Mode.SRC_IN 就变成了上面的形状，这是怎么做到的呢？带着我们的问题，进入我们的主题。

注意点

为什么我要拿一个大标题来写这个呢？因为，我当时卡在这里很久，然后踩着巨人的肩膀，我才踏过去的。

首先，两个图形必须都是Bitmap，直接用Canvas画形状，做操作，是达不到效果的。重要的事情说三遍：两个图形必须都是Bitmap。两个图形必须都是Bitmap。两个图形必须都是Bitmap
其次，避免不必要的麻烦，请先关闭硬件加速。重要的事情说三遍：请先关闭硬件加速。请先关闭硬件加速。请先关闭硬件加速
然后，两个bitmap的大小最好一样。
最后，我要强调的是：先绘制的是目标图，后绘制的是源图。

这里一直说bitmap，辣么，怎么生成这个bitmap，生成这个bitmap之后怎么画图形呢？如下代码：

//第一步，我们先创建一个bitmap对象
Bitmap dst = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
//第二步，我们通过这个bitmap对象创建一个画布，
//说白了，就是new 一个画布，把bitmap放到画布的构造方法里面
    Canvas mCanvas = new Canvas(dst);
    Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mPaint.setColor(Color.RED);
//最后，在这个画布上面的所有操作，最后都是呈现在bitmap上面。
//就像这里的，在这个画布上面画了一个椭圆，其实，最后我们的bitmap就是一个椭圆
    mCanvas.drawOval(new RectF(0, 0, w, h), mPaint);

可以，bitmap会创建了，再就是我们前面说的两个bitmap，先绘制的是目标图，后绘制的是源图，一个是dst（目标图片，下层，先画），一个是src（源图片，上层，后画）。就是我们上面的自定view里面的onDraw()方法里面，用onDraw的canvas画的东西。

我们如果不用这个xfermode模式，我们的代码应该是这样的：

@Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.translate(getWidth() / 2 - width / 2, getHeight() / 2 - height / 2);
    canvas.drawColor(Color.BLUE);
    canvas.drawBitmap(dstBmp, 0, 0, mPaint);
    canvas.drawBitmap(srcBmp, width / 2, height / 2, mPaint);
  }

很简单的几行代码，把画布移到正中间，给画布加一个背景蓝色，先画dst，后画src，跑出来的效果图应该是下面这样的：

注意点1.png

我们如果加上这个xfermode模式里面的 PorterDuff.Mode.SRC_IN模式，代码如下：

@Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.translate(getWidth() / 2 - width / 2, getHeight() / 2 - height / 2);
    canvas.drawColor(Color.BLUE);
    int layerID = canvas.saveLayer(0, 0, width * 2, height * 2, mPaint, Canvas.ALL_SAVE_FLAG);
    canvas.drawBitmap(dstBmp, 0, 0, mPaint);
    @SuppressLint("DrawAllocation") PorterDuffXfermode xfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
    mPaint.setXfermode(xfermode);
    canvas.drawBitmap(srcBmp, width / 2, height / 2, mPaint);
    mPaint.setXfermode(null);
    canvas.restoreToCount(layerID);
  }

比上面的代码，就多加了一个xfermode模式，他们要是同一个画笔，用完之后，记得要把这个模式置null这个saveLayer等会讲，先不说。跑出来的效果图，如下：

注意点2.png

前面，我们一直都在强调dst先画，src后画，如果调换一下，会是什么样的结果呢？代码我就不贴出来了，就把那两个drawBitmap调换一个位置，跑出来的效果图，如下：

注意点3.png

很明显，跟我们的预期结果不一样。这是为什么呢？带着我们的问题进入下一节。

十六种模式和saveLayer()

十六种模式

名字	含义	名字	含义
CLEAR	清除模式［0，0］，即最终所有点的像素的alpha 和color 都为 0，所以画出来的效果只有白色背景	SRC	显示上层绘制图片
DST	显示下层绘制图片	SRC_OVER	正常绘制显示，上下层绘制叠盖
DST_OVER	上下层都显示，下层居上显示	SRC_IN	取两层绘制交集。显示上层
DST_IN	取两层绘制交集，显示下层	SRC_OUT	取上层绘制非交集部分
DST_OUT	取下层绘制非交集部分	SRC_ATOP	取下层非交集部分与上层交集部分
DST_ATOP	取上层非交集部分与下层交集部分	XOR	异或：去除两图层交集部分
DARKEN	取两图层全部区域，交集部分颜色加深	LIGHTEN	取两图层全部，点亮交集部分颜色
MULTIPLY	取两图层交集部分叠加后颜色	SCREEN	取两图层全部区域，交集部分变为透明色

PS：名称前面都应该有：PorterDuff.Mode ，例如：PorterDuff.Mode.CLEAR

什么？有的看不懂什么意思？没关系，我也没指望你一次就看懂，我们先来说一说saveLayer()，且听我娓娓道来。

saveLayer()

这个方法是干嘛用的？保存指定区域内画布的内容。

public int saveLayer(RectF bounds, Paint paint, int saveFlags)  
public int saveLayer(float left, float top, float right, float bottom,Paint paint, int saveFlags)

后面的saveFlags，有6个值，我们这里用到的 Canvas.ALL_SAVE_FLAG，很明显，表示保存所有内容。我们这里如果把这个方法去掉，会是什么样的结果呢？代码就不贴出来了，就直接注释掉saveLayer的两行代码。还是先画dst，后画src，跑出来的效果图如下：

去掉saveLayer().png

我们先规定两点：

先画dst，也就是目标图像，是一个圆形。
后画src，也就是源图像，是一个矩形。

代码名称1	顺序	中文名称	形状
dst	先画	目标图像	红色圆形
src	后画	源图像	黄色矩形

规定好之后，我们再来说一说这个 SRC_IN，我们前面说了：取两层绘制交集。显示上层。首先IN是取交集部分，OUT是取非交集部分。这个就是说最后显示的图形，他们的交集部分，显示src，也就是矩形的颜色，也就是黄色。先画的dst，他自然在src的上层。所以，显示dst的形状，两者交集部分显示src的颜色。可以看下图：