Android灵魂画家的18种混合模式

作者博客

http://www.jianshu.com/u/cfec7d70bbec

作者公众号

CoorChice

文章目录

1. 有什么料？
2. 解密PorterDuffXfermode
3. Xfermode的意义你知道吗？
4. 18种混合模式
5. 令人困惑的图
6. 总结

前言

⚠️️ Warning！Warning！前方高能，阅读本文可能需要3分钟哦！

1

有什么料？

重新认识神秘的PorterDuffXfermode。

学会正确的使用PorterDuffXfermode。

收获【两张示例图】，帮助你在实际中正确的运用各种混合模式。

2

解密PorterDuffXfermode

先上两张示例图，大家快来保存啊！

注：这两张图仅用了两个强大的View完成的。【从未如此惊艳！你好，SuperTextView (v1.1) - http://www.jianshu.com/p/1b91e11e441d】，你值得拥有！

自己绘过图的筒靴一定见过或者用过mPaint.setXfermode(Xfermode xfermode)，它是干什么的呢？它的作用就是将画布上的当前图像（即目标图像DST）和后面需要绘制的图像（即源图像SRC）按照一定的算法进行混合。简单点说就是把源图像SRC与目标图像DST进行混合。而ProterDuffXfermode继承自Xfermode，提供了18像素混合模式的算法，它们是由Thomas Porter和Tom Duff在 于1984年7月的一篇名为【《Compositing Digital Images》https://keithp.com/~keithp/porterduff/p253-porter.pdf】的论文中提出的。这对图像处理来说具有重大的意义。

3

Xfermode的意义你知道吗？

在上面的两张图中，CoorChice已经向筒靴们展示了使用Xfermode来混合简单的图形所达到的效果。

对于一些比较难画的图形，如果通过运算坐标和尺寸去绘制当然是可以的。但是这些运算将会非常复杂！如果合理的使用Xfermode去将一些简单的图形进行混合，同样可以获得你所期望的复杂图形。在CoorChice的这篇文章【从未如此惊艳！你好，SuperTextView (v1.1)http://www.jianshu.com/p/1b91e11e441d】 中，CoorChice向你展示了一个扫光特效，它的两端有个截断效果，就是通过Xfermode完成的。如果靠计算的话，实现起来会稍微费点力。

当然，这些并不能发挥Xfermode的真正威力。如果你使用它对一些图片进行混合，你会看到Xfermode到底能做什么不可思议的事！比如，在 《Compositing Design Images》 中就有一个这样的例子：

图中最后Composite的结果就是前面几张图片通过一定组合合成的，这是合成算法：

(FFire plus (BFire out Plant)) over Darken(Plant, .8) over Stars .

你看，Xfermode就是如此的强大，通过合理的组合，能合成图片。

再一看张CoorChice用图片合成的各种效果：

哇！这鱼飞起来啦！

4

18种混合模式

在 《Compositing Degital Images》 中，Thomas Porter和Tom Duff展示了12中基本的混合模式：

我们可以将上图中的A对应目标图像DST，B对应源图像SRC去理解。通过组合这12种混合模式，足够实现任意的2D图像合成效果了。十分的强大。对照着上面CoorChice画的图理解吧。

也许筒靴们平时都只听说PorterDuff.Mode是16种模式，因为官方的例子中就出现了16种模式。但事实上，Android提供的混合模式共有18种，筒靴们在上图中也是能看到滴。就是最后一排的ADD和OVERLAY是不常被提到的。

下面CoorChice和大家一起捋一捋这18种混合模式： 在此之前，先说明下各个符号的意义。 在支持透明通道的情况下，一个像素点通过alpha透明值和RGB色值来描述，即[alpha, rgb]。

Sa: Src Alpha，即源图像的透明值

Sc：Src color，即源图像的色值 Da：Dst Alpha，即目标图像的透明值 Dc：Dst color，即目标图像的色值

筒靴们对着上面【Bitmap绘制】图来看这18种混合模式。

5

令人困惑的图

筒靴们可以看到【Bitmap绘制】图和官方的例子图是一样一样的，但是很多筒靴自己画出来的效果却和【Canvas直接绘制】图是一样一样的。嗯，百思不解！有没有可能是官方的例子错了呢？

想多了，没有的。只是筒靴们没注意到官方标准例子中的细节：

• 首先需要关闭硬件加速。因为硬件加速模式下，渲染是通过GPU完成的，和普通CPU渲染可能有点不一样，导致了部分合成算法呈现的效果有差异。你可以看看我的这篇文章【用两张图告诉你，为什么你的App会卡顿?http://www.jianshu.com/p/df4d5ec779c8】，了解下View的绘制流程。
• 其次，像素混合是对两个区域进行的。官方的示例中，黄圆和蓝正方形都是画在大小和黑色边框相等的Bitmap上的，然后再将两个Bitmap的像素进行混合，此时两个Bitmap的区域是【完全重合】的。所以得到了标准效果。而很多同学可能没注意，往往就以为两个区域大小就是两个图形的外接矩形的大小，而它们相交的地方只有1/4。所以得到了“Canvas直接绘制”图的效果。两种方式最大的差别在于，【Bitmap绘制】图中有一部分透明像素点参与了混合，而【Canvas直接绘制】图中几乎没有。

这是CoorChice写的示例，就是上面几幅图的实现，【Github：https://github.com/chenBingX/CoorChiceLibOne/blob/448cf36e0b33fb667cb4fd5a8d8db2651bf0647e/app/src/main/java/com/chenbing/coorchicelibone/Views/PorterDuffXDemoActivity.java】，大家可以对照的动手感受一下。

6

总结

本篇文章向大家详细的展示了强大的PorterDuffXfermode的正确打开方式，CoorChice相信以后不会再有筒靴抱怨：我的天呐！这玩意儿有毒！为什么我合成出来的图像和官方示例不一样！

参考链接：

Api PorterDuff.Mode - https://developer.android.com/reference/android/graphics/PorterDuff.Mode.html

Xfermode in android - http://weishu.me/2015/09/23/Xfermode-in-android/

Compositing Digital Images - https://keithp.com/~keithp/porterduff/p253-porter.pdf