Question

我的顶部有一个带有文字的银色边框，我想排除（从边框切割文字）以透视边框后面的背景，其中应用了一个带阴影的比特效果。这是否可能，没有去photoshop创建基本上做同样事情的图像，而不是那么灵活？

如果可能，我将如何完成这项任务？

Answer 1

我玩了一下这个，最后得到了以下内容棘手的部分是“反转”OpacityMask for the Border。我创建了一个派生自Image的类，它添加了一些依赖属性，如Text，FontFamily和EmSize。然后，它使用this link的方法将文本转换为几何。

您可以使用Text，FontFamily，EmSize，Width和Height，直到获得所需的结果。您当然也可以向InvertOpacityText添加额外的DP以增加灵活性。

我最终得到了这个

alt text

<Grid Background="Blue">
    <Border Background="Gray" CornerRadius="8,8,8,8" Width="240" Height="220">
        <Border.Effect>
            <DropShadowEffect ShadowDepth="10"
                              Direction="310"
                              Color="Black"
                              Opacity="0.8"
                              BlurRadius="4"/>
        </Border.Effect>
        <Border.OpacityMask>
            <VisualBrush>
                <VisualBrush.Visual>
                    <local:InvertOpacityText Text=" Now Playing"
                                             EmSize="70"
                                             Stretch="Fill"
                                             Width="510"
                                             Height="414"
                                             FontFamily="Broadway">
                        <local:InvertOpacityText.LayoutTransform>
                            <RotateTransform Angle="-90"/>
                        </local:InvertOpacityText.LayoutTransform>
                    </local:InvertOpacityText>
                </VisualBrush.Visual>
            </VisualBrush>
        </Border.OpacityMask>
        <Image Margin="45,5,5,5" Source="C:\PhilCollins.png"/>
    </Border>
</Grid>

<强> InvertOpacityText.cs

public class InvertOpacityText : Image
{
    public static readonly DependencyProperty TextProperty =
        DependencyProperty.Register("Text",
                                    typeof(string),
                                    typeof(InvertOpacityText),
                                    new FrameworkPropertyMetadata(string.Empty,
                                                                  TargetPropertyChanged));
    public static readonly DependencyProperty EmSizeProperty =
        DependencyProperty.Register("EmSize",
                                    typeof(double),
                                    typeof(InvertOpacityText),
                                    new FrameworkPropertyMetadata(70.0,
                                                                  TargetPropertyChanged));
    public static readonly DependencyProperty FontFamilyProperty =
        DependencyProperty.Register("FontFamily",
                                    typeof(FontFamily),
                                    typeof(InvertOpacityText),
                                    new FrameworkPropertyMetadata(new FontFamily(),
                                                                  TargetPropertyChanged));

    private static void TargetPropertyChanged(DependencyObject source, DependencyPropertyChangedEventArgs e)
    {
        InvertOpacityText invertOpacityText = (InvertOpacityText)source;
        invertOpacityText.OnTextChanged();
    }

    public string Text
    {
        get { return (string)base.GetValue(TextProperty); }
        set { base.SetValue(TextProperty, value); }
    }
    public double EmSize
    {
        get { return (double)base.GetValue(EmSizeProperty); }
        set { base.SetValue(EmSizeProperty, value); }
    }
    public FontFamily FontFamily
    {
        get { return (FontFamily)base.GetValue(FontFamilyProperty); }
        set { base.SetValue(FontFamilyProperty, value); }
    }

    private void OnTextChanged()
    {
        if (Source == null)
        {
            Source = CreateBitmapSource();
        }

        FormattedText tx = new FormattedText(Text,
                                             Thread.CurrentThread.CurrentUICulture,
                                             FlowDirection.LeftToRight,
                                             new Typeface(FontFamily,
                                                          FontStyles.Normal,
                                                          FontWeights.Bold,
                                                          FontStretches.Normal),
                                             EmSize,
                                             Brushes.Black);
        Geometry textGeom = tx.BuildGeometry(new Point(0, 0));
        Rect boundingRect = new Rect(new Point(-100000, -100000), new Point(100000, 100000));
        RectangleGeometry boundingGeom = new RectangleGeometry(boundingRect);
        GeometryGroup group = new GeometryGroup();
        group.Children.Add(boundingGeom);
        group.Children.Add(textGeom);
        Clip = group;
    }
    private BitmapSource CreateBitmapSource()
    {
        int width = 128;
        int height = width;
        int stride = width / 8;
        byte[] pixels = new byte[height * stride];
        List<System.Windows.Media.Color> colors = new List<System.Windows.Media.Color>();
        colors.Add(System.Windows.Media.Colors.Red);
        colors.Add(System.Windows.Media.Colors.Blue);
        colors.Add(System.Windows.Media.Colors.Green);
        BitmapPalette myPalette = new BitmapPalette(colors);
        return BitmapSource.Create(width,
                                   height,
                                   96,
                                   96,
                                   PixelFormats.Indexed1,
                                   myPalette,
                                   pixels,
                                   stride);
    }
}

Answer 2

这是一个解决方案，可以创建一个名为FrameworkElement的新HollowTextBlock，用其Background填充其分配的大小，然后剪切Text，使其保持透明。一个成熟的实现需要支持更多的属性，但这证明了这个概念有效。

首先，这是一些示例XAML：

<Grid>
    <Grid>
        <Grid.Background>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                <GradientStop Color="#FF0000" Offset="0" />
                <GradientStop Color="#0000FF" Offset="1" />
            </LinearGradientBrush>
        </Grid.Background>
    </Grid>
    <Grid>
        <local:HollowTextBlock Width="200" Height="50" Text="Hello, world!" Background="White" HorizontalAlignment="Center"/>
    </Grid>
</Grid>

定义文本背后的彩色渐变背景，以便我们可以看到它正在工作。然后我们创建HollowTextBlock，在原型Width中，Height，Text和Background必须全部指定。

然后我们实现了HollowTextBlock：

public class HollowTextBlock : FrameworkElement
{
    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }

    public static readonly DependencyProperty TextProperty =
        DependencyProperty.Register("Text", typeof(string), typeof(HollowTextBlock), new UIPropertyMetadata(string.Empty));

    public Brush Background
    {
        get { return (Brush)GetValue(BackgroundProperty); }
        set { SetValue(BackgroundProperty, value); }
    }

    public static readonly DependencyProperty BackgroundProperty =
        TextElement.BackgroundProperty.AddOwner(typeof(HollowTextBlock), new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.AffectsRender));

    protected override void OnRender(DrawingContext drawingContext)
    {
        base.OnRender(drawingContext);
        var extent = new RectangleGeometry(new Rect(0.0, 0.0, RenderSize.Width, RenderSize.Height));
        var face = new Typeface("Arial");
        var size = 32;
        var ft = new FormattedText(Text, Thread.CurrentThread.CurrentUICulture, FlowDirection.LeftToRight, face, size, Brushes.Black);
        var hole = ft.BuildGeometry(new Point((RenderSize.Width - ft.Width) / 2, (RenderSize.Height - ft.Height) / 2));
        var combined = new CombinedGeometry(GeometryCombineMode.Exclude, extent, hole);
        drawingContext.PushClip(combined);
        drawingContext.DrawRectangle(Background, null, new Rect(0.0, 0.0, RenderSize.Width, RenderSize.Height));
        drawingContext.Pop();
    }
}

，渲染的输出如下所示：

HollowTextBlock

N.B。使用它时，你必须小心，不要把它放在一些会掩盖你想表现出的真实背景的东西之上。

从边框中排除标签文本

2 个答案: