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。

需要在javascript实现中旋转矩形

1 个答案: