Изменить размер нескольких объектов с JS с учетом поворота

Question

Я работаю над визуальным редактором с объектами и пользовательскими взаимодействиями, такими как перемещение, изменение размера, вращение и т. Д. c ...

У меня есть функции изменения размера и поворота. Теперь я реализовал функцию множественного выбора, когда пользователь выбирает несколько объектов и изменяет размеры объектов, сохраняя исходную пропорцию.

Эта функция работает очень хорошо, но не для повернутых объектов. Я создал упрощенный пример codepen . В основном вопрос заключается в том, как настроить resize() функцию, чтобы она работала хорошо для повернутых объектов. Чтобы воспроизвести проблему, просто нажмите «Повернуть», а затем «Увеличить ширину и высоту» один или несколько раз.

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

Answer 1

Я не уверен, является ли это правильным решением для вашей проблемы, но вы можете отменить поворот перед изменением размера и сбросить вращение после этого. Вот так.

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 здесь