仮想の森のようなものを作りたいと思っています。
私は持っている：
- 木を広げたい固定サイズのdiv
- 乱数の木 (各木は PNG)
- 中央に小さな正方形の div があり、木を避ける必要があります
次のように木を広げるにはどうすればよいですか。
- 重なり合わない
- 中央のdivに入らない
- すべてのツリーが div に収まるようにサイズ (css) を計算します
ありがとう
要求された詳細情報:
- すべての木の画像は同じ寸法です
- コンテナ div のサイズは 500x300 ピクセルに固定されています
- 小さな中央の div のサイズは 30x30 ピクセルに固定されています
- PNG のネイティブ解像度は 60x60 ピクセルです
次の php スクリプトを作成しましたが、空の場所を処理したり、画像を div に正確に合わせたりすることはできません。
$forest1 = null;
for ($a=1; $a < 201; $a++) {
// width * height (500*280)
$total_area_in_pixels = 140000;
$total_elements = 200;
$area_per_object = $total_area_in_pixels / $total_elements;
$element_height = round (sqrt($area_per_object) / 100 * 70);
$random_margin = rand(0, $element_height / 5);
$tree_type = rand(1,4);
$style = "height: {$element_height}px; margin: {$random_margin}px;";
$forest1 .= "<img src='images/trees/tree{$tree_type}.png' alt='{$a}' title='tree' style='{$style}'>\n";
}