在WPF中给半透明图像着色

Question

我该如何在WPF（使用MVVM）中为图像添加色彩，而不会牺牲性能？完全采用XAML的方案最理想，因为在代码中修改位图将导致大量变化图像的性能下降。但由于图像不仅由简单的形状构成，因此无法使用路径来实现这一点。

- Cyral

Answer 1

与WinForms/GDI+不同，WPF似乎没有任何简单的方法来在渲染过程中给图像上色/着色。实现这一目标的两个想法是使用着色器或在图像上叠加一个有颜色的矩形。

我决定尝试使用矩形的方法，并发现它有效。基本上，你只需要在图像上叠加一个有颜色的矩形，并使用OpacityMask来限制颜色填充的区域。OpacityMask主要用于路径，但它可以接受任何类型的画刷，包括ImageBrush。这意味着你可以将图像作为有色填充的"模板"。

示例：（摘自我的应用程序，用户可以对地图的某个部分进行"高亮"，实际图像看起来像this） 覆盖和遮罩之前

叠加和遮罩之后

这是所需的全部XAML代码：

<Image
    Source="{Binding MyImage}"
    Width="150"
    Height="150" />
<Rectangle Width="150" Height="150">
    <Rectangle.Fill>
        <SolidColorBrush Color="{Binding Color}"/>
    </Rectangle.Fill>
    <Rectangle.OpacityMask>
        <ImageBrush ImageSource="{Binding MyImage}"/>
    </Rectangle.OpacityMask>
</Rectangle>

要像我一样将颜色绑定到画刷上，请使用ColorToBrushConverter。

- Cyral

---

你可以通过在XAML中创建一个SolidColorBrush实例并绑定它的Color属性，像这样 <Rectangle.Fill><SolidColorBrush Color="{Binding Color}"/></Rectangle.Fill>，来节省ColorToBrushConverter。 - Clemens