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

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

如您所见，我只是将正方形的边设置为容器宽度和高度之间最小值的一半。这仅在容器本身是方形的情况下才有效。

对于任何容器大小，我想要的是尽可能多地扩大正方形，而不会到达对 Angular 线的另一侧并保持平方比例。

有什么想法吗？

Answer 1

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

$("#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);
    }
})