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

Question

我正在研究可视化编辑器，其中包含对象和用户交互，例如移动，调整大小，旋转等...

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

该功能运行良好，但不适用于旋转对象。我创建了一个简化的代码笔示例。基本上问题是 - 如何调整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)
}

代码笔在这里