Coordinates of point on rotated rectangle after stretching

Question

I am using a top-down coordinate system.

I have rectangle R with point (a) at top-left, point (b) top-middle and point (c) at the centre:

a-b-|
| c |  R
|---|

I stretch up from point (b), increasing height of R by dh. I calculate new height of R simply: newh = oldh + dh I calculate new coordinates of point (0) simply: newy = oldy - dh; newx = oldx

I now have same rectange R which is first rotated by theta degrees clockwise from north around centre (c). I stretch up from point (b), increasing real height of R by dh. I calculate new height of R simply: newh = oldh + dh How do I calculate new coordinates of point (a)? Remember that rotation was around the central point.

this is HTML5 canvas (Javascript). I've just got complete brain freeze having not done trigonometry for about 10 years :s — user3096484
In that case, post the code you're working with so we can help. — brandonscript
I've managed to answer my own question but I'm sure my code code be far better and more efficient. Unfortunately i can't post it here yet as I'm a new user and there's a time threshold but will post it here tomorrow. thanks r3mus. — user3096484
For now you can edit your own question and add in the details ;) — brandonscript

user3096484 user3096484 · Accepted Answer · 2013-12-13T09:05:43

Ok so I seem to have working code but I'm sure there's a lot of improvement I could do to it still to make it more efficient etc. I also have to work on the other 7 resize handles now too (this is just the top-middle one):

var RADIANS = Math.PI/180;

var rotated_coords = {x: coords.x, y: coords.y};
if (shape.rotate) {
  var rads = -shape.rotate*RADIANS;
  var middle = {x: shape.x + shape.w/2, y: shape.y + shape.h/2}; //
middle of rotation
  var offset = {
    x: middle.x - coords.x,
    y: middle.y - coords.y
  };
  rotated_coords.x = middle.x - (offset.x * Math.cos(rads) - offset.y
* Math.sin(rads));
  rotated_coords.y = middle.y - (offset.x * Math.sin(rads) + offset.y
* Math.cos(rads));
}

// 1. get centre before resize
var middle = {
  x: shape.x + shape.w/2,
  y: shape.y + shape.h/2
};
// 2. get bottom-middle of rotated shape
var bottom_middle = {
  x: middle.x - shape.h/2 * sin_th,
  y: middle.y + shape.h/2 * cos_th
};
// 3. resize (get difference in height, dh) from bottom-middle point
var dh = shape.y - rotated_coords.y;
// 4. get new centre point
var new_middle = {
  x: bottom_middle.x + (shape.h + dh) / 2 * sin_th,
  y: bottom_middle.y - (shape.h + dh) / 2 * cos_th
};
// 5. return to non-rotated top-left point
shape.x = new_middle.x - shape.w / 2;
shape.y = new_middle.y - (shape.h + dh) / 2;
// 6. set our new height
shape.h += dh;

Coordinates of point on rotated rectangle after stretching

1 Answers