作者博客
http://www.jianshu.com/u/cfec7d70bbec
作者公众号
CoorChice
文章目录
有什么料?
解密PorterDuffXfermode
Xfermode的意义你知道吗?
18种混合模式
令人困惑的图
总结
前言
Warning!Warning!前方高能,阅读本文可能需要3分钟哦!
有什么料?
重新认识神秘的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
联系客服