The rotation of the rectangle relative to the rotated rectangle using C#

Question

I have two rectangle:

first parent rotated -15 degrees relative to the center of the canvas

next children rotated -15 degrees relative to the center of the canvas and rotated 5 degrees relative to the center of parent.

Taking the original image:

Made the described modifications in the image editor:

It is necessary to repeat these operations with rectangles, here is my code:

var parentAngle = -15;
var childrenAngle = 5;

var parent = new Rectangle(new Point(50, 160), new Size(200, 300));
var children = new Rectangle(new Point(25, 175), new Size(50, 50));

// load transformed file to as canvas
var bmp = Image.FromFile(@"D:\Temp\transform.png");

var size = bmp.Size;

var canvasCenter = new PointF(size.Width / 2, size.Height / 2);
var parentCenter = new PointF(parent.Location.X + parent.Width / 2, parent.Location.Y + parent.Height / 2);
var parentLocation = parent.Location;

var parentVertices = parent.GetVertices();
var childrenVertices = children.GetVertices();

// rotate by canvas center
var rotateMatrix = new Matrix();
rotateMatrix.RotateAt(parentAngle, canvasCenter);
rotateMatrix.TransformPoints(parentVertices);

// rotate children vertices
var rotateMatrix2 = new Matrix();
rotateMatrix2.RotateAt(childrenAngle, parentCenter);
rotateMatrix2.TransformPoints(childrenVertices);

 // translate vertices
var translateMatrix = new Matrix();
translateMatrix.Translate(parentLocation.X, parentLocation.Y);
translateMatrix.TransformPoints(childrenVertices);

// rotate by canvas center
rotateMatrix.TransformPoints(childrenVertices);


using (Graphics g = Graphics.FromImage(bmp))
{
    g.DrawPolygon(Pens.Green, parentVertices);
    g.DrawPolygon(Pens.Blue, childrenVertices);
}

Result:

I was mistaken somewhere and parent matches but children don't match. Maybe everything breaks down at the calculate parent offset?

Update: The GetVertices function is implemented as a helper and looks like this:

    public static PointF[] GetVertices(this Rectangle rect)
    {
        return new[] {
            rect.Location,
            new PointF(rect.Right, rect.Top),
            new PointF(rect.Right, rect.Bottom),
            new PointF(rect.Left, rect.Bottom)
        };
    }

Answer 1

I found a few problems:

First - paint.net rotate selected layer relative to the center of the canvas. Therefore, nothing came together and had to redraw the test case

Next - I had to redo the calculation of transferring the location of the child to the top. Now it looks like this:

var parentAngle = -15;
var childrenAngle = 5;

var parent = new Rectangle(new Point(50, 160), new Size(200, 300));
var children = new Rectangle(new Point(25, 175), new Size(50, 50));

// load transformed file to as canvas
var bmp = Image.FromFile(@"D:\Temp\rotate_5.png");

var size = bmp.Size;

var canvasCenter = new PointF(size.Width / 2, size.Height / 2);
var parentLocation = parent.Location;
var parentCenter = new PointF(parentLocation.X + parent.Width / 2, parentLocation.Y + parent.Height / 2);
var childrenLocation = children.Location;

// translate location children by parent location
children.Location = childrenLocation = new Point(parentLocation.X + childrenLocation.X, childrenLocation.Y + parentLocation.Y);
var childrenCenter = new PointF(childrenLocation.X + children.Width / 2, childrenLocation.Y + children.Height / 2);

var parentVertices = parent.GetVertices();
var childrenVertices = children.GetVertices();

//rotate by canvas center
var rotateChildrenMatrix = new Matrix();
rotateChildrenMatrix.RotateAt(childrenAngle, parentCenter);
rotateChildrenMatrix.TransformPoints(childrenVertices);

// rotate by canvas center
var rotateMatrix = new Matrix();
rotateMatrix.RotateAt(parentAngle, canvasCenter);

rotateMatrix.TransformPoints(parentVertices);
rotateMatrix.TransformPoints(childrenVertices);

using (Graphics g = Graphics.FromImage(bmp))
{
    g.DrawPolygon(Pens.Green, parentVertices);
    g.DrawPolygon(Pens.Blue, childrenVertices);
}

Result: