WPF - 控制半透明图层之间的混合

Question

在数字成像中，当叠加两个视觉图层时，有多种计算图像的方式，即当来自下层的光线以某种方式穿过遮挡层时产生的图像。这可以提供不会发生自然现象的效果，例如颜色相乘。

以下是Photoshop提供的图层混合模式菜单示例：
_{(来源：psdtop.com)} 如果您对此主题不熟悉，我建议访问文章Understanding Blending Modes。它展示了每个选项针对两个图层的结果。

据我所知，WPF仅提供“正常”选项。也就是说，以下UI只是将颜色混合在一起，就像它们是彩色滤光片一样。

<Grid>
  <Ellipse Width="40" Height="40" Fill="#80FF0000" Margin="16,0,0,0" />
  <Ellipse Width="40" Height="40" Fill="#8000FF00" Margin="32,32,0,0" />
  <Ellipse Width="40" Height="40" Fill="#800000FF" Margin="0,32,0,0" />
</Grid>

它看起来像这样：

我想知道是否有任何方法可以控制图层混合的方式。

- Drew Noakes

Answer 1

你要找的是混合模式。

这里有一个使用像素着色器实现混合模式的示例。你需要使用多输入着色器效果来实现它。

这是一个非常好的完整教程，它会指导你如何使用多输入着色器效果创建可重用的混合模式库。

自从早期 CTP 以来，混合模式作为 WPF API 的内在部分一直被请求, 但从未成为产品的一部分。

- bitbonk

---

谢谢这个。不幸的是，它们没有得到支持，但是Adam Smith在您提供的链接中很好地解释了原因。Cory Plott的三部教程也很有趣。 - Drew Noakes

谢谢你的夸奖，Drew！这个系列现在已经有6篇文章了，我还计划在我的脑海中再写一篇。 - cplotts

Answer 2

我刚遇到了这个问题... 但是在某些情况下，您可以使用我的混合模式库来实现此功能（不幸的是，有一些限制...我们真的需要将这种功能烧入WPF API中）。

bitbonk引用了我博客系列中的起始帖子...但每篇文章都附有混合模式库的源代码和二进制文件。

以下是迄今为止的系列（按时间顺序）。我确实想写一篇关于如何使用这些混合模式以及它们带来的价值的文章。

• 混合模式，第I部分
• 混合模式，第II部分
• Silverlight的混合模式
• 混合模式，第III部分
• 混合模式：现在支持不透明度
• 混合模式：使用WPF 4.0的色相、饱和度、颜色和亮度

如果我可以指向您一个要使用的源代码/二进制文件集合，那么就是我使混合模式库支持不透明度的这个。这是最新的版本，可在WPF和Silverlight上运行。最终的文章中介绍的色相、饱和度、颜色和亮度效果是该库的仅适用于WPF版本，因为这些效果需要Pixel Shader 3.0，目前只有WPF 4.0支持。

祝好运，如果您使用了我的库，请告诉我！

- cplotts

---

感谢Cory在这个领域的工作。我同意，在框架本身中支持这一点将是很好的（Adam Smith在此解释为什么还没有http://social.msdn.microsoft.com/forums/en-US/wpf/thread/e41de282-7d7a-4127-9d8d-815e66354a87/）。 - Drew Noakes

谢谢Drew。是的，解释得非常好...不是吗。你会注意到我在帖子中发表了评论。 :) - cplotts

这些东西能在WinRT/Windows Store应用程序中使用吗？我需要一些“加深”混合模式。 - Ani

@ananthonline 这是一个很好的问题。目前，可用的东西仅适用于WPF和Silverlight。此外，我不知道WinRT XAML堆栈是否支持GPU效果......如果支持，那么您很有可能采用Silverlight版本并构建库的WinRT版本。 - cplotts

Answer 3

我相信您需要编写自定义着色器效果才能使WPF以不同的方式混合颜色。 http://msdn.microsoft.com/en-us/library/dd901594(VS.95).aspx 滚动到“创建自定义像素着色器效果”部分。

我理解这并不是一件简单的事情。有时候使用静态图形资源来妥协会更容易。我们的UI设计师无法接受WPF颜色混合，因此我们界面的某些部分使用简单的.png文件，在必须要以某种特定的方式呈现时使用。

- Egor