Context: I am building a design tool.
Video of the problem: https://share.getcloudapp.com/z8uYpKv2
I have a rectangle that can be resized proportionally (scaled) as you can see in the video. Inside the rectangle, I have child rectangles that need to adjust based on the parent rectangle.
Here is how I am calculating the changes as the box moves for the width, height, and x coordinates. I am having trouble with the y-axis.
Let's start the box dimensions at 100×100 with a child box at 50×50, then it scales down to 50×50 (0.5). The child then becomes 25×25.
Calculations
width = 50 / 100 * 25 (new width / original width * original box width)
height = 50 / 100 * 25 (new height / original height * original box height)
x = 0 – (-50) (original x – delta x)
y = ??
Here is what I am trying to achieve https://share.getcloudapp.com/Z4uyeWbO. You can see the parent square is being scaled down, and the child is moving in accordance with the parent. The width is shrinking at scale, the height is shrinking at scale, also the X position is moving from a delta. The hard part to solve is the Y position, it appears to be moving along the hypotenuse. This is what I am trying to solve for — I am not sure how to put this in math terms.
Here is what I have tried.
y = 50 / 100 / √2 * 50 (new height / original height / square root(2) * original y)
Sorry if the way I communicated this is weird, I am not very math-oriented and excited to learn here, so I appreciate your understanding and patience.
Best Answer
This is best performed by using linear transformations on a coordinate system, where the origin is placed at the vertex of the scaling box that does not move. In other words, if you "grab" the vertex in the lower left, the origin will be the vertex that remains stationary--the one in the upper right. You calculate all of the coordinates of the vertices relative to that origin, and then the scaling transformation would be of the form $(x, y) \mapsto (cx, cy)$ for some scaling constant $c$ that depends on the location of the mouse pointer.
For instance, the coordinates of the large box would be in counterclockwise order $(0,0)$, $(-100,0)$, $(-100,-100)$, $(0,-100)$. Let us assume that prior to the scaling the smaller box's coordinates are $$\{(-40,-50), (-90,-50), (-90,-100), (-40,-100)\}.$$
Then if you choose a scaling factor $c$ based on how the corner at $(-100,-100)$ is moved, e.g., $c = 1/2$, the new coordinates of the outer box become $$\{(0,0), (-50,0), (-50,-50), (0,-50)\}.$$ The inner box becomes $$\{(-20, -25), (-45, -25), (-45,-50), (-20,-50)\}.$$ This furnishes a computationally simple way to rescale.
The only remaining part is to figure out how to recalculate the coordinates based on the choice of vertex to move. If you had moved instead the lower right vertex, the origin would need to be located at the upper left, and the outer box would be $$\{(100,0), (0,0), (0,-100), (100,-100)\}$$ with the inner box coordinates modified accordingly. This is not difficult to do; if in general your scaling box has vertices at $$\{(x_1, y_1), (x_2, y_2), (x_3, y_3), (x_4, y_4)\},$$ where there are restrictions on the $x_i$ and $y_i$ such that these points define a rectangular region with sides parallel to the coordinate axes, then a simple translation can remap all the coordinates based on any choice of vertex; e.g., if I wanted to make the point $(x_2, y_2)$ the origin, I simply subtract $(x_2, y_2)$ from all of the vertices in this list: $$\{(x_1 - x_2, y_1 - y_2), (0,0), (x_3-x_2, y_3-y_2), (x_4-x_2, y_4-y_2)\}.$$