Flutter BlendMode混合模式详解

原文： https://docs.flutter.io/flutter/dart-ui/BlendMode-class.html

1.介绍：

在画布上绘画时使用的算法。

在画布上绘制形状或图像时，可以使用不同的算法来混合像素。BlendMode的不同值指定不同的此类算法。

每个算法都有两个输入，即源（即正在绘制的图像）和目标（即要合成源图像的图像）。目的地通常被认为是背景。源和目标都有四个颜色通道，红色，绿色，蓝色和alpha通道。这些通常表示为0.0到1.0范围内的数字。算法的输出也具有这四个相同的通道，其值根据源和目标计算。

下面每个值的文档描述了算法的工作原理。在每种情况下，图像显示将源图像与目标图像混合的输出。在下面的图像中，目的地由具有水平线和不透明风景照片的图像表示，并且源由具有垂直线（相同线但旋转）的图像和鸟剪贴画图像表示。该SRC模式仅示出了源图像和DST模式仅显示目标图像。在下面的文档中，透明度由棋盘图案说明。的明确模式丢弃源和目标，从而导致输出是完全透明的（由实棋盘图案示出）。

这些图像中的水平和垂直条显示具有不同不透明度水平的红色，绿色和蓝色通道，然后所有三个颜色通道以及相同的不同不透明度水平，然后所有三个颜色通道设置为零，具有不同的不透明度水平，然后两个条形显示红色/绿色/蓝色重复渐变，第一个具有完全不透明度，第二个具有部分不透明度，最后一个条形图将三个颜色通道设置为零，但不透明度在重复渐变中变化。

2.应用于Canvas API

使用Canvas.saveLayer和Canvas.restore时，调用Canvas.restore时将应用 赋予Canvas.saveLayer的Paint的混合模式 。每次调用Canvas.saveLayer都会引入一个新的图层，在图层上绘制形状和图像; 当调用Canvas.restore时，该图层将合成到父图层上，其中源是最近绘制的形状和图像，目标是父图层。（对于第一个Canvas.saveLayer调用，父层是画布本身。）

也可以看看：

• Paint.blendMode，它使用BlendMode来定义合成策略。

3.常量

src

删除目标图像，仅绘制源图像。从概念上讲，首先清除目的地，然后绘制源图像。

这对应于“复制”Porter-Duff运算符。

dst

删除源图像，仅绘制目标图像。从概念上讲，源图像被丢弃，保持目的地不变。

这对应于“目的地”Porter-Duff运算符。

srcOver 

将源图像合成到目标图像上。

这是默认值。它代表了最直观的情况，其中形状被绘制在下面的内部，透明区域显示目标层。

这对应于“Source over Destination”Porter-Duff运算符，也称为Painter算法。

dstATop 

将目标图像合成到源图像上，但仅限于它与源重叠的位置。

这对应于“Destination atop Source”Porter-Duff运算符。

这本质上是dstOver运算符，但输出的不透明度通道设置为源图像的不透明度通道，而不是图像的不透明度通道的组合。

对于源位于顶部而非目标的变体，请参阅 srcATop。

dstIn 

显示目标图像，但仅显示两个图像重叠的位置。源图像未呈现，仅被视为蒙版。忽略源的颜色通道，只有不透明度才有效。

要显示源图像，请考虑srcIn。

要反转掩码的语义（仅显示目标所在的源，而不是缺少的位置），请考虑dstOut。

这对应于“源中的目的地”Porter-Duff运算符。

dstOut

显示目标图像，但仅限于两个图像不重叠的位置。源图像未呈现，仅被视为蒙版。忽略源的颜色通道，只有不透明度才有效。

要显示源图像，请考虑srcOut。

要反转掩码的语义（仅显示源所在的目标，而不是缺少的位置），请考虑dstIn。

这对应于“目的地输出源”Porter-Duff运算符。

clear 

删除源图像和目标图像，不留任何内容。这对应于“清除”Porter-Duff运算符。

color

获取源图像的​​色调和饱和度以及目标图像的亮度。

效果是使用源图像为目标图像着色。

输出图像的不透明度的计算方法与srcOver相同 。在源图像中完全透明的区域从目的地获取其色调和饱和度。

也可以看看：

• 色调，这是一种类似但较弱的效果。
• softLight，这是一种类似的着色效果，但也有白色。
• 饱和度，仅应用源图像的饱和度。

colorBurn

将目标的倒数除以源，并反转结果。

反转组件意味着完全饱和的通道（不透明的白色）被视为值0.0，通常被视为0.0（黑色，透明）的值被视为1.0。

colorDodge

将目的地除以源的倒数。

反转组件意味着完全饱和的通道（不透明的白色）被视为值0.0，通常被视为0.0（黑色，透明）的值被视为1.0。

darken

通过从每个颜色通道中选择最低值来合成源图像和目标图像。

输出图像的不透明度的计算方法与srcOver相同 。

difference

从每个通道的较大值中减去较小的值。合成黑色没有效果; 合成白色会反转另一幅图像的颜色。

输出图像的不透明度的计算方法与srcOver相同 。

效果类似于排斥，但更严厉。

dstOver

合并目标图像下的源图像。

这与srcOver相反。

这对应于“源上的目标”Porter-Duff运算符。

当源图像应该在目标图像之前绘制但是不可能时，这非常有用。

exclusion

从两个图像的总和中减去两个图像的乘积的两倍。

合成黑色没有效果; 合成白色会反转另一幅图像的颜色。

输出图像的不透明度的计算方法与srcOver相同 。

效果类似于差异但更柔软。

hardLight

将源图像和目标图像的组件调整为有利于源后，将它们相乘。

具体来说，如果源值较小，则将其与目标值相乘，而目标值较小，它将目标值的倒数乘以源值的倒数，然后反转结果。

