在 WPF 中转换时文本模糊 [英] Text is blurred when transformed in WPF

问题描述

我正在使用 DrawingContext.DrawText 和 DrawingContext.PushTransfrom 在 WPF 中的可视层上创建旋转文本，但如下图所示，旋转文本是图像的某些区域相当模糊..

I'm using DrawingContext.DrawText and DrawingContext.PushTransfrom to create rotated text on Visual Layer in WPF but as you see in the image below, the rotated text is rather blurry in some areas of the image..

我可以使用任何选项来改善这一点吗?Arial 字体用于文本.

Is there any option I can use to improve this? The Arial font is used for the text.

public class BeamTextDrawing : FrameworkElement
{
    private readonly VisualCollection _visuals;
    public BeamTextDrawing(double scale)
    {
        if (scale <= 0)
        {
            scale = 1;
        }
        var typeface = Settings.BeamTextTypeface;
        var cultureinfo = Settings.CultureInfo;
        var flowdirection = Settings.FlowDirection;
        var textsize = Settings.BeamTextSize / scale;
        var beamtextcolor = Settings.InPlanBeamTextColor;

        _visuals = new VisualCollection(this);

        foreach (var beam in Building.BeamsInTheElevation)
        {
            var drawingVisual = new DrawingVisual();
            using (var dc = drawingVisual.RenderOpen())
            {
                var text = Convert.ToString(beam.Section.Id);
                //text = scale.ToString();
                var ft = new FormattedText(text, cultureinfo, flowdirection,
                                            typeface, textsize, beamtextcolor)
                {
                    TextAlignment = TextAlignment.Center
                };

                var x1 = beam.ConnectivityLine.I.X;
                var y1 = beam.ConnectivityLine.I.Y;
                var x2 = beam.ConnectivityLine.J.X;
                var y2 = beam.ConnectivityLine.J.Y;

                var v1 = new Point(x2, y2) - new Point(x1, y1);
                var v2 = new Vector(1, 0);

                var hwidth = textsize;
                var l = Geometrics.GetOffset(x1, y1, x2, y2, hwidth + 5/scale);

                var angle = Vector.AngleBetween(v1, v2);
                var x = 0.5 * (l.X1 + l.X2);
                var y = 0.5 * (l.Y1 + l.Y2);

                var r = new RotateTransform(angle, x, SelectableModel.FlipYAxis(y));
                dc.PushTransform(r);
                dc.DrawText(ft, SelectableModel.FlipYAxis(x, y));
            }
            _visuals.Add(drawingVisual);
        }
    }

    protected override Visual GetVisualChild(int index)
    {
        return _visuals[index];
    }

    protected override int VisualChildrenCount
    {
        get
        {
            return _visuals.Count;
        }
    }
}

更新:

这是使用此代码后的图像:

Here is the image after using this code:

TextOptions.SetTextFormattingMode(this, TextFormattingMode.Display);

我仍然得到模糊的结果.看看图片下方中间的横梁文字.

I'm still getting blurry results. Look at the middle beam text at the lower part of the image.

推荐答案

查看这篇文章 - WPF 应用程序中的像素捕捉

由于 WPF 使用与设备无关的像素，因此在进行转换时可能会由于抗锯齿而创建不规则的边缘渲染.像素对齐是一种抑制这些视觉伪影的方法，它通过对视觉几何体应用小偏移来将几何体与设备像素对齐.

Since WPF uses device independent pixels it can create irregular edge rendering due to anti-aliasing when it undergoes transformation. Pixel snapping is a means to suppress these visual artifacts by applying small offsets to the geometry of the visual to align the geometry to device pixels.

将 UI 元素的 SnapsToDevicePixels 属性设置为True"应该可以解决您的问题.

Setting the SnapsToDevicePixels Property to "True" for your UI elements should be able to fix your issue.

这篇关于在 WPF 中转换时文本模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！