0

我正在尝试在 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>
4

1 回答 1

0

我为您创建了一个JSFiddle，以使用您现有的代码显示一个基本的起点，并让您在需要时进行尝试。我添加了一个<input>元素，允许您指定要绘制的矩形的数量。但是，我留给你改变你的doit方法来实际绘制更多的矩形。

至于确定较大矩形以填充所有较小矩形的空间的几何问题，请参阅此 SO question。

您可能还想考虑使用canvas来绘制矩形而不是div元素，因为绘制大量矩形并将输出和输入矩形分开会更容易。可以在这里找到一个不错的基本教程。

于 2012-05-04T15:38:54.893 回答