WPF图片叠加文本POC：如何获取匹配文本框的绘制字体大小

哈哈，这个问题我做WPF图片文本叠加POC的时候踩过一模一样的坑！问题出在ViewBox的缩放机制和你绘制文本时的坐标系不匹配上——你在TextBox里看到的字体大小是经过ViewBox缩放后的显示尺寸，但绘制文本时你是基于原始图片的坐标系，直接用TextBox的FontSize就会导致字体被“缩小”（其实是没做反向缩放）。

下面是具体的解决步骤和代码示例：

1. 计算ViewBox的缩放因子 #

ViewBox会把内部的图片按比例拉伸/缩放到适配自身尺寸，默认是Uniform模式（保持宽高比）。我们需要先算出这个缩放比例，才能把TextBox的显示尺寸转换为原始图片的绘制尺寸：

// 获取你的ViewBox和Image控件
var viewBox = yourViewBoxControl;
var imageControl = yourImageControl;

// 获取图片的原始像素尺寸（比DesiredSize更可靠）
var bitmapSource = imageControl.Source as BitmapSource;
double originalImageWidth = bitmapSource.PixelWidth;
double originalImageHeight = bitmapSource.PixelHeight;

// 计算ViewBox的缩放比例
double scaleX = viewBox.ActualWidth / originalImageWidth;
double scaleY = viewBox.ActualHeight / originalImageHeight;
// Uniform模式下取最小的缩放因子，保持图片比例
double scaleFactor = Math.Min(scaleX, scaleY);

2. 转换TextBox的字体大小到原始坐标系 #

TextBox的FontSize是ViewBox缩放后的显示大小，我们需要除以缩放因子，得到在原始图片上绘制时需要的真实字体大小：

var textInputBox = yourTextBox;
// 转换后的实际绘制字体大小
double actualDrawFontSize = textInputBox.FontSize / scaleFactor;

3. 用转换后的字体大小绘制文本 #

拿到正确的字体大小后，就可以用DrawingContext绘制和TextBox字体样式完全匹配的文本了：

// 基于TextBox的字体属性创建Typeface
var typeface = new Typeface(
    textInputBox.FontFamily,
    textInputBox.FontStyle,
    textInputBox.FontWeight,
    textInputBox.FontStretch);

// 假设你要在图片的(100, 100)位置绘制文本
var drawPoint = new Point(100, 100);

// 绘制文本（这里需要你提前获取图片的Drawing对象，比如用RenderTargetBitmap）
using (var dc = new DrawingContext(yourDrawingObject))
{
    var formattedText = new FormattedText(
        textInputBox.Text,
        CultureInfo.CurrentCulture,
        FlowDirection.LeftToRight,
        typeface,
        actualDrawFontSize,
        Brushes.Black); // 文本颜色可自定义
    
    dc.DrawText(formattedText, drawPoint);
}

额外注意事项 #

• 如果你的ViewBox用的是Fill（拉伸填充）模式，那不需要取Math.Min(scaleX, scaleY)，直接分别用scaleX和scaleY处理X/Y方向的尺寸（不过这种情况图片会变形，一般不推荐用于图片展示）。
• 确保bitmapSource不为null，处理好图片加载完成后的逻辑（比如在Image.Loaded事件里再计算缩放因子，避免图片未加载完成导致的尺寸错误）。

这样绘制出来的文本，在ViewBox里显示的大小就会和你在TextBox里看到的完全一致啦！

内容的提问来源于stack exchange，提问作者Chethana