反转组件意味着完全饱和的通道（不透明的白色）被视为值0.0，通常被视为0.0（黑色，透明）的值被视为1.0。

也可以看看：

• 调制，总是乘以值。
• 屏幕，它总是乘以值的倒数。
• overlay，类似于hardLight但有利于目标图像而不是源图像。

hue

获取源图像的​​色调，以及目标图像的饱和度和亮度。

效果是使用源图像为目标图像着色。

输出图像的不透明度的计算方法与srcOver相同 。在源图像中完全透明的区域从目的地获取其色调。

也可以看看：

• 颜色，这是一种类似但更强的效果，因为它也适用于源图像的饱和度。
• HSVColor，允许使用Hue而不是颜色的红色/绿色/蓝色通道表示颜色。

lighten

通过从每个颜色通道中选择最高值来合成源图像和目标图像。

输出图像的不透明度的计算方法与srcOver相同 。

luminosity

获取源图像的​​亮度，以及目标图像的色调和饱和度。

输出图像的不透明度的计算方法与srcOver相同 。在源图像中完全透明的区域从目的地获取其亮度。

也可以看看：

• 饱和度，将源图像的饱和度应用于目标。
• ImageFilter.blur，可与BackdropFilter一起使用以获得相关效果。

modulate

将源图像和目标图像的颜色分量相乘。

这只能产生相同或更暗的颜色（乘以白色，1.0，结果不变;乘以黑色，0.0，结果为黑色）。

合成两个不透明图像时，这与在投影仪上重叠两个透明胶片具有相似的效果。

对于也乘以alpha通道的变体，请考虑乘法。

也可以看看：

• 屏幕，它执行类似的计算但反转。
• 叠加，它结合了调制和屏幕以支持目标图像。
• hardLight，它结合了调制和屏幕以支持源图像。

multiply

将源图像和目标图像的组件相乘，包括Alpha通道。

这只能产生相同或更暗的颜色（乘以白色，1.0，结果不变;乘以黑色，0.0，结果为黑色）。

由于Alpha通道也是相乘的，因此一个图像中的完全透明像素（不透明度为0.0）会在输出中产生完全透明的像素。这与dstIn类似，但颜色组合在一起。

对于将颜色相乘但不会乘以alpha通道的变体，请考虑调制。

overlay 

在调整源图像和目标图像的组件以使其有利于目标之后，将其相乘。

具体来说，如果目标值较小，则将其与源值相乘，而源值较小，它将源值的倒数乘以目标值的倒数，然后反转结果。

反转组件意味着完全饱和的通道（不透明的白色）被视为值0.0，通常被视为0.0（黑色，透明）的值被视为1.0。

也可以看看：

• 调制，总是乘以值。
• 屏幕，它总是乘以值的倒数。
• hardLight，类似于叠加但有利于源图像而不是目标图像。

plus

对源图像和目标图像的组件求和。

其中一个图像的像素中的透明度降低了该图像对相应输出像素的贡献，就好像该图像中该像素的颜色较暗。

这对应于“Source plus Destination”Porter-Duff运算符。

saturation

获取源图像的​​饱和度以及目标图像的色调和亮度。

输出图像的不透明度的计算方法与srcOver相同 。在源图像中完全透明的区域从目的地获取饱和度。

也可以看看：

• 颜色，也适用于源图像的色调。
• 发光度，将源图像的亮度应用于目标。

screen

将源图像和目标图像的分量的倒数相乘，并反转结果。

反转组件意味着完全饱和的通道（不透明的白色）被视为值0.0，通常被视为0.0（黑色，透明）的值被视为1.0。

这与调制混合模式基本相同，但是在乘法之前将颜色的值反转，并且在渲染之前将结果反转回来。

这只能产生相同或较浅的颜色（乘以黑色，1.0，结果不变;乘以白色，0.0，结果为白色）。同样，在Alpha通道中，它只能产生更多不透明的颜色。

这与两台同时在同一屏幕上显示图像的投影机具有相似的效果。

也可以看看：

 

• 调制，它执行类似的计算但不反转值。
• 叠加，它结合了调制和屏幕以支持目标图像。
• hardLight，它结合了调制和屏幕以支持源图像。

softLight

使用colorDodge为源值低于0.5和colorBurn为源值在0.5以上。

这导致与覆盖相似但更柔和的效果。

也可以看看：

• 颜色，这是一种更微妙的着色效果。

srcATop

将源图像合成到目标图像上，但仅限于它与目标重叠的位置。

这对应于“Source atop Destination”Porter-Duff运算符。

这本质上是srcOver运算符，但输出的不透明度通道设置为目标图像的不透明度，而不是两个图像的不透明度通道的组合。

对于目标位于顶部而非源的变体，请参阅 dstATop。

srcIn

显示源图像，但仅显示两个图像重叠的位置。目标图像不会渲染，仅将其视为蒙版。目标的颜色通道被忽略，只有不透明度才有效。

要显示目标图像，请考虑dstIn。

要反转掩码的语义（仅显示目标不在的源，而不是存在的位置），请考虑 srcOut。

这对应于“目的地来源”Porter-Duff运算符。

srcOut

显示源图像，但仅显示两个图像不重叠的位置。目标图像不会渲染，仅将其视为蒙版。目标的颜色通道被忽略，只有不透明度才有效。

要显示目标图像，请考虑dstOut。

要反转掩码的语义（仅显示目标所在的源，而不是缺少的位置），请考虑srcIn。

这对应于“Source out Destination”Porter-Duff运算符。

xor

将按位运算xor符应用于源图像和目标图像。这会留下重叠的透明度。

这对应于“Source xor Destination”Porter-Duff运算符。