考虑旋转，使用 JS 调整多个对象的大小

Posted 2023-02-25

【中文标题】考虑旋转，使用 JS 调整多个对象的大小

【英文标题】：Resize multiple objects with JS considering rotate

【发布时间】：2020-01-06 16:18:53

【问题描述】：

我正在开发具有对象和用户交互的可视化编辑器，例如移动、调整大小、旋转等...

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

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

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

【参考方案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)

代码笔here

【讨论】：

你是男人！它工作得非常完美。我在这个问题上花了几天时间 - 非常感谢！