2

我需要填充一个固定大小的盒子，它应该填充9 个 随机大小的形状。

由于我有 9 个形状，一个或多个可以在另一个之上，这样做的目的是创建随机效果，就好像这些形状是随机分散的一样。但是话又说回来，不能有任何空白，这是非常重要和最困难的部分。

因此，想象一下我做得更好的事情，并举​​例说明这应该是什么样子

在此处输入图像描述

我还设置了 jsFiddle，你可以在这里查看

我为此工作了好几个小时，无论我怎么想都没有用，所以这只是我正在使用代码做的一个非常基本的例子。

我不是要一个完整的工作代码，但任何关于我应该如何从这一点继续的建议都会有很大帮助。

由于 SO 规则要求提供 jsFiddle 代码，因此它是：

$shape = $('<div class="shape"></div>');
$container = $(".container");

//random shape sizes
shapes = [
    [rand(50, 70), rand(50, 70)],
    [rand(50, 70), rand(50, 70)],
    [rand(60, 70), rand(60, 70)],
    [rand(60, 100), rand(60, 100)],
    [rand(100, 140), rand(100, 140)],
    [rand(100, 140), rand(100, 140)],
    [rand(100, 140), rand(100, 140)],
    [rand(140, 190), rand(140, 190)],
    [rand(150, 210), rand(150, 210)]
];

used = [];
left = 0;
top = 0;

for(i = 1; i <= 3; i++){
    offset = rand(0, 8);

    width = shapes[offset][0];
    height = shapes[offset][1];

    $container.append(
        $shape.css({
            width: width,
            height: height,
            top: top,
            left: left,
            zIndex: i
        })
        .text(i)
        .clone()
    );

    //increase top offset
    top += shapes[offset][1];
}


function rand(from, to){
    return Math.floor((Math.random()*to)+from);
}
4

1 回答 1

6

实际上答案是一个非常困难的答案，我们可以深入研究它，因为您需要某种空间填充算法。

老实说，我对这类事情并没有那么强烈，但我会建议 - 如果你能处理它 - 进入这个主题：

  • 分形填充算法
  • 具有质心松弛的 Voronoi 细胞
  • 二叉树

我试着写下后者的简单实现，二叉树。它通过递归地将空间区域细分为更小的部分来工作。

var square = {x: 0, y: 0, width: 200, height: 200};
var struct = [square];

function binary(struct) {
    var axis = 1;
    function subdivide(index) {
        var item = struct.splice(index, 1)[0];
        if(axis > 0) {
            var aw = item.width / 2;
            var ow = Math.random() * aw;
            ow -= ow / 2;
            var ax = Math.round(item.width / 2 + ow);
            var bx = item.width - ax;
            struct.push({x: item.x, y: item.y, width: ax, height: item.height});
            struct.push({x: item.x + ax, y: item.y, width: bx, height: item.height});
        } else {
            var ah = item.height / 2;
            var oh = Math.random() * ah;
            oh -= oh / 2;
            var ay = Math.round(item.height / 2 + oh);
            var by = item.height - ay;
            struct.push({x: item.x, y: item.y, width: item.width, height: ay});
            struct.push({x: item.x, y: item.y + ay, width: item.width, height: by});
        }

        axis = -axis;
    }

    while(struct.length < 9) {
        var index = Math.round(Math.random() * (struct.length-1));
        subdivide(index);
    }

    return struct;
}

打电话

binary(struct);

为您返回一个细分区域的数组。希望这可以作为一个起点（我也假设你不想运行一个内存繁重的算法只是为了将图像随机放置在一个盒子里，但我可能是错的:)）

于 2013-05-13T16:50:39.280 回答