旋轉矩形需要

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。