1

我希望创建类似虚拟森林的东西。

我有：

  • 固定大小的 div，我希望在其中散布树木
  • 随机数量的树（每棵树都是 PNG）
  • 中心的小方形 div，应该远离树木

我怎样才能散布树木，使它们：

  • 不会互相重叠
  • 不会进入中央 div
  • 计算它们的大小（css），以便所有树都适合 div

谢谢

根据要求提供更多信息：

  • 所有树图像具有相同的尺寸
  • 容器 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";
}
4

1 回答 1

2

你需要先弄清楚你想如何进行定位。您可以将树绝对基于 div 父级设置为容器，也可以将树绝对基于整个页面定位为容器。

要将父级用作容器，您可以这样做： 将 div 设置为 position: relative。编写 javascript 来创建 IMG 元素，然后将它们的位置设置为“绝对”。确保在创建元素时将它们创建为要包含它们的 DIV 的子元素。

要将页面用作容器，您可以这样做：编写 javascript 来创建 IMG 元素并将它们的位置设置为“绝对”。不要费心让它们成为 DIV 的子元素，因为这无关紧要。使用 jQuery 或基本的 javascript 测试找出容器 div 的确切页面位置。每次放置树时，都需要计算其相对于容器 div 的位置。

定位树基本上是这样的：编写一个简单的算法来生成随机的 x 和 y 坐标对来定位每个元素并这样做。然后对照您不想被覆盖的正方形区域检查每棵树的位置、宽度和高度。如果您在该区域找到一棵树，请将其移动一些以将其移出该区域，或将其删除。请务必记住，如果您绝对定位在整个页面内，您将始终需要添加或减去页面容器位置作为偏移量，以获取页面上您想要的树。

这应该足以让你开始。

于 2012-12-26T08:11:54.230 回答