WPF中的“魔法”否定画刷？

Question

我有一个渐变色，它会不断变化；我希望里面的文字始终可见。

如果有现成的资源，我更愿意动态地完成这个效果；我想要一个“魔法刷”，来抵消颜色。

有没有什么实验?

- Shimmy Weitzhandler

---

你可以提供一个如何更改渐变颜色的例子吗？ - Joel B Fant

那就是重点。我想要一个动态的画笔，而不是静态的。 - Shimmy Weitzhandler

动态是什么意思？你在代码中分配不同的颜色吗？它们作为动画的一部分而改变吗？你是否只是使用DynamicResource而不是StaticResource？ - Joel B Fant

Answer 1

乔尔给出了如何对齐渐变画刷的优秀答案。我想谈谈自动创建一个新的渐变画刷的复杂性，以确保它在旧画刷上可见。

在WPF中，颜色是三维建模的，因为需要三个数字（如R/G/B或H/S/B）来定义WPF颜色，不包括alpha分量。给定的渐变填充可以被视为在三维颜色空间中从一个颜色点到另一个颜色点的路径。要创建一个与原始渐变形成对比的反向渐变需要创建一条额外的路径，该路径在任何时候都不会“过于接近”原始路径。对于此目的，“过于接近”的意思是任何两种难以区分的颜色。这实际上是主观的。大约4%的色盲人将有与非色盲人不同的“过于接近”的解释。

对于非色盲人，在合理定义“过于接近”的情况下，总会有多种满足条件的路径。在这种情况下，需要其他标准来决定哪个更好。例如，文本是否应该尽可能与背景形成对比，或者它是否应该在大部分时间内具有相同的一般色调？

另一方面，一个保守的“过于接近”的定义，考虑到每个人的颜色感知，例如“亮度必须相差至少25%”将遭受相反的问题：满足每个点条件的唯一渐变必须实际上是不连续的，也就是说它必须从一个颜色突然跳到远离的颜色。例如，考虑从黑色到白色的简单渐变。如果只涉及亮度，则对比背景必须具有不连续性，否则它将在某些点匹配。

因此，创建一个生成对比背景的通用算法更多地是一种艺术而不是科学。可以使用多个算法，并且在不同情况下使用不同算法将是适当的。

用于此目的的一个简单算法是保持渐变的色调和饱和度不变，并将亮度设置为(luminance + 50%) mod 100%。然而，在大多数情况下，这种算法并不产生美观的结果，并且它的亮度变化永远不超过50%。修改这个算法的方法是反转或移动色调和饱和度值。

计算对比亮度的更简单的算法是luminance>50% ? 0% : 100%。这也可能存在美学问题。

总之，在反转渐变颜色方面并没有一个正确的答案。但是，如果您有一个算法来做到这一点，使用乔尔的不透明度蒙版技术以及实现您算法的绑定和IValueConverter将可以解决问题。

- Ray Burns

---

+1：在阅读Joel的“反梯度”方法后，您的回答正是我想要立即写下的。很好地介绍了颜色空间问题！ - quetzalcoatl

Answer 2

颜色反转可能可以作为位图效果完成，但还有一种更简单的方法。

创建一个Grid，将其作为三个子面板的容器，以便这些子面板完全重叠：

在具有透明背景（默认情况下）的面板中放置文本。将此面板命名为“mask”。

创建另一个名为“mainbackground”的面板，并将其设置为主渐变背景。将其放置在“mask”面板后，以覆盖文本。

创建另一个名为“invertedforeground”的面板，并给它相反的渐变。对于主渐变中的每个颜色值，都将其赋予相反的值（例如，如果一个颜色是#FF0000，则将其设置为#00FFFF）。您可以像第一个渐变一样动画此渐变，只需使用相反的值即可。然后，将此面板的OpacityMask设置为VisualBrush，并将VisualBrushes的Visual属性设置为{Binding ElementName=mask}。

<Grid>
    <Grid.Resources>
        <local:MyColorConverter x:Key="colorConverter" />
    </Grid.Resources>
    <Grid
        Name="mask">
        <TextBlock
            Name="mytext"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            FontSize="32"
            Foreground="White"
            FontWeight="Bold">Blah blah blah</TextBlock>
    </Grid>

    <Grid Name="mainbackground">
        <Grid.Background>
            <LinearGradientBrush
                ColorInterpolationMode="ScRgbLinearInterpolation"
                EndPoint="1,0">
                <GradientStop x:Name="stop1"
                    Color="#FF0000"
                    Offset="0" />
                <GradientStop x:Name="stop2"
                    Color="#00FF00"
                    Offset="0.5" />
                <GradientStop x:Name="stop3"
                    Color="#0000FF"
                    Offset="1" />
            </LinearGradientBrush>
        </Grid.Background>
    </Grid>

    <Grid Name="invertedforeground">
        <Grid.Background>
            <LinearGradientBrush
                ColorInterpolationMode="ScRgbLinearInterpolation"
                EndPoint="1,0">
                <GradientStop
                    Color="{Binding ElementName=stop1, Path=Color, Converter={StaticResource colorConverter}}"
                    Offset="0" />
                <GradientStop
                    Color="{Binding ElementName=stop2, Path=Color, Converter={StaticResource colorConverter}}"
                    Offset="0.5" />
                <GradientStop
                    Color="{Binding ElementName=stop3, Path=Color, Converter={StaticResource colorConverter}}"
                    Offset="1" />
            </LinearGradientBrush>
        </Grid.Background>
        <Grid.OpacityMask>
            <VisualBrush
                Visual="{Binding ElementName=mask}" />
        </Grid.OpacityMask>
    </Grid>
</Grid>

您可以使用绑定和值转换器，这样您只需要动画一个渐变色，另一个渐变色就会跟随它。

---

编辑：我尝试为文本设置反转的前景笔刷，但它会固定在TextBlock的坐标上，因此我回到了将文本用作OpacityMask的先前解决方案。

---

编辑2： 我添加了一个自定义IValueConverter的示例用法，并将文本渐变色绑定到原始渐变色。您还可以在更高的地方使用绑定和转换器，例如将invertedforeground的Background属性绑定到mainbackground的Background属性，转换器接收输入的渐变笔刷并返回不同的渐变笔刷（这允许您创建具有与原始渐变非常不同的配置的渐变）。

- Joel B Fant

---

使用 OpacityMask 同步梯度的布局可以得到 +1 分。还要考虑两点：1. 可以通过使用 IValueConverter 绑定来从前景画刷计算反转画刷，而不是手动计算。2. 颜色计算比直接颜色反转更加困难，例如将 #808080 反转会得到几乎相同的 #7F7F7F。 - Ray Burns

#1: 的确可以。我想至少会展示绑定。 #2: 这就是反转的定义；灰色反转为灰色。在文本上使用渐变来区分背景渐变的设计决策本身就是边缘情况的滋生地。原帖并没有提供足够的信息来简化我们的答案。 - Joel B Fant