[Math] Correct the position of a rectangle after scaling it.

geometry

I have 2 rectangles that can scale in size. They both scale from there own center point. The blue rect can be positioned any where on the canvas.

enter image description here

After upscaling I get something like this.

enter image description here

However I want the blue rectangle to respect its original position relative to the red rectangle. So my question is what formula can I use to correct the blue rectangle position. The Image below reflects the corrected position.

enter image description here

The following values are given. The position(X), width(A) and height(B) of the red rectangle. The position(Y), width(C) and height(D) of the red rectangle.

Best Answer

Let $x$ and $y$ denote the centers of $X$ and $Y$, respectively. The vector connecting them can be computed as $$ v = y-x. $$ If $s$ is the scaling factor, to achieve what you need you just need to modify the center of $Y$, namely replacing $y$ with the new center $$ a + s\cdot v = (a_1, a_2) + (s\cdot v_1,\; s\cdot v_2). $$ See the pictures below for the geometric intuition.

Original After scaling After the fix