CODEWITHSUNDEEP
rotationtrigonometry
user3096484
user3096484

Reputation: 193

Coordinates of point on rotated rectangle after stretching

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.

Upvotes: 0

Views: 414

Answers (1)

user3096484
user3096484

Reputation: 193

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;

Upvotes: 0

Related Questions