我有一个改变颜色的渐变,我希望它里面的文字应该始终可见。
如果有任何开箱即用的资源,我宁愿动态地做它;我想要一个否定颜色的“魔法刷”。
任何实验?
答案 0 :(得分:8)
Joel对如何对齐渐变画笔给出了很好的答案。我想谈谈自动创建一个新的渐变画笔的复杂性,这个渐变画笔可以保证对旧的渐变画笔可见。
在WPF中,颜色是三维建模的,因为它需要三个数字(例如R / G / B或H / S / B)来定义WPF颜色,而不是计算alpha分量。给定的梯度填充可以被视为在三维颜色空间中从一个颜色点前进到另一个颜色点的路径。要创建在每个点处形成对比的反向渐变,需要创建一条额外的路径,该路径在任何时候都不会与原始路径“过于接近”。为此目的,“过于接近”是人眼难以区分的任何两种颜色。这实际上是主观的。色盲人群中有4%左右的人对“过于亲近”的解释不同于那些没有色彩的人。
对于合理定义“太近”的非色盲人,总会有多条路径满足标准。在这种情况下,需要额外的标准来决定哪一个“更好”。例如,文本应该尽可能与背景形成鲜明对比,还是它应该在大多数情况下具有相同的一般色调?
另一方面,考虑到每个人的色彩感知的“过于接近”的保守定义,例如“亮度必须相差至少25%”,将遭遇相反的问题:满足条件的唯一梯度每个点实际上必须是不连续的,即它必须同时从一种颜色跳到一种颜色。例如,考虑从黑色到白色的简单渐变。如果仅涉及亮度,则对比背景必须具有不连续性,否则它将在某一点匹配。
由于这些原因,创建一种通用算法来产生对比背景更像是一门艺术,而不是一门科学。可以使用多种算法,不同的算法适用于不同的情况。
用于此目的的简单算法是保持色调和饱和度与渐变相同,并将亮度设置为(luminance + 50%) mod 100%
。然而,在大多数情况下,该算法不会产生非常美观的结果,并且它的亮度变化不会超过50%。该算法的一种修改是反转或移动色调和饱和度值。
计算对比亮度的更简单的算法是luminance>50% ? 0% : 100%
。这也可能有美学问题。
这里的底线是没有一个正确的答案来反转您的渐变颜色。但是如果你有一个算法来做这个,使用Joel的不透明蒙版技术以及一个实现你的算法的绑定和IValueConverter就可以了。
答案 1 :(得分:6)
嗯,颜色反转可能是作为位图效果完成的,但是有一种更简单的方法。
制作一个Grid
作为3个子面板的容器,以便这些子面板完全相互重叠:
将文本放在具有Transparent
背景的面板中(默认情况下)。将此面板命名为“掩码”。
制作另一个名为“mainbackground”的面板,并将主渐变作为背景。把它放在'掩码'面板之后,使其覆盖文本
制作另一个名为'invertedforeground'的面板,并给它相反的渐变。对于主渐变中的每个颜色值,给出相反的颜色值(例如,如果一种颜色是#FF0000
,则放置#00FFFF
)。您可以为此渐变设置动画,就像您可以为第一个设置动画一样,只需使用相反的值。然后,您将此面板的OpacityMask
设置为VisualBrush
,并将VisualBrushes
的{{1}}属性设置为Visual
。
{Binding ElementName=mask}
您可以使用绑定和值转换器,这样您只需要为一个渐变设置动画,而另一个只需跟随。
编辑:我尝试为文本设置一个倒置的Foreground画笔,但它会粘在<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
。
编辑2 我添加了自定义OpacityMask
的示例用法,并将文本渐变的颜色绑定到原始渐变。您还可以在更高的位置使用绑定和转换器,例如将IValueConverter
的{{1}}属性绑定到invertedforeground
的{{1}}属性,转换器将使用输入渐变画笔并返回一个不同的渐变画笔(这允许您创建一个与原始配置有很多不同配置的渐变)。