How do I rotate something around the center?

[ghost]

Hi.

I want to be able to draw text and rotate it around the center, rather than around the origin.

What I am currently doing:

• I am creating a new image based on the max height and width of the text area.
• Then I draw the text into that image (automatically scaling the font size down, until it fits into the new image)
• Then I am rotating that new text image
• Then I am adding the new rotated text image to my main image.

// Setup
var baseImage = new Image<Rgba32>(1000, 1000);
var textLayerX = 100;
var textLayerY = 100;
var boundariesWidth = 800;
var boundariesHeight = 100;

// Create new image for text
var textLayer = new Image<Rgba32>(boundariesWidth, boundariesHeight);

// Draw text on layer
textLayer.Mutate(ctx => ctx
  .DrawTextWithinBoundariesLayer(
    font,
    text.CleanedText,
    Color.ParseHex(text.Colour),
    new TextGraphicsOptions()
    {
      GraphicsOptions = new GraphicsOptions
      {
        Antialias = true
      },
      TextOptions = new TextOptions
      {
        WrapTextWidth = boundariesWidth,
        HorizontalAlignment = TextHelper.MapHorizontalAlignment(text.Align.Horizontal),
        VerticalAlignment = TextHelper.MapVerticalAlignment(text.Align.Vertical)
      }
}));

// Rotate the text layer
textLayer.Mutate(ctx => ctx.Rotate(text.Rotate.Value));

// Add rotated text layer to base image
// I assume this is where I somehow have to translate the rotated layer so that the seems like the text has been rotated around the center rather than origin?
frame.Mutate(ctx =>
  ctx.DrawImage(textLayer, new Point(text.Boundaries.TopLeft.X, text.Boundaries.TopLeft.Y), new GraphicsOptions()));

Is anyone able to help me with this, so I get the desired behavior?

What I want to achieve is the below:

-45 degrees:

161 degrees:

What I am getting when using the Rotate function is the below (which is not what I want):

0 degrees:

-10 degrees:

-45 degrees:

-90 degrees:

-180 degrees:

[antonfirsov]

@nikolaimaximilian the .Rotate(...) extension does not work with an axis other than the image's origin Edit: no longer sure about this, see discussion. I recommend to use AffineTransformBuilder and the .Transform extension to chain the following transformations for your overlay image:

1. Translate it to the origin
2. Rotate
3. Translate it back

AffineTransformBuilder bld = new AffineTransformBuilder();
Vector2 origin = new Vector2(textLayer.Width, textLayer.Height) / 2;
bld.AppendTranslation(-origin );
bld.AppendRotationDegrees(degrees);
bld.AppendTranslation(origin);

textLayer.Mutate(c => c.Transform(bld));

---

@JimBobSquarePants I think there is space for API improvement. At least we could introduce an enum RotateAxis { TopLeft, Center } to be consumed by RotateProcessor.

[antonfirsov]

There is no big difference between those approaches really. Although:

If we added the enum Center would have to be the default.

This would be breaking change.

An alternative approach could be to allow passing Vector2?

This is a bit more ceremonial for the rotate around center case.

We can actually do both with something like:

+ enum num RotateAxis { TopLeft, Center, Custom }

public class RotateProcessor {
+    public RotateAxis Axis { get; }
+    public PointF? CustomOrigin { get; }
}

[JimBobSquarePants]

Rotation around the center is the current behaviour (both in the extension and the builder) so that wouldn’t be breaking.

[JimBobSquarePants]

I think the confusion is stemming from the draw position used by @nikolaimaximilian ?

[antonfirsov]

Ah ok, from the screenshots I assumed we .Rotate() rotates around the corner. If it's not the case I think I fail to understand the problem here.

[tocsoft]

its rotating around the center of the image not the center of the text

[ghost]

Thank you all for the quick replies and help!! I am going to try using the AffineTransformBuilder tomorrow and let you know how I go! Thank you very much - love the support here!!

[antonfirsov]

Make sure to use the right center point though. I wasnt able to follow you regarding that.

[ghost]

So I am getting closer now, but still not 100% there... Probably me just missing something or not using the correct center?

This is what I am doing now

The text without rotation is drawn in the specified X/Y from the text object:

                frame.Mutate(ctx =>
                    ctx.DrawImage(textLayer, new Point(text.Boundaries.TopLeft.X, text.Boundaries.TopLeft.Y), new GraphicsOptions()));

