11

我有一个可以改变颜色的渐变，我希望它里面的文字应该总是可见的。

如果有任何开箱即用的资源，我宁愿动态地做它；我想要一个否定颜色的“魔法刷”。

有什么实验吗？

4

2 回答 2

8

Joel 就如何对齐渐变画笔给出了一个很好的答案。我想谈谈自动创建一个新的渐变画笔的复杂性，它保证在旧画笔上是可见的。

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

对于合理定义“太近”的非色盲人来说，总会有许多满足标准的路径。在这种情况下，需要额外的标准来决定哪个“更好”。例如，文本应该与背景尽可能地形成鲜明对比，还是应该在大部分情况下具有相同的总体色调？

另一方面，考虑到每个人的颜色感知的“太接近”的保守定义，例如“亮度必须相差至少 25%”，将遇到相反的问题：在每个点上满足条件的唯一梯度必须实际上是不连续的，即它必须同时从一种颜色跳到远处的颜色。例如，考虑从黑色到白色的简单渐变。如果仅涉及亮度，则对比背景必须具有不连续性，否则它将在某个点匹配。

由于这些原因，创建一个通用算法来产生对比背景更像是一门艺术而不是一门科学。可以使用多种算法，不同的算法将适用于不同的情况。

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

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

这里的底线是反转渐变颜色没有一个正确的答案。但是，如果您有一个算法来执行此操作，那么使用 Joel 的不透明蒙版技术以及实现您的算法的绑定和 IValueConverter 就可以解决问题。

于 2010-02-17T02:08:45.723 回答
6

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

制作一个Grid将成为 3 个子面板的容器，以便这些子面板完全相互重叠：

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

制作另一个名为“mainbackground”的面板，并将主渐变作为背景。将其放在“掩码”面板之后，使其覆盖文本

制作另一个名为“invertedforeground”的面板并给它相反的渐变。对于主渐变中的每个颜色值，给这个相反的值（例如，如果一种颜色是#FF0000，则放#00FFFF）。您可以为这个渐变设置动画，就像您可以为第一个设置动画一样，只是使用相反的值。然后OpacityMask将此面板的 设置为 aVisualBrush并将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属性，并且转换器接受输入渐变画笔并返回不同的渐变画笔（这允许您创建具有非常不同配置的渐变，如原本的）。

于 2010-02-16T16:31:38.347 回答