Javascript 计算移动长方体以删除交点的距离

我有两个重叠的盒子，我想知道如何移动其中一个来移除交叉点

我定义了一个从一个盒子的中心到另一个盒子的向量，并沿着这条线移动一个盒子，但这可能比它需要移动的距离更远，或者可能不够远。所以我想我需要做的是计算出固定盒子线的哪个角离中心线最近，然后计算出这个角沿着这条线有多远（或者可能超出这条线）。然后我可以将向量乘以那个数量，但我的头绕不过去

这是我目前所拥有的，我正在向列表中添加带有

x

、

y

、

宽度

和

高度

属性的项，并且在添加每个项时，我正在检查与列表中已有项的交点。如果找到交叉点，我将尝试移动新项目，然后重试：

function BoxList() {
    var self = this;
    var boxes = [];

    self.add = function(item, iteration) {
        // check intersections with existing boxes
        iteration = iteration || 0;
        if (iteration < 5) {
            for (var i=0; i < boxes.length; i++) {
                if (doesIntersect(getBounds(item),getBounds(boxes[i]))) {
                    item.elem.addClass("overlapped");
                    // Find vector from mid point of one box to the other
                    var centerA = { x: item.x + item.width / 2, y: item.y + item.height / 2 };
                    var centerB = { x: boxes[i].x + boxes[i].width / 2, y: boxes[i].y + boxes[i].height / 2 };
                    var line = { x1 : centerA.x, y1 : centerA.y, x2 : centerB.x, y2 : centerB.y };
                    var vector = { x : line.x1 - line.x2, y: line.y1 - line.y2 };
                    item.x = item.x + vector.x;
                    item.y = item.y + vector.y;
                    item.elem.offset({ left: item.x , top: item.y });       // TODO: calculate size of move needed
                    return self.add(item, iteration + 1);
                }
            }
        }
        boxes.push(item);
    }

    function getBounds(item) {
        return { x1: item.x, x2: item.x + item.width, y1: item.y, y2: item.y + item.height };
    }

    function doesIntersect(a,b) {
        return a.x1 < b.x2 && a.x2 > b.x1 && a.y1 < b.y2 && a.y2 > b.y1;
    }
}

函数BoxList（）{
var self=这个；
变量框=[]；
self.add=函数（项，迭代）{
//检查与现有框的交点
迭代=迭代| | 0；
if（迭代<5）{
对于（变量i=0；ib.x1&&a.y1b.y1；
}
}

这里有一个简单的例子

单击“移动”尝试排列这两个框，请注意，重叠框移动了两次，并且移动的距离超出了实际需要的距离

---

有什么想法吗？关于更好的方法的建议也非常感谢。

正如我现在读到的，你计算两个盒子的中心，并用这两个点形成推动其中一个盒子的向量。这是错误的向量。如果将这些框放在彼此的正上方，则向量将为

（0,0）

。如果长方体仅相互剪裁，则向量将处于其可能的最高值

你可以在鬼魂身上看到这一点。首先它只被推了一点点，然后被推了很多

相反，您需要的向量应该基于重叠的大小。如果重叠是20px乘以30px，则向量是

（+20，+30）

vector.x

是边界框的右上角减去边界框的左下角。Idem用于

vector.y

这会将长方体移动正确的量：

---

我添加了第三个框对，需要2次迭代，可能顶部框应该向另一个方向移动。我设置的向量总是

（+，+）

，你可以计算中心点来确定每个方向应该有哪个符号。

你的小提琴只是指向小提琴主页的链接。@AdmiralAdama:哇，粘贴链接之前忘了保存。现在已修复。很公平，但问题是如何计算重叠的大小。

var vector = {
    x: Math.min(box1.x + box2.width, box2.x + box2.width) - Math.max(box1.x, box2.x),
    y: Math.min(box1.y + box2.height, box2.y + box2.height) - Math.max(box1.y, box2.y)
}