概述
今天抽空写一下PorterDuffXfermode的使用，因为类型比较多，但是使用方式是一致的，所以今天总结一下如何来完美的使用这些复杂的模式~
PorterDuffXfermode种类
public enum Mode {
CLEAR (0),
SRC (1),
DST (2),
SRC_OVER (3),
DST_OVER (4),
SRC_IN (5),
DST_IN (6),
SRC_OUT (7),
DST_OUT (8),
SRC_ATOP (9),
DST_ATOP (10),
XOR (11),
DARKEN (16),
LIGHTEN (17),
MULTIPLY (13),
SCREEN (14),
ADD (12),
OVERLAY (15);
}
这是我从源码里截取出的所有模式的定义，总共有18种，不过不要慌，慢慢教大家怎么用这些模式
首先我们先学会怎么用这个模式,首先我们先上一个小例子
package com.tx.camera.view
import android.content.Context
import android.graphics.*
import android.util.AttributeSet
import android.view.View
import com.tx.camera.R
/**
* create by xu.tian
* @date 2021/10/2
*/
class PictureModeView(context: Context?, attrs: AttributeSet?) : View(context, attrs) {
private var paint = Paint()
private var srcBitmap: Bitmap? = null
private var dstBitmap: Bitmap? = null
init {
setLayerType(LAYER_TYPE_SOFTWARE, paint)
}
override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
super.onSizeChanged(w, h, oldw, oldh)
srcBitmap = BitmapFactory.decodeResource(resources, R.drawable.hanikezi)
srcBitmap = Bitmap.createScaledBitmap(srcBitmap!!,w/2,h/2,false)
dstBitmap = BitmapFactory.decodeResource(resources, R.drawable.dilireba)
dstBitmap = Bitmap.createScaledBitmap(dstBitmap!!,w,h,false)
}
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
canvas.drawColor(Color.WHITE)
var layerId = canvas.saveLayer(RectF(0f, 0f, width.toFloat(), height.toFloat()), paint)
var matrixD = Matrix()
matrixD.postTranslate(0f,0f)
canvas.drawBitmap(dstBitmap!!, matrixD, paint)
paint.xfermode = PorterDuffXfermode(PorterDuff.Mode.MULTIPLY)
var matrixS = Matrix()
matrixS.postTranslate((width / 4).toFloat(), (height / 4).toFloat())
canvas.drawBitmap(srcBitmap!!, matrixS, paint)
paint.xfermode = null
canvas.restoreToCount(layerId)
}
}
我们取了2张图片，一张热巴的作为目标图像，命名为dstBitmap，一张哈尼的图像作为源图像，命名为srcBitmap,接着我们在绘制源图像之前设置了xfermode,然后我们看运行效果
multiply.png
两张图片似乎按某种算法结合到了一起~
那么我们再尝试一下，设置成SRC
paint.xfermode = PorterDuffXfermode(PorterDuff.Mode.SRC)
那么再看结果
src.png
那么我们就借着SRC的例子来学习一下各种模式怎么使用，首先我们打开SRC模式的源码，阅读其注释部分
/**
* <p>
* <img src="{@docRoot}reference/android/images/graphics/composite_SRC.png" />
* <figcaption>The source pixels replace the destination pixels.</figcaption>
* </p>
* <p>\(\alpha_{out} = \alpha_{src}\)</p>
* <p>\(C_{out} = C_{src}\)</p>
*/
SRC (1),
这个我时候我们需要注意这里
<p>\(\alpha_{out} = \alpha_{src}\)</p>
<p>\(C_{out} = C_{src}\)</p>
- alpha_out表示在绘制源图像，即例子中的srcBitmap时，当混合模式为SRC模式，输出的alpha值,这里可以看出此时输出的就是源图像的alpha值
- c_out表示在绘制源图像时，输出的颜色值，这里也就是源图像的值，所以我们看到在SRC模式下，我们所看到的就是哈尼的完整图像，而看不到先绘制的热巴图像
那么知道了如何通过看源码注释来计算模式的绘制结果，那么我们就去看看DST模式的具体说明
/**
* <p>
* <img src="{@docRoot}reference/android/images/graphics/composite_DST.png" />
* <figcaption>The source pixels are discarded, leaving the destination intact.</figcaption>
* </p>
* <p>\(\alpha_{out} = \alpha_{dst}\)</p>
* <p>\(C_{out} = C_{dst}\)</p>
*/
DST (2),
我们可以看到这里的alpha_out就是dst，也就是目标图像的alpha值，这里的c_out是dst，也就是目标图像的值，源图像的所有值都被舍弃了，那么我们应该只能看到目标图像而看不到源图像，那么结果呢？
运行后是这样的
dst.png
所以和我们猜想的是一致的~
那么我们可以以此种方式来再看几个模式，比如可以用来实现刮刮乐效果的SRC_OUT模式，我们先看其注释
/**
* <p>
* <img src="{@docRoot}reference/android/images/graphics/composite_SRC_OUT.png" />
* <figcaption>Keeps the source pixels that do not cover destination pixels.
* Discards source pixels that cover destination pixels. Discards all
* destination pixels.</figcaption>
* </p>
* <p>\(\alpha_{out} = (1 - \alpha_{dst}) * \alpha_{src}\)</p>
* <p>\(C_{out} = (1 - \alpha_{dst}) * C_{src}\)</p>
*/
SRC_OUT (7),
这里可以看出来当dst的alpha值为1时，输出的alpha值就为0，如果dst的alpha值为0时，输出的就是源图像的图像，颜色值也同理，也是根据dst的alpha值来计算的
那么借着这个思路，就可以实现一个刮刮乐
- 1.首先绘制一个结果图片，用来显示最终结果
- 使用saveLayer函数来创建一个新画布，我们在这个画布上绘制接下来的几张图
- 3.创建一个目标图像，可以是一个空的Bitmap,我们可以在这个图像上绘制一些路径，此时绘制了路径的地方alpha值为1，而未绘制的地方alpha值为0
- 4.绘制源图像，使用SRC_OUT模式，那么它和目标图像计算后，绘制了路径的地方因为其alpha值为1，所以算出来透明度和颜色值都为0了，这些地方就可以显示出最先绘制的结果图片，而其他地方因为目标图像alpha值都为0，所以显示的结果就是源图像的alpha值和颜色值，
- 5.使用restoreToCount恢复画布，经历了这些过程以后，就可以实现一个刮刮乐效果了
方法说了，具体的实现戳这里
Android自定义View(11) 《实现一个刮刮乐抽奖效果》
总结
PorterDuffXfermode可以将图片通过计算来完美的融合到一起，不过在使用时需要注意几个事项
- 需要关闭硬件加速
- 源图像的计算，是对此前的，同一个画布的所有已经绘制的内容进行计算，从上面的刮刮乐效果我们也可以看出来，我们通过saveLayer创建了一个新的画布，然后在其上面绘制，而最先绘制的结果图是不参与计算的，所以这点一定要记住，它并不是只计算在它之前绘制的一部分内容，而是这个画布上的所有内容~
好了祝大家国庆快乐~Have a nice day ~
