【问题标题】:WPF 'magic' negating brush?WPF'魔法'否定画笔?
【发布时间】:2010-02-16 14:47:09
【问题描述】:

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

如果有任何开箱即用的资源,我宁愿动态地做;我想要一个可以消除颜色的“魔法画笔”。

有什么实验吗?

【问题讨论】:

  • 你能提供一个如何改变渐变颜色的例子吗?
  • 这就是重点。我想要一个动态的画笔,而不是静态的。
  • 动态是什么意思?您在代码中分配不同的颜色?它们作为动画的一部分而改变?您的意思是使用 DynamicResource 而不是 StaticResource?

标签: wpf brush


【解决方案1】:

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

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

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

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

出于这些原因,创建一个生成对比背景的通用算法与其说是一门科学,不如说是一门艺术。可以使用多种算法,不同的算法适合不同的情况。

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

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

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

【讨论】:

  • +1:您的回答正是我在阅读了 Joel 的“反梯度”方法后立即想写的。色彩空间问题的精彩介绍!
【解决方案2】:

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

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

将文本放在具有Transparent 背景的面板中您想要的位置(默认情况下)。将此面板命名为“面具”。

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

制作另一个名为“invertedforeground”的面板并给它相反的渐变。对于主渐变中的每个颜色值,给这个相反的值(例如,如果一种颜色是#FF0000,则输入#00FFFF)。您可以为这个渐变设置动画,就像您可以为第一个设置动画一样,只是使用相反的值。然后将此面板的OpacityMask 设置为VisualBrush,并将VisualBrushesVisual 属性设置为{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 的坐标,所以我恢复到之前使用文本作为@ 的解决方案987654332@.


编辑 2: 我添加了自定义 IValueConverter 的示例用法并将文本渐变的颜色绑定到原始渐变的颜色。您还可以在更高的位置使用绑定和转换器,例如将invertedforegroundBackground 属性绑定到mainbackgroundBackground 属性,转换器采用输入渐变画笔并返回不同的渐变画笔(此允许您创建与原始配置完全不同的渐变)。

【讨论】:

  • +1 用于使用 OpacityMask 同步渐变布局。两个额外的注意事项: 1. 可以使用与 IValueConverter 绑定而不是手动执行从前景画笔计算反转画笔。 2. 颜色计算比直接颜色反转更困难,例如反转#808080 得到几乎相同的#7F7F7F。
  • #1:确实可以。我想我会展示绑定,至少。 #2:这是倒置的定义;灰色反转为灰色。在文本上使用渐变以将其与背景渐变区分开来的设计决策首先是边缘情况的温床。 OP 没有为我们提供太多信息来简化我们的答案。
猜你喜欢
  • 2012-06-20
  • 1970-01-01
  • 2012-01-28
  • 1970-01-01
  • 1970-01-01
  • 2010-10-31
  • 2011-01-15
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多