在 WPF 中使用 RenderTargetBitmap 创建 TextBlock 的 png 图像时出现问题

Question

当使用 RenderTargetBitmap 创建作为 Canvas 子级的 TextBlock 的 png 文件时，文本将拉伸到 TextBlock 的宽度。 TextBlock 作为“Right”的 TextAlignment。我需要 png 来反映实际渲染的 TextBlock。

下面的示例代码生成文本被截断的图像。我意识到文本上的 set left 和 let top 导致了问题。为什么会发生这种情况以及如何处理？

Canvas innerCanvas = new Canvas();
innerCanvas.Width = 500;
innerCanvas.Height = 500;

TextBlock textBlock1 = new TextBlock
{

    Width = 87,
    FontFamily = new FontFamily("Arial"),
    FontSize = 13.00,
    Foreground = Brushes.Black,
    TextAlignment = TextAlignment.Right,
    Text = "TEXT1"
};

TextBlock textBlock2 = new TextBlock
{
    Width = 87,
    FontFamily = new FontFamily("Arial"),
    FontSize = 13.00,
    Foreground = Brushes.Black,
    TextAlignment = TextAlignment.Left,
    Text = "TEXT2"
};

Canvas.SetLeft(textBlock1, -70);
Canvas.SetTop(textBlock1, 0);

Canvas.SetLeft(textBlock2, 50);
Canvas.SetTop(textBlock2, 0);

innerCanvas.Children.Add(textBlock1);           
innerCanvas.Children.Add(textBlock2);

innerCanvas.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
innerCanvas.Arrange(new Rect(new Point(0, 0), innerCanvas.DesiredSize));

double dpi = 96;
double dpiScale = dpi / 96; // Adjust the dpi scale

foreach (UIElement child in innerCanvas.Children)
{
    if (child is TextBlock textBlock)
    {
        RenderTargetBitmap bmpCopied = new RenderTargetBitmap
        (
            (int)Math.Round(textBlock.ActualWidth * dpiScale),
            (int)Math.Round(textBlock.ActualHeight * dpiScale),
            dpi,
            dpi,
            PixelFormats.Pbgra32
        );

      
        bmpCopied.Render(child);

        var pngEncoder = new PngBitmapEncoder();
        pngEncoder.Frames.Add(BitmapFrame.Create(bmpCopied));

        String imageName = System.IO.Path.Combine(@"C:\temp\Images", textBlock.Text + ".png");

        using (var stream = new FileStream(imageName, FileMode.Create))
        {
            pngEncoder.Save(stream);
        }
    }
}

Answer 1

您面临的问题是由于您为 TextBlock 设置的 Width 和 Left 值造成的。我尝试在 Xaml 中复制您的代码，在这张图中您可以看到出了什么问题。

我猜你的意思是设置 TextBlock 的水平对齐方式，而不是

TextAlignment = TextAlignment.Right,

。在这种情况下，这就是您所需要的：

TextBlock textBlock1 = new TextBlock
 {
     Width = 87,
     FontFamily = new FontFamily("Arial"),
     FontSize = 13.00,
     Foreground = Brushes.Black,
    // TextAlignment = TextAlignment.Right,
     Text = "TEXT2"
 };

 textBlock1.HorizontalAlignment = HorizontalAlignment.Right;

 Canvas.SetLeft(textBlock1, 0);
 Canvas.SetTop(textBlock1, 0);

此外，如果您想给 TextBlock 一些左侧或右侧的边距，则应该考虑元素的对齐方式。
当它向右对齐以便从 Canvas 左边缘添加一些空间时，您可以使用 Canvas.SetLeft 一个正值，当它向右对齐时，您可以设置 Canvas.SetRight 的值。