Javascript 使用旋转调整多个对象的大小

Javascript 使用旋转调整多个对象的大小,javascript,math,rotation,resize,Javascript,Math,Rotation,Resize,我正在使用可视化编辑器处理对象和用户交互,比如移动、调整大小、旋转等等 我有适当的调整大小和旋转功能。现在,当用户选择多个对象并调整对象的大小以保持原始比例时,我已经实现了多选功能 该功能非常有效,但不适用于旋转的对象。我创建了一个简化的。基本上,问题是-如何调整调整大小功能,以确保它适用于旋转对象。要重现问题,只需单击“旋转”,然后将“宽度和高度”增加一次或多次 function resize(incrementX, incrementY, offsetX, offsetY) { ..

我正在使用可视化编辑器处理对象和用户交互,比如移动、调整大小、旋转等等

我有适当的调整大小和旋转功能。现在,当用户选择多个对象并调整对象的大小以保持原始比例时,我已经实现了多选功能

该功能非常有效,但不适用于旋转的对象。我创建了一个简化的。基本上,问题是-如何调整调整大小功能,以确保它适用于旋转对象。要重现问题,只需单击“旋转”,然后将“宽度和高度”增加一次或多次

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

我不确定这是否是您问题的有效解决方案,但您可以在调整大小之前撤消旋转,然后重置旋转。像这样

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)
}

代码笔

你就是那个人!它工作得很好。我在这个问题上花了几天时间——非常感谢!