混合和合成2D节点¶
混合控制如何将一个图层或图像（源）的颜色和 alpha 值与底层图层或图像（目标）进行组合。Kanzi 默认情况下使用 Alpha：Premultiplied 混合模式混合 2D 节点，该模式使用源像素的 alpha 通道将源像素与目标像素进行混合。请参阅 颜色混合模式 和 高级颜色混合模式。
Alpha 合成控制如何使用源像素和目标像素的 alpha 通道来合并这些像素。Kanzi 支持 Porter-Duff 混合模式进行 Alpha 合成。请参阅 Alpha compositing modes（Alpha 合成模式）。
混合模式如何影响2D节点的渲染¶
在2D节点中，Material > Blend Mode 属性设置了 Kanzi 的方式：
将节点及其子节点与底层图层混合。
如果节点有子节点，并且您将 Blend Mode 属性设置为默认 Alpha: Premultiplied 以外的值，Kanzi 将合成这些节点，并使用您设置的混合模式渲染合成。
渲染节点的前景和背景。
如果在 2D 节点中同时设置 Foreground Brush 和 Background Brush 属性，混合模式会影响画笔的组合。
如果节点同时具有背景和前景，并且混合模式不是 Alpha: Non-premultiplied 或 Opaque，Kanzi 将合成该节点，并使用您设置的混合模式渲染合成。
渲染节点及分配给该节点的2D效果的组合。
请参阅 2D 节点的效果。
Kanzi 中的混合模式¶
混合模式控制 Kanzi 如何将一个图层或图像（源）的像素颜色和 alpha 值与底层图层或图像（目标）的像素颜色和 alpha 值进行组合。
颜色混合模式¶
本节介绍 Kanzi 中的颜色混合模式。
每个描述包括：
Kanzi 用于计算源 (\(src\)) 和目标 (\(dst\)) 组合的结果颜色 (\(C_{out}\)) 和 alpha (\(α_{out}\)) 的方程。
可视化展示了混合模式如何在具有不透明（左）或部分透明（右）内容的重叠源图像和目标图像上操作：
不透明 (Opaque) |
部分透明 |
||
目的地 (\(dst\)) |
|
|
|
来源 (\(src\)) |
|
|
Alpha：Premultiplied¶
期望源像素中的预乘 alpha RGBA，并使用源像素的 alpha 将源像素混合在目标像素之上。 此模式是默认和推荐的 alpha 混合模式，相当于 Porter-Duff 的 Source Over 模式。
\[\begin{split}&C_{out} = C_{src} + (1 - α_{src}) * C_{dst} \\
&α_{out} = α_{src} + (1 - α_{src}) * α_{dst}\end{split}\]
|
|
|
附加 (Additive)¶
将源像素添加到目标像素。 使用此模式用于您希望图层添加颜色但不减少底层图层颜色的效果。
\[\begin{split}&C_{out} = C_{src} + C_{dst} \\
&α_{out} = α_{src} + α_{dst}\end{split}\]
|
|
|
乘以¶
将源像素和目标像素相乘。 此模式与 Screen 模式相反。 例如，您可以使用此模式创建比其背景更暗的部分透明叠加层。请参阅 使用颜色混合创建一个叠加层。
\[\begin{split}&C_{out} = C_{dst} * C_{src} \\
&α_{out} = α_{dst} * α_{src}\end{split}\]
|
|
|
屏幕 (Screen)¶
将源像素和目标像素相加，并从结果中减去源和目标的乘积。 此模式与 Multiply 模式相反。 例如，您可以使用此模式创建比其背景更浅的部分透明叠加层。请参阅 使用颜色混合创建一个叠加层。
\[\begin{split}&C_{out} = C_{src} + (1 - C_{src}) * C_{dst} \\
&α_{out} = α_{src} + (1 - α_{src}) * α_{dst}\end{split}\]
|
|
|
Alpha：Automatic¶
将混合模式设置为以下之一：
当项目或图像的 Premultiply Alpha 属性启用时，Alpha: Premultiplied。这是默认值。
当项目或图像的 Premultiply Alpha 属性被禁用时，Alpha: Mixed。
请参阅 阿尔法预乘。
Alpha：Non-premultiplied¶
旧版模式。对于非预乘输入，请改用 Alpha: Mixed 模式。
Alpha: Non-premultiplied 模式期望源像素中的非预乘 alpha RGBA，并将源像素与目标像素混合。请注意，这会导致目标帧缓冲区中的 alpha 通道不正确。渲染到纹理并在稍后作为前景混合时，不能使用此模式。
Alpha：Mixed¶
期望源像素中具有非预乘 alpha 的 RGBA，并将源像素与目标像素进行混合。 例如，使用此模式当您动态加载不进行预处理的纹理时，该纹理使用的片段着色器不执行 RGB 颜色的 alpha 预乘。
\[\begin{split}&C_{out} = α_{src} * C_{src} + (1 - α_{src}) * C_{dst} \\
&α_{out} = α_{src} + (1 - α_{src}) * α_{dst}\end{split}\]
|
|
|
Alpha compositing modes（Alpha 合成模式）¶
This section describes the Porter-Duff blend modes in Kanzi. The Porter-Duff blend modes were defined by Thomas Porter and Tom Duff in their 1984 paper Compositing Digital Images.
使用 Porter-Duff 混合模式进行 alpha 合成。Porter-Duff 混合模式基于这些图层的 alpha 通道组合两个图层。如果目标帧缓冲区没有 alpha 通道，或者 alpha 值恒定为 1，许多 alpha 合成模式可能会产生不直观但正确的结果。例如，Source Out 模式产生的结果与 Clear 混合模式相同。
使用 alpha 合成时，确保将渲染目标的 alpha 通道设置为适合 alpha 合成。例如：
使用通过启用 Node 2D > Force Composition 属性组合的父节点。这样，您可以将节点渲染到已清除的渲染目标。
如果窗口表面是半透明的，使用 Clear 混合模式清除目标帧缓冲区。
默认情况下，Kanzi 使用 Alpha: Premultiplied 模式合成节点，该模式对应于 Porter-Duff Source Over 模式。
在 Kanzi 中，要实现 Porter-Duff Destination 或 Source 模式的行为，请在目标或源节点中禁用 Node > Visibility 属性。
每个描述包括：
Kanzi 用于计算源 (\(src\)) 和目标 (\(dst\)) 组合的结果颜色 (\(C_{out}\)) 和 alpha (\(α_{out}\)) 的方程。
可视化展示了混合模式如何在具有不透明（左）或部分透明（右）内容的重叠源图像和目标图像上操作：
不透明 (Opaque) |
部分透明 |
||
目的地 (\(dst\)) |
|
|
|
来源 (\(src\)) |
|
|
不透明 (Opaque)¶
用源像素替换目标像素。 此模式等同于Porter-Duff Source 模式。
\[\begin{split}&C_{out} = C_{src} \\
&α_{out} = α_{src}\end{split}\]
|
|
|
清除¶
将目标像素设置为透明黑色。
\[\begin{split}&C_{out} = 0 \\
&α_{out} = 0\end{split}\]
|
|
|
异或¶
绘制不重叠的源像素和目标像素。在重叠的源像素和目标像素中，通过目标 alpha 的反值减少源 alpha，通过源 alpha 的反值减少目标 alpha，然后合并像素。
\[\begin{split}&C_{out} = (1 - α_{dst}) * C_{src} + (1 - α_{src}) * C_{dst} \\
&α_{out} = (1 - α_{dst}) * α_{src} + (1 - α_{src}) * α_{dst}\end{split}\]
|
|
|
Source Atop¶
丢弃那些不覆盖目标像素的源像素，并将其余的源像素绘制在目标像素上。
\[\begin{split}&C_{out} = α_{dst} * C_{src} + (1 - α_{src}) * C_{dst} \\
&α_{out} = α_{dst}\end{split}\]
|
|
|
源于 In¶
绘制覆盖目标像素的那些源像素，并丢弃所有目标像素。
\[\begin{split}&C_{out} = α_{dst} * C_{src} \\
&α_{out} = α_{dst} * α_{src}\end{split}\]
|
|
|
源输出¶
绘制源像素，其 alpha 值由目标 alpha 的反值减少，并丢弃所有目标像素。
\[\begin{split}&C_{out} = (1 - α_{dst}) * C_{src} \\
&α_{out} = (1 - α_{dst}) * α_{src}\end{split}\]
|
|
|
Destination Atop¶
丢弃未被源像素覆盖的目标像素，并将其余目标像素绘制在源像素上。
\[\begin{split}&C_{out} = α_{src} * C_{dst} + (1 - α_{dst}) * C_{src} \\
&α_{out} = α_{src}\end{split}\]
|
|
|
目的地 在¶
仅绘制与源像素相交的目标像素，并丢弃所有源像素。 您可以使用此混合模式来实现遮罩效果。请参阅 使用 alpha compositing 创建遮罩效果。
\[\begin{split}&C_{out} = α_{src} * C_{dst} \\
&α_{out} = α_{src} * α_{dst}\end{split}\]
|
|
|
Destination Out¶
绘制目标像素时，alpha 值按源 alpha 的反值减少，并丢弃所有源像素。 您可以使用此混合模式来实现反向蒙版效果。
\[\begin{split}&C_{out} = (1 - α_{src}) * C_{dst} \\
&α_{out} = (1 - α_{src}) * α_{dst}\end{split}\]
|
|
|
目标结束¶
将目标像素绘制在源像素上。
\[\begin{split}&C_{out} = (1 - α_{dst}) * C_{src} + C_{dst} \\
&α_{out} = (1 - α_{dst}) * α_{src} + α_{dst}\end{split}\]
|
|
|
高级颜色混合模式¶
本节介绍 Kanzi 中的高级颜色混合模式。使用 OpenGL 或 OpenGL ES 时，这些模式需要 GL_KHR_blend_equation_advanced 和 GL_KHR_blend_equation_advanced_coherent 扩展。使用 Vulkan 时，这些模式需要 VK_EXT_blend_operation_advanced 扩展。
每个描述包括：
Kanzi 用于计算源 (\(src\)) 和目标 (\(dst\)) 组合的结果颜色 (\(C_{out}\)) 的方程。
所有高级颜色混合模式都使用此方程来计算结果 alpha：
\[α_{out} = α_{src} + (1 - α_{src}) * α_{dst}\]这些重叠的源图像和目标图像上混合模式操作的可视化：
目的地 (\(dst\)) |
|
|
|
来源 (\(src\)) |
|
|
乘 (advanced khr)¶
将源和目标相乘，产生更深的颜色。除此之外，此模式与 乘以 模式类似，但它处理 alpha 的方式与 屏幕 (Screen) 模式相同。
\[C_{out} = C_{dst} * C_{src}\]
|
|
|
Overlay¶
结合 乘以 和 屏幕 (Screen) 模式。当目标较亮时，源变得更亮；当目标较暗时，源变得更暗。此模式保留目标中的高光和阴影。 |
|
|
变暗¶
比较目标和源的颜色并选择较暗的一个。
\[C_{out} = min(C_{dst}, C_{src})\]
|
|
|
Lighten¶
比较目标和源的颜色并选择较亮的一个。
\[C_{out} = max(C_{dst}, C_{src})\]
|
|
|
Color Burn¶
使目标变暗以反映源颜色，从而产生对比度更高、中间色调更饱和且高光减少的结果。白色源颜色不会产生变化。 此模式与 Color Dodge 模式相反。 |
|
|
颜色减淡¶
使目标变亮以反映源颜色，产生对比度较低、饱和中间色调和高光溢出的结果。黑色源颜色不会产生变化。 此模式与 Color Burn 模式相反。 |
|
|
强光¶
相乘或屏幕显示颜色：
黑色源颜色生成黑色，白色源颜色生成白色。 |
|
|
柔光¶
使颜色变暗或变亮：
结果比使用 Overlay 模式时更柔和。黑色或白色源颜色会产生明显更暗或更亮的结果，但不是纯黑或纯白。 |
|
|
差异¶
根据哪个颜色更亮，从目标颜色中减去源颜色或反过来。白色源颜色会反转目标颜色。黑色源颜色不会产生变化。
\[C_{out} = abs(C_{dst} - C_{src})\]
|
|
|
排除¶
创建类似于 Difference 但对比度较低的效果。白色源颜色会反转目标颜色。黑色源颜色则不会产生变化。
\[C_{out} = C_{src} + C_{dst} - 2 * C_{src} * C_{dst}\]
|
|
|
HSL 色相¶
用途：
|
|
|
HSL 饱和度¶
用途：
|
|
|
HSL 颜色¶
用途：
|
|
|
HSL 亮度¶
用途：
|
|
|
使用颜色混合创建一个叠加层¶
您可以使用颜色混合来创建比其背景更暗或更亮的部分透明叠加层。
要创建一个可以应用后期处理效果的叠加层，请使用效果。例如，您可以使用多种效果来创建毛玻璃效果。请参阅 2D 节点的效果 和 使用多个效果。
要使用颜色混合创建叠加层：
在 Prefabs 中创建您用作叠加层根的预设。
例如，创建一个 Empty Node 2D 预设，将其命名为 Notification，并将 Notification 预设添加到一个活动中。这样，当活动被激活时，您可以在 Preview 中看到预设的内容。
在 Prefabs 中，选择您创建的预设或您添加了预设的活动，并在 Properties 中设置叠加层的大小和位置。
要绘制叠加层的背景，在您用作叠加层根的预设中创建一个 Empty Node 2D 节点，并在 Properties 中添加和设置：
将 Foreground Brush 到您想要用来设置叠加颜色的颜色画笔。
Material > Blend Mode 到：
Multiply 创建一个比其背景更暗的覆盖层。
乘以 混合模式将源（叠加）和目标（背景）像素相乘。
Screen 创建比其背景更浅的覆盖层。
屏幕 (Screen) 混合模式将源（叠加）和目标（背景）像素相加，并从结果中减去源和目标的乘积。
在叠加预设的根部添加您想要显示在叠加顶部的内容。
（可选） 要为叠加层创建淡出和淡入过渡效果，请使用状态管理器，其中在不显示叠加层的状态中：
在叠加背景节点中设置 Foreground Brush 的 Brush Color:
如果您的叠加背景使用 Multiply 混合模式，请将 Brush Color 设置为白色。
当您将一种颜色与白色相乘时，该颜色不会改变。
如果您的叠加背景使用 Screen 混合模式，请将 Brush Color 设置为透明黑色。
当您将颜色与透明黑色混合时，该颜色不会改变。
在包含您要在叠加层顶部显示的内容的节点中，将 Node > Opacity 属性设置为 0。
您无法使用 Node > Opacity 属性调整叠加预设或叠加背景的不透明度，因为在节点中调整该属性会导致 Kanzi 合成该节点。出于同样的原因，您无法为叠加分配2D效果。例如，如果您的叠加背景使用 Multiply 混合模式，并且 Kanzi 合成叠加预设，Kanzi 将 Multiply 混合模式应用于空的合成渲染目标，导致叠加完全透明。
使用 alpha compositing 创建遮罩效果¶
您可以使用 alpha compositing 来实现一个简单的遮罩效果。
要创建更通用的遮罩效果，请使用 Mask Effect 2D 效果。请参阅 使用 Mask Effect 2D 效果。
要使用 alpha compositing 创建遮罩效果：
创建一个 2D 节点，用于承载您想要遮罩的内容和遮罩。
例如：在 Prefabs 中创建一个 Empty Node 2D 预设，并将其添加到一个活动中。这样，当活动被激活时，您可以在 Preview 中看到预设的内容。
在您创建的节点中，创建：
您想要屏蔽的内容。
您用作遮罩的节点。
例如，创建一个 Image 节点，并在 Properties 中添加和设置：
将 Image 到您想用作遮罩的纹理。
Horizontal Alignment 和 Vertical Alignment 到 Stretch
选择您用作遮罩的节点，在 Properties 中添加 Material > Blend Mode 属性，并将其设置为 Destination In。
目的地 在 模式使用遮罩的 alpha 通道绘制与遮罩相交的内容像素。
小技巧
要创建反向遮罩效果，请使用 Destination Out 模式。
选择承载内容和遮罩的节点，在 Properties 中添加 Node 2D > Force Composition 属性，并启用它。
这样即可设置 Kanzi 以合成节点并将其内容渲染到已清除的渲染目标。
