WPF文字描边实现方法详解

在 WPF 中实现文字描边的方法有多种，本文将探讨如何通过将文字转换为 Geometry 来实现这一效果。以下是详细步骤和方法：

1. 前言

   WPF 的 TextBlock 提供了多种常用的文字修饰功能，足以满足日常需求。然而，若需更丰富的表现方式，WPF 提供了更复杂但功能强大的工具。例如，实现文字描边就有几种方法可以达到效果。本文将简要介绍这些实现文字描边的手法。

2. 将文字转换为 Geometry

   实现文字描边的关键是使用 FormattedText 将文字转换为 Geometry，然后通过其他技术为 Geometry 添加边框并绘制。在 WPF 中，Geometry 及其派生类（如 EllipseGeometry、LineGeometry、PathGeometry、RectangleGeometry 等）用于描述 2D 形状的集合图形。FormattedText 的 BuildGeometry 函数可以将文字转换为 GeometryGroup（表示由其他 Geometry 对象组成的复合几何图形）。以下是实现该转换的代码：

   private Geometry CreateTextGeometry(){
       // 创建基于设置属性的格式化文本。
       FormattedText formattedText = new FormattedText(
           Text,
           CultureInfo.CurrentCulture,
           FlowDirection.LeftToRight,
           new Typeface(
               FontFamily,
               FontStyle,
               FontWeight,
               FontStretch),
           FontSize,
           System.Windows.Media.Brushes.Black,// 此画笔不重要，因为我们使用的是文本的几何形状。
           100);
       // 构建表示文本的几何对象。
       return formattedText.BuildGeometry(new Point(0, 0));
   }

   获得 Geometry 后，可以通过两种方式将其绘制出来。

3. 使用 DrawingContext

   WPF 中的 DrawingContext 是一个基础的绘图对象，用于绘制各种图形。其最简单的使用方式是重载 UIElement 的 OnRender 方法，在该方法中绘制 UIElement 的 UI。以下是使用 DrawingContext 绘制一个 500x500 正方形的示例代码：

   // 重载 OnRender 调用以添加背景和边框到 OffSetPanel
   protected override void OnRender(DrawingContext dc){
       SolidColorBrush mySolidColorBrush  = new SolidColorBrush();
       mySolidColorBrush.Color = Colors.LimeGreen;
       Pen myPen = new Pen(Brushes.Blue, 10);
       Rect myRect = new Rect(0, 0, 500, 500);
       dc.DrawRectangle(mySolidColorBrush, myPen, myRect);
   }

   除了绘制正方形，DrawingContext 还提供了 DrawEllipse、DrawImage、DrawLine 等函数，用于绘制圆形、图像、线条等。比起直接使用 DrawText，DrawGeometry 更适合绘制文字边框。在将文字转换为 Geometry 后，可以直接调用 DrawGeometry 并添加边框：

   protected override void OnRender(DrawingContext drawingContext){
       base.OnRender(drawingContext);
       var geometry = CreateTextGeometry();
       // 根据设置的属性绘制轮廓。
       drawingContext.DrawGeometry(Foreground, new Pen(Stroke, StrokeThickness), geometry);
   }

   通过 Stroke 和 StrokeThickness 控制文字边框的颜色和粗细。

4. 自定义 Shape

   微软的示例文档中介绍了前面的方法，但既然已经获得了文字的 Geometry，直接创建自定义的 Shape 可能会更合适。Shape 可以更容易地进行更多花样和动画。以下是使用自定义 Shape 实现空心文字的代码示例（省略了一些文本的自定义依赖属性）：

   public class TextShape : Shape{
       private double _height;
       private double _width;
       private Geometry _textGeometry;
       [Localizability(LocalizationCategory.Text)]
       public string Text
       {
           get { return (string)GetValue(TextProperty); }
           set { SetValue(TextProperty, value); }
       }
       protected sealed override Geometry DefiningGeometry
       {
           get
           {
               return _textGeometry ?? Geometry.Empty;
           }
       }
       protected override Size MeasureOverride(Size availableSize)
       {
           this.RealizeGeometry();
           return new Size(Math.Min(availableSize.Width, _width), Math.Min(availableSize.Height, _height));
       }
       private void RealizeGeometry()
       {
           var formattedText = new FormattedText(
                               Text,
                               CultureInfo.CurrentCulture,
                               FlowDirection.LeftToRight,
                               new Typeface(FontFamily, FontStyle, FontWeight, FontStretch), FontSize, Brushes.Black, 100);
           _height = formattedText.Height;
           _width = formattedText.Width;
           _textGeometry = formattedText.BuildGeometry(new Point());
       }
   }

   通过将文字转换为 Shape，除了实现文字描边，还可以实现多种动画效果，如下图所示：

   

5. 最后

   本文介绍了如何在 WPF 中实现文字描边。除了文字描边，将文字转换为 Shape 还有很多其他玩法，下一篇文章将简单尝试其中的一些。

   此外，文字描边的另一种方案是参考博客园的博客，使用 GDI+ 生成 Bitmap，然后转换为 BitmapImage：

   WPF 文本描边+外发光效果实现

6. 参考

   • Geometry 概述 - WPF .NET Framework
   • GeometryGroup 类 (System.Windows.Media)
   • FormattedText 类 (System.Windows.Media)
   • DrawingContext 类 (System.Windows.Media)
   • UIElement.OnRender(DrawingContext) 方法 (System.Windows)

7. 源码

   源码可在 GitHub 上找到：https://github.com/DinoChan/wpf_design_and_animation_lab