在 WPF 里面，提供的使用底层的方法绘制文本是通过 DrawGlyphRun 的方式，此方法适合用在需要对文本进行精细控制的定制化控件上。此方法特别底层而让调用方法比较复杂，本文告诉大家一些简单的使用方法
本文也属于 WPF 渲染系列博客，更多渲染相关博客请看 渲染相关
在开始之前，我是来劝退的，如果没有特别的需求，还是不推荐使用 DrawGlyphRun 的方式进行文本绘制。本文不会告诉大家特别基础的知识，基础部分还请看官方文档： GlyphRun Class (System.Windows.Media)
如果可以的话，顺便也将 DirectWrite 的官方文档也读一次
使用 DrawGlyphRun 方法之前需要拿到一个 DrawingContext 对象，而在调用此方法时，重要的参数是 GlyphRun 对象，此对象包含了大量的参数，本文将来告诉大家这些的参数的用法
例子
新建一个空 WPF 项目用来做例子
在 MainWindow 的 Loaded 事件里面，创建 DrawingVisual 用来获取 DrawingContext 对象
public MainWindow()
{
InitializeComponent();
Loaded += MainWindow_Loaded;
}
private void MainWindow_Loaded(object sender, RoutedEventArgs e)
{
var drawingVisual = new DrawingVisual();
using (var drawingContext = drawingVisual.RenderOpen())
{
}
Background = new VisualBrush(drawingVisual);
}
默认作为 Background 的 Brush 将会被撑开，为了让后续绘制的文本有指定的尺寸，绘制一个和窗口相同大小的矩形，这样就可以让 drawingVisual.Drawing.Bounds 的尺寸和窗口相同
using (var drawingContext = drawingVisual.RenderOpen())
{
drawingContext.DrawRectangle(Brushes.Black, null, new Rect(0, 0, ActualWidth, ActualHeight));
}
准备
在使用 DrawGlyphRun 绘制需要创建 GlyphRun 对象，需要有以下参数才能构建出绘制的文本内容
- 字体
- 字号
- 文本内容
- 文本绘制画刷
- 文本绘制的坐标
尽管 GlyphRun 对象需要的参数很多，然而很多参数都是可以默认获取的
字体
在 GlyphRun 里面需要的字体不是 FontFamily 而是需要传入的是 GlyphTypeface 对象。好在 GlyphTypeface 对象就是可以从 FontFamily 获取的
每个字体都相当于有一族，多个 Typeface 对象，如下面代码可以获取第一个 Typeface 对象
var fontFamily = new FontFamily("微软雅黑");
Typeface typeface = fontFamily.GetTypefaces().First();
如果此字体是成功安装的，清真的字体，那么可以通过如下代码获取到 GlyphTypeface 对象
bool success = typeface.TryGetGlyphTypeface(out GlyphTypeface glyphTypeface);
大部分字体都能成功拿到，如果不能成功那么，那么就需要自己走字体 Fallback 换个字体啦，或者炸掉。自己决定如果给定的字体创建失败了，则使用什么字体代替的方法叫做字体 Fallback 算法
关于如何做字体的回滚策略，还请参阅下文 字体回滚策略 内容
文字编号
每个文字在字体里面都可以有自己的编号，需要通过 CharacterToGlyphMap 获取对应的值
var text = "林德熙abc123ATdVACC";
List<ushort> glyphIndices = new List<ushort>();
for (var i = 0; i < text.Length; i++)
{
var c = text[i];
var glyphIndex = glyphTypeface.CharacterToGlyphMap[c];
glyphIndices.Add(glyphIndex);
}
需要同时在 GlyphRun 传入编号和 Unicode 的值
设置字号
在 GlyphRun 里面，支持输入多个文字和单个文字，在输入时，可以给每个文字指定字号。字号其实是一个上层的概念，而在 GlyphRun 需要使用底层的文本渲染概念，也就是字符的 AdvanceWidth 的值。简单的获取 AdvanceWidth 的方法如下
List<double> advanceWidths = new List<double>();
for (var i = 0; i < text.Length; i++)
{
var c = text[i];
var width = glyphTypeface.AdvanceWidths[glyphIndex] * fontSize;
advanceWidths.Add(width);
}
以上代码将字符串每个文字都设置相同的字号，但是大家可以根据需求，给每个文字都设置字号。对于等宽字符来说，每个字符的 AdvanceWidths 对应的值都应该是相同的。对于非等宽字符，可以在特殊排版需求的时候，强行设置为等宽的值
字符都是等比的，因此只需要设置宽度即可，设置字宽等于设置字号
设置字体偏移
在 GlyphRun 的高级用法里面，是允许设置文字的偏移量。文字的偏移量是一个文字的排版的基础值，推荐大家写一点代码去摸索一下他的规则
List<Point> glyphOffsets = new List<Point>();
var fontSize = 30;
for (var i = 0; i < text.Length; i++)
{
var c = text[i];
// 只是决定每个字的偏移量，记得加上 i 乘以哦。字符最好是叠加上 fontSize 的值，使用 fontSize 的倍数
glyphOffsets.Add(new Point(fontSize * i, 0));
}
在 GlyphRun 里面，文字的偏移量非必须的，可以传入为空值，因此以上代码是非必须的，只有需要控制每个字的偏移量的时候才需要用到。此偏移量不是相对坐标值，只是偏移量而已，相对来说比较绕
文本偏移
在 DrawGlyphRun 方法里面是不包含文本的坐标的参数的，需要在 GlyphRun 对象里面设置整个文本的起始坐标，如下面代码准备好文本的 X 和 Y 坐标值
var location = new Point(10, 100);
上面代码只是例子而已，还请替换为你的业务代码的需要绘制的文本坐标
但是需要知道的是在 GlyphRun 里面传入的是 BaseLine 而不是 Location 的值，相互转换的逻辑需要根据 FontFamily 的 Baseline 的值才能计算，代码如下
/// <summary>
/// 获取指定字体的baseline
/// </summary>
/// <param name="fontFamily"></param>
/// <param name="fontRenderingEmSize"></param>
/// <returns></returns>
public static double GetBaseline(this FontFamily fontFamily, double fontRenderingEmSize)
{
var baseline = fontFamily.Baseline;
var renderingEmSize = fontRenderingEmSize;
var value = baseline * renderingEmSize;
return value;
}
location = new Point(location.X, location.Y + fontFamily.GetBaseline(fontSize));
以上代码是将 GetBaseline 的返回值给到 location 的 Y 值，这适合用在水平布局文本上。如果是垂直排版的文本，自然就需要放在水平方向。请根据你的业务代码修改以上逻辑
语言文化
如果需要支持特殊的文本内容，就需要设置特别的语言文化，默认使用 IetfLanguageTag 即可
XmlLanguage defaultXmlLanguage =
XmlLanguage.GetLanguage(CultureInfo.CurrentUICulture.IetfLanguageTag);
DPI
在新的 GlyphRun 的构造里面要求传入 DPI 的值用于清晰化显示，在旧版本的，如 .NET Framework 4.5 版本是不需要的
官方推荐的获取 DPI 的方法是根据当前文本将要渲染出来的控件获取控件的 DPI 的值，通过此方法可以支持多屏幕不同 DPI 的感知。本文提供的方法是获取主窗口，因为本文的例子是在主窗口绘制文本
var pixelsPerDip = (float) VisualTreeHelper.GetDpi(Application.Current.MainWindow).PixelsPerDip;
绘制文本
在准备完成之后，即可创建 GlyphRun 用来绘制
var glyphRun = new GlyphRun
(
glyphTypeface,
bidiLevel: 0,
isSideways: false,
renderingEmSize: fontSize,
pixelsPerDip: pixelsPerDip, // 只有在高版本的 .NET 才有此参数
glyphIndices: glyphIndices,
baselineOrigin: location, // 设置文本的偏移量
advanceWidths: advanceWidths, // 设置每个字符的字宽，也就是字号
glyphOffsets: null, // 设置每个字符的偏移量，可以为空
characters: text.ToCharArray(),
deviceFontName: null,
clusterMap: null,
caretStops: null,
language: defaultXmlLanguage
);
drawingContext.DrawGlyphRun(Brushes.White, glyphRun);
请将 Brushes.White 替换为字体前景色的画刷
以上即可完成文本的绘制，这是一个底层的方式，看起来也很简单
创建成本
创建一个 GlyphRun 对象的成本有多高？是否需要申请很多资源？其实创建时仅仅只是创建了一个 CLR 对象而已，里面也只有很多的字段，成本非常低。在创建时不会用到任何非托管的资源，只是一个对象而已
只有在被绘制的时候，才会申请 DirectWrite 的相关资源
获取几何对象
通过 BuildGeometry 方法可以从 GlyphRun 对象创建几何对象，如下面代码
var geometry = glyphRun.BuildGeometry();
获取几何对象可以用此几何对象做特殊的逻辑，如文字描边等
需要小心的是调用 BuildGeometry 方法是有一定成本的，底层将需要从文本渲染为 Geometry 对象，中间需要经过 MIL 层。建议是能复用就复用，而不要每次都创建
但是在复用时，需要了解的是，不同的字号，创建出来的 Geometry 对象，不一定是相同的，这是为了清晰化显示的考虑。如字体比较小的时候，将会删减一些笔画等
获取文本的渲染尺寸
可以通过如下代码获取文本的渲染尺寸，也可以通过如下方法获取单个字符的渲染尺寸
var computeInkBoundingBox = glyphRun.ComputeInkBoundingBox();
var matrix = new Matrix();
matrix.Translate(location.X, location.Y);
computeInkBoundingBox.Transform(matrix);
//相对于run.BuildGeometry().Bounds方法，run.ComputeInkBoundingBox()会多出一个厚度为1的框框，所以要减去
if (computeInkBoundingBox.Width >= 2 && computeInkBoundingBox.Height >= 2)
{
computeInkBoundingBox.Inflate(-1, -1);
}
以上的 computeInkBoundingBox 就是文本的绘制的尺寸，相对的坐标是文本的左上角，因此需要通过 location 叠加变换才能让此矩形和文本渲染重叠
drawingContext.DrawRectangle(Brushes.Blue, null, computeInkBoundingBox);
文本的渲染尺寸也就是文本的字墨尺寸，此概念是文本排版概念
获取文本的文字布局尺寸
可以通过以上代码的 width 获取文本的字面的布局宽度，而布局高度则需要根据 BaseLine 等属性获取，代码如下
/// <summary>
/// 获取<see cref="GlyphRun"/>的Size
/// </summary>
/// <param name="run"></param>
/// <param name="lineSpacing"></param>
/// <returns></returns>
public static Size GetSize(this GlyphRun run, double lineSpacing)
{
var renderingEmSize = run.FontRenderingEmSize;
var height = lineSpacing * renderingEmSize;
double width = 0;
foreach (var index in run.GlyphIndices)
{
width += run.GlyphTypeface.AdvanceWidths[index];
}
width = width * renderingEmSize;
return new Size(width, height);
}
调用方法是 var glyphSize = glyphRun.GetSize(fontFamily.LineSpacing); 即可拿到文字的布局尺寸
字体回滚策略
字体的回滚策略可以比较佛系，毕竟是找不到字体了，此时就是从已安装的字体找到一个还能用的字体代替上去
在 WPF 源代码里面，可以看到底层的 Fallback 字体是 #GLOBAL USER INTERFACE 这个特殊的字体，为了保持和 TextBlock 差不多的逻辑，可以使用如下方法作为字体回滚
/// <summary>
/// 用于回滚的字体对象<see cref="FontFamily"/>
/// </summary>
public class FallBackFontFamily
{
private const string FallBackFontFamilyName = "#GLOBAL USER INTERFACE";
private FontFamily FallBack { get; } = new FontFamily(FallBackFontFamilyName);
private FallBackFontFamily(CultureInfo culture)
{
FontFamilyItems = FallBack.FamilyMaps
.Where(map => map.Language == null || map.Language.MatchCulture(culture))
.Select(map => new FontFamilyMapItem(map)).ToList();
}
private IEnumerable<FontFamilyMapItem> FontFamilyItems { get; }
/// <summary>
/// 获取<see cref="FallBackFontFamily"/>对象的单例
/// </summary>
public static FallBackFontFamily Instance => FallBackFontFamilyLazy.Value;
private static readonly Lazy<FallBackFontFamily> FallBackFontFamilyLazy =
new Lazy<FallBackFontFamily>(() => new FallBackFontFamily(CultureInfo.CurrentCulture));
/// <summary>
/// 尝试获取fallback的字体名称
/// </summary>
/// <param name="unicodeChar"></param>
/// <param name="familyName"></param>
/// <returns></returns>
public bool TryGetFallBackFontFamily(char unicodeChar, out string familyName)
{
var mapItem = FontFamilyItems.FirstOrDefault(item => item.InRange(unicodeChar));
familyName = null;
if (mapItem !=null)
{
familyName = mapItem.Target;
return true;
}
return false;
}
}
以上字体也就是 FontFamily.FontFamilyGlobalUI 属性的值，请看以下的 WPF 框架源代码
internal const string GlobalUI = "#GLOBAL USER INTERFACE";
internal static FontFamily FontFamilyGlobalUI = new FontFamily(GlobalUI);
默认在 WPF 的 Typeface 创建就包含了此逻辑，请看 Typeface 的源代码
public Typeface(
FontFamily fontFamily,
FontStyle style,
FontWeight weight,
FontStretch stretch
)
: this(
fontFamily,
style,
weight,
stretch,
FontFamily.FontFamilyGlobalUI
)
{}
因此以上的回滚代码的意义其实不大，不过可以通过以上代码添加自己期望的字体回滚列表，如自己在应用程序里面带了特殊的字体，期望在找不到字体的时候使用自己的字体，就可以使用上面提供的回滚策略代码，使用方法如下
if (typeface.TryGetGlyphTypeface(out var glyph))
{
// 忽略代码
}
else if (FallBackFontFamily.Instance.TryGetFallBackFontFamily(unicodeChar, out var familyName))
{
// 上面代码的 unicodeChar 就是传入的文本的字符
// 通过上面代码可以拿到回滚的字体是否包含此字符的定义
}
else
{
// 没有可以支持此字符的字体，那就看业务逻辑的处理啦
}
代码
例子
可以通过如下方式获取本文的源代码，先创建一个空文件夹，接着使用命令行 cd 命令进入此空文件夹，在命令行里面输入以下代码，即可获取到本文的代码
git init
git remote add origin https://gitee.com/lindexi/lindexi_gd.git
git pull origin 581ea123df0d1067ec1ed3527e8b85edb2fd082e
以上使用的是 gitee 的源，如果 gitee 不能访问，请替换为 github 的源
git remote remove origin
git remote add origin https://github.com/lindexi/lindexi_gd.git
获取代码之后，进入 NiwejabainelFehargaye 文件夹
轻文本
实现一个和 TextBox 差很多的单行轻文本最简代码如下
class Foo : UIElement
{
public string Text { set; get; } = string.Empty;
protected override void OnRender(DrawingContext drawingContext)
{
var fontFamily = new FontFamily("微软雅黑");
var fontSize = 15;
var y = 0;
drawingContext.PushOpacity(0.3);
foreach (var typeface in fontFamily.GetTypefaces().Skip(1).Take(1))
{
double offset = 3;
var baseLine = fontFamily.GetBaseline(fontSize);
if (typeface.TryGetGlyphTypeface(out var glyphTypeface))
{
foreach (var c in Text)
{
if (glyphTypeface.CharacterToGlyphMap.TryGetValue(c, out var glyphIndex))
{
// 在排版，不适合将每个字符的宽度独立进行计算。有很多字符是需要重叠布局的
var width = glyphTypeface.AdvanceWidths[glyphIndex] * fontSize;
width = GlyphExtension.RefineValue(width);
#pragma warning disable 618 // 忽略调用废弃构造函数
var glyphRun = new GlyphRun(
#pragma warning restore 618
glyphTypeface,
0,
false,
fontSize,
new[] { glyphIndex },
new Point(offset, baseLine + y),
new[] { width },
DefaultGlyphOffsetArray,
new char[] { c },
null,
null,
null, DefaultXmlLanguage);
drawingContext.DrawLine(new Pen(Brushes.Black, 2), new Point(offset, y), new Point(offset + width, y));
drawingContext.DrawGlyphRun(Brushes.Coral, glyphRun);
var glyphSize = glyphRun.GetSize(fontFamily.LineSpacing);
drawingContext.DrawRectangle(null, new Pen(Brushes.Black, 2), new Rect(new Point(offset, y), glyphSize));
// 布局的字符宽度
offset += width;
}
}
}
y += fontSize;
}
drawingContext.Pop();
}
private static readonly Point[] DefaultGlyphOffsetArray = new Point[] { new Point() };
private static readonly XmlLanguage DefaultXmlLanguage =
XmlLanguage.GetLanguage(CultureInfo.CurrentUICulture.IetfLanguageTag);
}
以上代码只是单个字符进行绘制，用于了解每个字符对应的布局值，也就是如上的 DrawRectangle 绘制的内容
上面代码的 GetBaseline 等都是辅助方法，可以从本文上面找到代码，也可以通过如下方式获取代码
先创建一个空文件夹，接着使用命令行 cd 命令进入此空文件夹，在命令行里面输入以下代码，即可获取到本文的代码
git init
git remote add origin https://gitee.com/lindexi/lindexi_gd.git
git pull origin fe704afdd32edb05005b1f35bcc87dc59c900040
以上使用的是 gitee 的源，如果 gitee 不能访问，请替换为 github 的源
git remote remove origin
git remote add origin https://github.com/lindexi/lindexi_gd.git
获取代码之后，进入 NiwejabainelFehargaye 文件夹