WPF'魔术'否定刷？

Question

我有一个渐变来改变它的颜色,我希望它里面的文字应该始终可见.

如果有任何开箱即用的资源,我宁愿动态地做它; 我想要一种否定颜色的"魔术刷".

有实验吗？

Answer 1

Joel对如何对齐渐变画笔给出了很好的答案.我想谈谈自动创建一个新的渐变画笔的复杂性,该画笔保证可以看到旧画笔.

在WPF中,颜色是三维建模的,因为它需要三个数字(例如R/G/B或H/S/B)来定义WPF颜色,而不是计算alpha分量.给定的梯度填充可以被视为在三维颜色空间中从一个颜色点前进到另一个颜色点的路径.要创建在每个点处形成对比的反向渐变,需要创建一条额外的路径,该路径在任何时候都不会与原始路径"过于接近".为此目的,"过于接近"是人眼难以区分的任何两种颜色.这实际上是主观的.色盲人群中有4%左右的人对"过于亲密"的解释不同于那些没有色彩的人.

对于合理定义"太近"的非色盲人,将始终存在满足标准的多个路径.在这种情况下,需要额外的标准来决定哪一个"更好".例如,文本应该尽可能与背景形成鲜明对比,还是它应该在大多数情况下具有相同的一般色调？

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

出于这些原因,创建一种通用算法来产生对比背景更像是一门艺术,而不是一门科学.可以使用多种算法,并且在不同情况下不同的算法是适当的.

已经用于此目的的简单算法是使色调和饱和度保持相同的梯度并将亮度设置为(luminance + 50%) mod 100%.然而,在大多数情况下,该算法不会产生非常美观的结果,并且它的亮度变化不会超过50%.该算法的修改也是反转或移位色调和饱和度值.

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

这里的底线是没有一个正确的答案来反转您的渐变颜色.但是如果你有一个算法来做到这一点,使用Joel的不透明蒙版技术以及一个实现你的算法的绑定和IValueConverter就可以了.

Answer 2

那么,颜色反转可能会作为位图效果完成,但有一种更简单的方法.

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

将文本放在具有Transparent背景的面板中(默认情况下).将此面板命名为"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>

您可以使用绑定和值转换器,这样您只需要为一个渐变设置动画,而另一个只需跟随.

编辑:我尝试为文本设置一个倒置的Foreground画笔,但它会坚持到TextBlock坐标,所以我恢复到以前使用文本作为的解决方案OpacityMask.

编辑2:我添加了自定义的示例用法,IValueConverter并将文本渐变的颜色绑定到原始渐变.你也可以使用绑定和转换器中较高,如绑定invertedforeground的Background属性mainbackground的Background属性和转换器需要输入倾斜刷,并返回一个不同的渐变画笔(这允许你创建一个非常不同的配置作为梯度原本的).