Scaling a rotated rectangle in a given direction

Question

I'm facing an issue when trying to scale a rotated rectangle in a given direction.

In my context, the width and height of the rectangle are based on the texture size multiplied by a scale factor (one for X-horizontal and another for Y-vertical).

Basically, if a texture width is 100 and the scale-X factor is "2" the calculated width is 200, which is the double. The same goes for the height.

Right now, if I want to scale the rectangle to the left, I'm applying a scale value and at the same time I'm modifying the X position to compensate the increased scale factor (to keep the right side of the rectangle in the same position).

If there is no rotation applied, this method works nicely, but things complicate when I rotate the rectangle (in the following example 45º):

From what I'm understanding, this time I have to compensate the Y position as well because of the slope BUT I can't figure out the correct relation to apply an acceptable value.

Any ideas? Thanks!

Answer 1

If dragging the handle is restricted in alignment with the resulting change, then you just have to move the center half of the way the square handle moved.

edit: added a picture

Answer 2

I would recommend constructing an axis aligned bounding box (AABB) around the rotated shape and checking the difference between before the shape was scaled, and then after. The delta between the previous left and the new left offset will tell you exactly how much you need to offset to compensate. This can also be applied to the top offset in the same way. Hope this helps.

Answer 3

Naturally, right after posting this I've reminded myself of a way to solve this issue using the following parametric equations to calculate the correct compensation for each axis when the rectangle is rotated:

var x = difX * Math.cos(direction);
var y = difY * Math.sin(direction);

Another problem appeared if the rotation was between 180º and 360º, as the mouse X and Y offsets should have an inverted value. For this case I've simply inverted the X and Y whenever the normalized rotation value was between those values:

 var normDirection = direction % MathHelper.PI2;
 if (Math.abs(normDirection) > MathHelper.PIo2 && Math.abs(normDirection) < MathHelper.PI + MathHelper.PIo2) {
    difX *= -1;
    difY *= -1;
 }

Also, to calculate the correct direction of the selected point which is to be dragged/positioned, I added the result of a arctangent calculation which gives the correct direction based on the mouse offset direction vector:

direction += Math.atan2(difY, difX);

Currently I'm only having some difficulties in the corner cases (top left for instance) which for some reason are getting a different slope value compared to the mouse movement vector (currently investigating the reason and will update this answer when I have some good news).

In any case, if someone has a better understanding of the problem, I'm open to more suggestions! Thanks..