How do you rotate text on an image?

[replaysMike]

I've tried a few different things but I must be missing something. Trying to simply rotate some text then place it on an existing image, but there are 2 problems.

1. It's rendering the glyph's funny (example image shows in red the text is cut off)
2. The Y axis appears to be X axis and inverted - am I missing a translation? This gets odd when it's at different angles as things move in an arc.

Here I'm trying to rotate text 90 degrees, and translate it to X=0, Y=475 to place the text.

var drawingOptions = new DrawingOptions
{
    TextOptions = new TextOptions
    {
        ApplyKerning = true,
        DpiX = Dpi,
        DpiY = Dpi,
    },
    Transform = Matrix3x2Extensions.CreateRotationDegrees(90, new PointF(0, 0))
};
image.Mutate(c => c.DrawText(drawingOptions, "LM368", font, Color.Red, new PointF(10, -475)));

What am I missing here?

EDIT: made it easier to demonstrate

[antonfirsov]

Regarding the rotation cutoff: you are likely are facing #175. We want to fix it for the next release, but it's dragging quite long, since we are focused on the main library now. Any community help would very much appreciated, and speed up the fix. Any chance you are interested?

Regarding (2): looks like the rotation (which is a global transform) is applied after the (+10, -475) translation, I assume this is by design (/cc @tocsoft).

You can create a chain of transformations (rotate then translate) by TransformBuilder instead of using the location parameter in order to have more control over the order of things.

[replaysMike]

thanks for that, I didn't see that issue. I'll take a look at the TransformBuilder to see if I have any more luck. Would love to assist on the issue, I'm not familiar with ImageSharp source yet but I will take a look at see if this is something I could assist with. I suspect the root cause is more complicated than it sounds

[replaysMike]

Switched to using AffineTransformBuilder definitely made the translation make more sense. I still have #175 to deal with, the translation/positioning is better in that the XY is not inverted - but the X axis still seems to be out by 100px as the start position of 0,0 seems to be 1/3 into the image (note I translate X = 320 pixels here, but its at position X = 424px).

var builder = new AffineTransformBuilder()
    .AppendRotationDegrees(90)
    .AppendTranslation(new PointF(320, 0));                 
var drawingOptions = new DrawingOptions
{
    TextOptions = new TextOptions
    {
        ApplyKerning = true,
        DpiX = Dpi,
        DpiY = Dpi,
    },
    Transform = builder.BuildMatrix(image.Bounds())
};
image.Mutate(c => c.DrawText(drawingOptions, "LM368", font, Color.Red, new PointF(0, 0)));

Location (0,0)

Location (320,0)

[replaysMike]

@antonfirsov I've posted a PR that fixes #175 the text rotation clipping PR 191.

I'll see if I can address the odd horizontal shifting when text is rotated, but I bet that one may be harder to find.

[replaysMike]

this was the solution I arrived at in regards to positioning rotated text. It's not ideal (imo) as it requires knowing the bounds of the text being drawn. I found that if you provide coordinates to the DrawText function, it moves the text in the plane of the rotated text and not the plane of the image. I didn't have much luck trying to resolve this in ImageSharp itself, requires much better knowledge of the overall desired design.

var rotationAngleDegrees = 90f;
var lineBounds = TextMeasurer.Measure("LM368", new TextOptions(font));
var rotationAngleRadians = (float)(rotationAngleDegrees * (System.Math.PI / 180));
var drawingOptions = new DrawingOptions
{
    Transform = Matrix3x2.CreateRotation(rotationAngleRadians)
        * Matrix3x2.CreateTranslation(lineBounds.Height * (rotationAngleDegrees / 90f), 0)
        * Matrix3x2.CreateTranslation(10, -475) // move the rotated text to desired co-ordinates
};
image.Mutate(c => c.DrawText(drawingOptions, "LM368", font, Color.Red, new PointF(0, 0)));

[replaysMike]

As per discission with @JimBobSquarePants , here is the correct transform for rotation that was discussed in issue #192 :

TextOptions textOptions = new(font);
FontRectangle bounds = TextMeasurer.Measure(text, textOptions);
AffineTransformBuilder builder = new AffineTransformBuilder()
    .AppendRotationDegrees(rotationAngle)
    .AppendTranslation(new PointF(100, 50));;

// We should probably add an extension to FontRectangle to make the conversion to Rectangle easier.
Matrix3x2 transform = builder.BuildMatrix(Rectangle.Round(new RectangleF(bounds.X, bounds.Y, bounds.Width, bounds.Height)));
var drawingOptions = new DrawingOptions
{
    Transform = transform
};
image.Mutate(c => c.DrawText(drawingOptions, text, font, Brushes.Solid(Color.Red), new PointF(0, 0)));