Rotate without moving.

[Tylertron1998]

Hi all! I have a 410x410 image (lets call it the wheel) that I want to overlay onto another 500x800 image (lets call this the background). I want the wheel to be at 250,250 on the background, and to be able to rotate it freely. The issue is when rotating, it seems the bounding box gets resized - causing what is considered to be the 0, 0 point of the wheel to be moved. Is there any way around this? For example, if I rotate the wheel 45 degrees, the bounding box gets bigger as what would be the top left corner moves to where the 'centre' would be, right at the top - pushing the height of the image up, and the same with the width.

[Tylertron1998]

this is my current workaround; which feels very hacky.

            wheel.Mutate(context =>
            {
                context.Rotate(22.5f);
                var size = context.GetCurrentSize();
                var middleX = size.Width / 2;
                var middleY = size.Height / 2;
                context.Crop(new Rectangle(middleX - 205, middleY - 205, 410, 410));
            });

[JimBobSquarePants]

The issue is when rotating, it seems the bounding box gets resized - causing what is considered to be the 0, 0 point of the wheel to be moved

Well yes, that's maths. Unless you want to clip your input your dimensions will be equal to the hypotenuse of the two sides.

Most rotations want to preserve the original input without clipping so we've built our rotation with that behavior since, as you've demonstrated it's fairly simple to crop the image following a rotation.

[Tylertron1998]

@JimBobSquarePants it's a little difficult to show what my expected result is - because I can't actually generate that; I think the key bit of information I have missed out here, is that the image that is being rotated is a circle with a completely transparent background - which I wouldn't understand why what is basically 'no data' is being considered when transforming (causing the bounding box to be expanded).

Edit to clarify: I can understand why, generally, an image with a "background" would have this issue, but for an image that is, for all intents and purposes, only a circle, and for it to be rotated around the centre yet have its 'center point' moved is a little unintuitive.

[Tylertron1998]

After a little thought, a much easier solution would be the ability to change what is considered 0,0 in an image. Then, I could move 0,0 to the center of the circle, and no matter what rotation is applied, when adding that image atop another image, I will know whatever coordinates I choose, the centre of the circle will always land there.

[Tylertron1998]

After a little more though (sorry for all of the comments here) there is an easier solution.

                        wheel.Mutate(context =>
			{
				context.Rotate(-rotationAmount);
			});

			image.Mutate(context =>
			{
                                // I want the center of the wheel to be at exactly (250, 250)
				context.DrawImage(wheel, new Point(250 - (wheel.Width / 2), 250 - (wheel.Height / 2)), 1f);
			});

this is definitely a workaround - though, wouldn't work for non square images (I think?) so again, being able to change where (0, 0) is on an image would be a great fix for all other cases.

I still don't feel exactly comfortable with calling this the 'best way' of doing it, though.

[JimBobSquarePants]

@Tylertron1998 The bounds have to change to accommodate the dimensions of the rotated element.

Think about it like this... Your circle isn't a circle, it's a square canvas upon which some of the pixel data has been filled in to represent a circle, Surrounding pixels are empty, but represent memory that has to exist to house the circle.

Given a 100x100 pixel circle you have a 100x100 pixel square. If you rotate the square by 45 degrees the height and width of the square become the length of the hypotenuse of the original lengths. Which, when rounded becomes 141px. (I wonder @antonfirsov should we be rounding up here rather than down?)

I'll use a black square to demonstrate. Here's the original.

Now I'll rotate it by 45 degrees. The dimensions of the square itself remain unchanged but the canvas has to expand to accommodate the rotated hypotenuse.

Here's what would happen if we kept the same original dimensions.

I was able to crop the rotated square using the following code. As you can see it's size agnostic and will work for whatever input dimensions.

using (var image = new Image<Rgba32>(100, 100))
{
    Size originalSize = image.Size();
    image.Mutate(
        x =>
        {
            x.BackgroundColor(Color.Black)
             .Rotate(45F);

            Size size = x.GetCurrentSize();
            SizeF halfSize = (size - originalSize) / 2F;
            Point offset = new Point((int)halfSize.Width, (int)halfSize.Height);
            x.Crop(new Rectangle(offset, originalSize));
        });

    image.Save(Path.Combine(outPath, "rotate-crop.png"));
}

In your case you it sounds like you don't want to crop but rather you want to calculate how much to change the top/left origin point to allow drawing in the correct location. Again, that can be calculated for any set of dimensions.

// Set your origin point.
Vector2 origin = new Point(0, 0);

// .. Do rotation

// Now calculate your new origin.
Size size = x.GetCurrentSize();
SizeF halfSize = (size - originalSize) / 2F;
origin -= new Vector2(halfSize.Width, halfSize.Height);
var point = Point.Round(origin);

Does any of this make sense?

[Tylertron1998]

This makes a lot of sense; yep. I guess it was just confusing to me due to the lack of "background" pixels - though, I'd assume, adding a special case for that wouldn't exactly result in clean code and would likely be less intuitive for people who know image manipulation a little more in depth.

Thank you so much for all your help!