Pen and brush not aligned in DrawText

[johantiger]

Hi,

I have a problem when drawing text with both a brush and a pen.

As you can see, the brush and the pen seem to be misaligned and the white brush can be seen outside the black pen, and in some places the background is visible between the white and the black.

I draw text using this code:

FontCollection fontCollection = new();
FontFamily fontFamily = fontCollection.Add(Path.Combine(functionDirectory, "Assets", "Fonts",
    "OpenSans-ExtraBold.ttf"));

Font bibfont = fontFamily.CreateFont(600, FontStyle.Bold);
Font namefont = fontFamily.CreateFont(140, FontStyle.Bold);

RichTextOptions options = new RichTextOptions(bibfont)
{
    VerticalAlignment = VerticalAlignment.Center,
    HorizontalAlignment = HorizontalAlignment.Center,
    TextAlignment = TextAlignment.Center,
    TextDirection = TextDirection.LeftToRight,
    Origin = new Point(1156,1024),
};

image.Mutate(x => x.DrawText(options, "9999", Brushes.Solid(Color.White), Pens.Solid(Color.Black, 25)));

options.Font = namefont;
options.Origin = new Point(1156, 713);
image.Mutate(x => x.DrawText(options, "JOHAN", Brushes.Solid(Color.White), Pens.Solid(Color.Black, 12)));

options.Origin = new Point(1156, 1381);
image.Mutate(x => x.DrawText(options, "TIGERTECH", Brushes.Solid(Color.White), Pens.Solid(Color.Black, 12)));

How can I get these to align correctly? What am I doing wrong?

I'm using OpenSans from Google Fonts, but I've tried with other fonts too.

I'm using Fonts 2.0.2, ImageSharp 3.1.3, Drawing 2.1.2

[tocsoft]

Your doing nothing wrong there, that's totally a bug.

Looking closely it looks like there is a path thickness/2 offset being applied to the path during the outlining stage.

As a work around you might be able to do something like this.

FontCollection fontCollection = new();
FontFamily fontFamily = fontCollection.Add(Path.Combine(functionDirectory, "Assets", "Fonts",
    "OpenSans-ExtraBold.ttf"));

Font bibfont = fontFamily.CreateFont(600, FontStyle.Bold);
Font namefont = fontFamily.CreateFont(140, FontStyle.Bold);

RichTextOptions options = new RichTextOptions(bibfont)
{
    VerticalAlignment = VerticalAlignment.Center,
    HorizontalAlignment = HorizontalAlignment.Center,
    TextAlignment = TextAlignment.Center,
    TextDirection = TextDirection.LeftToRight,
    Origin = new Point(1156,1024),
};

image.Mutate(x => x.DrawText(options, "9999", Brushes.Solid(Color.White)));
var penWidth = 25f;
options.Origin = options.Origin - new Vector2(penWidth / 2f);
image.Mutate(x => x.DrawText(options, "9999", Pens.Solid(Color.Black, penWidth)));

options.Font = namefont;
options.Origin = new Point(1156, 713);
image.Mutate(x => x.DrawText(options, "JOHAN", Brushes.Solid(Color.White)));
penWidth = 12f;
options.Origin = options.Origin - new Vector2(penWidth / 2f);
image.Mutate(x => x.DrawText(options, "JOHAN", Pens.Solid(Color.Black, 12)));

options.Origin = new Point(1156, 1381);
image.Mutate(x => x.DrawText(options, "TIGERTECH", Brushes.Solid(Color.White)));
options.Origin = options.Origin - new Vector2(penWidth / 2f);
image.Mutate(x => x.DrawText(options, "TIGERTECH", Pens.Solid(Color.Black, 12)));

warning I have not run this so you might have to tweak the offsetting for the pen calls.

this will be technically slower but it might be negligible depending on your usage.

Just to be completely transparent this is only a work around for a bug that we needs to be fixed and the original code is the expected way to do this.

[johantiger]

Awesome, thanks! I was thinking of doing something like that but didn't know how to correctly offset the text drawn with only the pen.

This is an acceptable workaround for me at the moment, but I'll post this as a bug as well.

[JimBobSquarePants]

Ah @tocsoft well done!!

This answers #312 also.

[JimBobSquarePants]

@johantiger Please make sure you raise the issue in the correct repository. I transferred this discussion for you.