旋转矩形需要

Question

我想要实现在JavaScript函数，将做到以下几点：

允许用户指定（3-30）输入矩形的数目。 生成请求数量的输入矩形（具有随机的宽度和高度）并将它们写入文件（可读的文件）。 从上述步骤中生成的文件中读取随机生成的输入矩形。 以图形方式显示输入矩形，正确布置，如示例中所示。 计算输出矩形。 以图形方式显示输出矩形，如上例所示正确布局。注意：输入和输出矩形必须同时显示。 将输出矩形坐标写入输出文件（可读的）。

输入： 在同一基线上从左至右彼此相邻放置的一组随机矩形。 输出： 输出表示与输入矩形所描述的相同面积和结果形状的垂直堆叠矩形的最小数量。

下面是我站在这里的时刻，我找到了这段代码的一部分，但现在我被困住了，无法让它与所有这些实现一起工作，我如何将输入值从3增加到30 ？结果如何同时显示输入和输出？

任何提示是真正的赞赏。

<script> 
function doit() { 
drawRectangle(100, 150, 200, 100); 
myrect = document.getElementById("newdiv"); 
myrect.innerHTML= myrect.innerHTML + "<h1>howto</h1>"; 
} 

function drawRectangle(left, top, width, height) { 
if (document.createElement) { 
    newdiv=document.createElement("div"); 
    newdiv.style.position="absolute"; 
    newdiv.style.left = left+"px"; 
    newdiv.style.top = top+"px"; 
    newdiv.style.width = width+"px"; 
    newdiv.style.height = height+"px"; 
    newdiv.style.backgroundColor = 'red'; 
    newdiv.style.visibility = 'visible'; 
    newdiv.id = 'newdiv'; 
    newdiv.innerHTML = "real"; 
    document.body.appendChild(newdiv); 
    } 
} 
</script> 

Answer 1

我创建了一个JSFiddle为你使用现有的代码显示一个基本出发点和供你在，如果你想玩耍。我添加了一个<input>元素以允许您指定要绘制的矩形的数量。但是，我将它留给你来改变你的doit方法来实际绘制更多的矩形。

至于几何问题，确定较大的直肠填充所有较小的直肠的空间，请参阅this SO question。

您可能还想考虑使用canvas绘制矩形而不是div元素，因为绘制大量元素并分离输出和输入矩形会更容易。一个很好的基本教程可以是发现here。