Blurry Transformed Text in WPF

Question

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..

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

enter image description here

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;
        }
    }
}

Update:

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.

enter image description here

Could you may show some code? – Florian Apr 08 '14 at 20:35 — Florian, Apr 08 '14 at 20:35
@thefiloe I updated the question with code. – Vahid Apr 08 '14 at 20:37 — Vahid, Apr 08 '14 at 20:37

score 5 · Answer 1 · answered Apr 08 '14 at 20:40

5

You can change the TextFormattingMode to prevent blurry text:

public BeamTextDrawing(double scale)
{
    TextOptions.SetTextFormattingMode(this, TextFormattingMode.Display);
    // .. Your other code

answered Apr 08 '14 at 20:40

Reed Copsey

554,122
78
1,158
1,373

Thanks Reed, I applied this and updated the question with the resulting image. I'm still getting blurry texts. Maybe I'm missing something very obvious here? – Vahid Apr 08 '14 at 21:28
@Vahid you could also try `TextOptions.SetTextRenderingMode(this, TextRenderingMode.Aliased);`. Does that help? – Reed Copsey Apr 08 '14 at 21:41
I've tried all of these but the result is surprisingly the same. Drawing the geometry of the text `dc.DrawGeometry(Brushes.Lime, new Pen(), ft.BuildGeometry(SelectableModel.FlipYAxis(x,y)));` solves the problem but it is very very expensive. – Vahid Apr 08 '14 at 21:47

Blurry Transformed Text in WPF

1 Answers1