Question

我使用WPF将文本渲染到位图。我想关闭抗锯齿，我的意思是我希望像素为白色或黑色。但是文字仍然是模糊的，有些像素甚至是灰色的。

这是我的代码。可能不需要某些行。

RenderTargetBitmap bm = new RenderTargetBitmap(bitmapWidth, bitmapHeight, dpiX, dpiY, PixelFormats.Pbgra32);

DrawingVisual drawing_visual = new DrawingVisual();

RenderOptions.SetEdgeMode(drawing_visual, EdgeMode.Unspecified);            
RenderOptions.SetBitmapScalingMode(drawing_visual, BitmapScalingMode.Linear);

RenderOptions.SetEdgeMode(bm, EdgeMode.Unspecified);
RenderOptions.SetBitmapScalingMode(bm, BitmapScalingMode.Linear);

DrawingContext drawing_context = drawing_visual.RenderOpen();            

FormattedText ft = new FormattedText("my text", CultureInfo.InvariantCulture, System.Windows.FlowDirection.LeftToRight, typeface, fontSize, Brushes.Black);
        drawing_context.DrawText(ft, new Point(0, 0));

drawing_context.Close();
bm.Render(drawing_visual);

呈现图片

要检查解决方案，您可以从GitHub下载源代码：

https://github.com/qub1n/Font-rendering.git

Answer 1

这里重要的概念是TextRenderingMode。这是合乎逻辑的，因为您不需要消除锯齿的文本，您必须将TextRenderingMode设置为Aliased。困难在于把它放在哪里......

我建议你创建一个DrawingImage，就像这样，作为起始对象（用它作为画布源，而不是位图）：

    public static DrawingImage CreateImage(int heightPixel, Typeface typeface, double fontSize, string text)
    {
        var group = new DrawingGroup();
        using (var context = group.Open())
        {
            var ft = new FormattedText(text, CultureInfo.InvariantCulture, FlowDirection.LeftToRight, typeface, fontSize, Brushes.Black, null,
                TextFormattingMode.Display); // this is the important line here!
            context.DrawText(ft, new Point(0, 0));
        }

        return new DrawingImage(group);
    }

请注意设置为TextFormattingMode的重要Display值。如果你不这样做并保持默认值（Ideal），那么你仍然会有抗锯齿。

现在，要在显示器上进行渲染，您必须在Visual元素上使用TextRenderingMode，因此在您的示例中，在canvas元素上：

    <controls:ImageCanvas ... TextOptions.TextRenderingMode="Aliased" ... />

并且为了在位图上渲染，你必须创建一个中间Visual，这里是一个Image对象，所以你可以在其上应用TextRenderingMode：

    public static void SaveToFile(string filePath, DrawingImage drawing)
    {
        var image = new Image { Source = drawing };
        image.Arrange(new Rect(new Size(drawing.Width, drawing.Height)));

        // this is the important line here!
        TextOptions.SetTextRenderingMode(image, TextRenderingMode.Aliased);

        // note if you use a different DPI than the screen (96 here), you still will have anti-aliasing
        // as the system is pretty automatic anyway
        var bitmap = new RenderTargetBitmap((int)drawing.Width, (int)drawing.Height, 96, 96, PixelFormats.Pbgra32);
        bitmap.Render(image);

        using (var fileStream = new FileStream(filePath, FileMode.Create))
        {
            var encoder = new PngBitmapEncoder();
            encoder.Frames.Add(BitmapFrame.Create(bitmap));
            encoder.Save(fileStream);
        }
    }

Answer 2

事实证明，在 TextOptions.SetTextRenderingMode() 上设置 drawinVisual 不起作用。已接受的答案在生成的位图中仍然存在锯齿问题（使用 TextFormattingMode.Display 更好，但仍不能完全消除锯齿）。

对我有用的是在绘图视觉上设置内部属性：


    var visual = new DrawingVisual();
    var property = typeof(Visual).GetProperty("VisualTextRenderingMode", 
                BindingFlags.NonPublic | BindingFlags.Instance);

    property.SetValue(visual, TextRenderingMode.Aliased);

关闭抗锯齿以在WPF中绘制到位图

2 个答案: