javascript - 调整容器的大小，两个灰色方块应该尽可能地增长，受对角线约束..简单的方法吗？

Question

这是我所做的：jsFiddle

$("#container").resizable({
    resize: function (event, ui) {
        var w = ui.size.width;
        var h = ui.size.height;
        var l;
        if (w>h) l = h/2;
        else l = w/2
        $("#left").width(l).height(l);
        $("#right").width(l).height(l);
    }
})

如您所见，我只是将正方形的边设置为容器宽度和高度之间的最小值的一半。这仅适用于容器本身是方形的。

我想要的是正方形尽可能地增长，而不会出现在对角线的另一边并保持平方比例，对于任何容器大小。

任何想法？

Answer 1

如果你取穿过正方形对角线的线并搜索与矩形对角线的交点，你会找到正方形必须到达的点。您可以使用该点与原点之间的距离来计算正方形对角线的长度并轻松获得边。

$("#container").resizable({
    resize: function (event, ui) {
        var w = ui.size.width;
        var h = ui.size.height;
        var m = h/w;
        var c = -h;

        var x = c/(-1-m);
        var y = -1*(c/(-1-m));

        var diag = Math.sqrt(Math.pow(x,2) + Math.pow(y,2));
        var l = diag/Math.sqrt(2);
        $("#left").width(l).height(l);
        $("#right").width(l).height(l);
    }
})