在没有触摸的情况下在随机位置绘制图像

Question

我认为图片会比文字更好的例子

当我使用随机数时，我得到的结果不正确

但我想得到这个结果：

我发现了这样的事情：

$(document).ready(function() {
    var containerW = 700;
    var containerH = 600;
    var positions = [];
    $('.picture').each(function() {
        var coords = {
            w: $(this).outerWidth(true),
            h: $(this).outerHeight(true)
        };
        var success = false;
        while (!success)
        {
            coords.x = parseInt(Math.random() * (containerW-coords.w));
            coords.y = parseInt(Math.random() * (containerH-coords.h));
            var success = true;
            $.each(positions, function(){
                if (
                    coords.x <= (this.x + this.w) &&
                    (coords.x + coords.w) >= this.x &&
                    coords.y <= (this.y + this.h) &&
                    (coords.y + coords.h) >= this.y
                )
                {
                    success = false;
                }
            });
        }
        positions.push(coords);
        $(this).css({
            top: coords.y + 'px',
            left: coords.x + 'px'
        });
    });
});

我该如何改善这个？

Answer 1

更简单，更快速的方法是使用网格约束，其中每个单元格比形状稍大。然后在每个单个单元格中随机放置一个形状。

这里唯一的限制是形状被绑定到某个结构，因为形状永远不会移动到环绕区域。

网格解决方案的示例

＆＃13;

＆＃13;

var ctx = c.getContext("2d"),
    cellsX = 10,
    cellsY = 5,
    cellW = c.width / cellsX,
    cellH = c.height / cellsY,
    padding = 2,           // minimum space between each shape
    shapeMaxW = cellW>>1,  // these shape sizes are just arbitrary
    shapeMaxH = cellH>>1;

function render() {
  c.width = c.width;
  for(var i = 0; i < cellsX * cellsY; i++) {
    var x = ((cellW - padding) - shapeMaxW) * Math.random() +  (i % cellsX)    * cellW;
    var y = ((cellH - padding) - shapeMaxH) * Math.random() + ((i / cellsX)|0) * cellH;
    ctx.fillRect(x, y, shapeMaxW, shapeMaxH);
  }
}

setInterval(render, 200); // demo loop

＆＃13;

<canvas id=c width=600 height=200></canvas>

＆＃13;

＆＃13;

＆＃13;