Я видел это решение, которое, по-видимому, заботится о кластеризации элементов в "согласованной" форме без перекрытий, но что, если форма была более неясной, например:
Мои первые штрихи на этом, похоже, указывают на упрощение формы до самой базовой формы, а затем выполнение проверок, если элемент находится в пределах фактических координат фигуры, но это похоже на многочисленные потенциальные вычисления, которые я надеялся упростить, Любые мысли были бы чрезвычайно оценены. Спасибо!
JS Скрипт для справки:
var tilesize = 18, tilecount = 15;
var gRows = Math.floor($(".container").innerWidth()/tilesize);
var gCols = Math.floor($('.container').innerHeight()/tilesize);
var vals = _.shuffle(_.range(tilecount));
var xpos = _.shuffle(_.range(gRows));
var ypos = _.shuffle(_.range(gCols));
_.each(vals, function(d,i){
var $newdiv = $('<div/>').addClass("tile");
$newdiv.css({
'position':'absolute',
'left':(xpos[i] * tilesize)+'px',
'top':(ypos[i] * tilesize)+'px'
}).appendTo( '.container' ).html(d);
});
Изменить
Этот пример имеет случайную кластеризацию в определенной форме, но поскольку контекст этой формы не является квадратом, мне нужно сначала провести тестирование преобразование объекта SVG в элемент холста, а затем запуск кода через нечто подобное.