The rotated text is now using the AffineTransformBuilder, but I am struggling to draw it at the right point so that it rotates around the center point of the original (non rotated) text. If you look at the image below (which is what I am getting), you can see that the rotated text still needs to move further up (and probably left a little bit too).

                var affineTransformBuilder = new AffineTransformBuilder();
                var originVector = new Vector2(textLayer.Width, textLayer.Height) / 2;
                affineTransformBuilder.AppendTranslation(-originVector);
                affineTransformBuilder.AppendRotationDegrees(text.Rotate.Value);
                affineTransformBuilder.AppendTranslation(originVector);

                textLayer.Mutate(c => c.Transform(affineTransformBuilder));

                var rotatedTextLayerCenterVector = new Vector2(textLayer.Width, textLayer.Height) / 2;

                // center point coordinates of original text layer
                var originalTextLayerCenterPoint = new PointF
                {
                    X = text.Boundaries.TopLeft.X + originVector.X,
                    Y = text.Boundaries.TopLeft.Y + originVector.Y
                };

                // center point coordinates of rotated text layer
                var rotatedTextLayerCenterPoint = new PointF
                {
                    X = text.Boundaries.TopLeft.X + rotatedTextLayerCenterVector.X,
                    Y = text.Boundaries.TopLeft.Y + rotatedTextLayerCenterVector.Y
                };

                // create transformation vector to 'recenter' rotated text
                var moveVector = new Vector2
                {
                    X = originalTextLayerCenterPoint.X - rotatedTextLayerCenterPoint.X,
                    Y = originalTextLayerCenterPoint.Y - rotatedTextLayerCenterPoint.Y
                };

                var newX = text.Boundaries.TopLeft.X + (int) moveVector.X;
                var newY = text.Boundaries.TopLeft.Y + (int)moveVector.Y;

                frame.Mutate(ctx =>
                    ctx.DrawImage(textLayer, new Point(newX, newY), new GraphicsOptions()));

This is what I am getting now

[ghost]

Another example.. If I rotate the text layer by -90 degrees, I have to move the rotated layer by -160 (x-axis) and -240 (y-axis) to get the desired results..

frame.Mutate(ctx => ctx.DrawImage(textLayer, new Point(newX - 160, newY - 240), new GraphicsOptions()));

[ghost]

Here another example of me manually moving the rotated text layer so that it is (approx) in the right place.

                // Temp adjustments:
                switch (text.Rotate.Value)
                {
                    case -45:
                        textLayerOriginPoint.X = newX - 40;
                        textLayerOriginPoint.Y = newY - 160;
                        break;
                    case -90:
                        textLayerOriginPoint.X = newX - 160;
                        textLayerOriginPoint.Y = newY - 240;
                        break;
                    default: break;
                }

[ghost]

The solution was very simple in the end, and something I tried doing form the start (but I must have missed or miscalculated something then)...

Anyways, the below works perfectly fine.

• I am calculating the center point of the original text layer
• Rotating the text layer
• Calculating the center point of the rotated text layer
• Using two center points to calculate vector that is then used to offset where to draw (origin) of the text layer.

             var centerPointTranslationVector = new Vector2();

            if (text.Rotate.HasValue)
            {
                var originalLayerCenterPoint = new Point
                {
                    X = text.Boundaries.TopLeft.X + textLayer.Width / 2,
                    Y = text.Boundaries.TopLeft.Y + textLayer.Height / 2
                };

                textLayer.Mutate(ctx => ctx.Rotate(text.Rotate.Value));

                var rotatedLayerCenterPoint = new Point
                {
                    X = text.Boundaries.TopLeft.X + textLayer.Width / 2,
                    Y = text.Boundaries.TopLeft.Y + textLayer.Height / 2
                };

                centerPointTranslationVector = new Vector2
                {
                    X = rotatedLayerCenterPoint.X - originalLayerCenterPoint.X,
                    Y = rotatedLayerCenterPoint.Y - originalLayerCenterPoint.Y
                };
            }

            frame.Mutate(ctx =>
                ctx.DrawImage(textLayer, new Point(text.Boundaries.TopLeft.X - (int)centerPointTranslationVector.X, text.Boundaries.TopLeft.Y - (int)centerPointTranslationVector.Y), new GraphicsOptions()));

Outcome is exactly what I was after.. Text that rotates around the center.