Move and resize inner rectangle shapes as parent rectangle resizes

user_10281906 0
Viewed 208

I have a scenario where a rectangle is drawn inside another rectangle. Initial scenario of rectangles

Now the user is dragging, for example purposes, let's take the RIGHT border of the larger rectangle. I want to at the same time resize the inner rectangle as well, but it turns out it is not as trivial task as I thought so. In the image bellow is the expected result but if you look closely not only the rectangle expanded but it also moved for a certain distance to the right!

this is the expected result

Now I tried and tried to find a formula how much to move the inner shape before expanding it to the right but continuously failed... Just scaling the inner rectangle is not a good solution because if there is another rectangle inside next to it, the first one will go over the second one if they do not move for a certain distance like bellow: two continuous inner shapes

two continuous inner shapes resized

The question is valid only for one-sided drag and expand, not for all sides scale by keeping aspect ratio... Any input is appreciated.

rectangles math geometry javascript
1 Answers

You can scale both the coordinates and lengths, e.g. if you scale the width of the outer rectangle by 2, you can multiply the lengths and x-coordinates of the two inner rectangles by 2.

user_175698630
Related