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の質問を参照してください。

canvasまた、要素の代わりにを使用して長方形を描画するdivことを検討することもできます。これは、より多くの長方形を描画し、出力と入力の長方形を分離する方がはるかに簡単だからです。すばらしい基本的なチュートリアルがここにあります。

于 2012-05-04T15:38:54.893 に答える