CODEWITHSUNDEEP
javascriptmathrotationresize
Vytalyi
Vytalyi

Reputation: 1695

Resize multiple objects with JS considering rotate

I'm working on visual editor with objects and user interactions around like move, resize, rotate, etc...

I have resize and rotate functionality in place. Now I have implemented multi-select functionality when user select multiple objects and resize objects keeping the original proportion.

That functionality works very well, however not for rotated objects. I've created a simplified codepen example. Basically the question is - how to adjust resize() function to make sure it works well for rotated objects. To reproduce an issue just click on "Rotate" and then "Increase width & height" once or multiple times.

function resize(incrementX, incrementY, offsetX, offsetY) {
    ...
}

Upvotes: 0

Views: 348

Answers (1)

Fábio Gorodscy
Fábio Gorodscy

Reputation: 91

I'm not sure if this is a valid solution for your problem, but you can undo the rotation before resizing, and reset the rotation afterwards. Like this.

function resize(incrementX, incrementY, offsetX, offsetY) {
  var old_r = objmultiple.r
  rotate(-objmultiple.r)
  var ratioX = (objmultiple.w + incrementX) / objmultiple.w;
  var ratioY = (objmultiple.h + incrementY) / objmultiple.h;

  objmultiple.x += offsetX;
  objmultiple.y += offsetY;
  objmultiple.w = objmultiple.w + incrementX;
  objmultiple.h = objmultiple.h + incrementY;

  [obj1, obj2].forEach(function(obj) {
    obj.x = (obj.x - objmultiple.x + offsetX) * ratioX + objmultiple.x;
    obj.y = (obj.y - objmultiple.y + offsetY) * ratioY + objmultiple.y;
    obj.w *= ratioX;
    obj.h *= ratioY;
  });
  rotate(old_r)
}

Codepen here

Upvotes: 1

Related Questions