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

时间:2017-05-10 07:35:22

标签: wpf drawing antialiasing

我使用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); 

呈现图片

blured image

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

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

2 个答案:

答案 0 :(得分: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);
        }
    }

答案 1 :(得分:0)

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

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


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

    property.SetValue(visual, TextRenderingMode.Aliased);