Кластеризация элементов в форме

Я видел это решение, которое, по-видимому, заботится о кластеризации элементов в "согласованной" форме без перекрытий, но что, если форма была более неясной, например:

введите описание изображения здесь

Мои первые штрихи на этом, похоже, указывают на упрощение формы до самой базовой формы, а затем выполнение проверок, если элемент находится в пределах фактических координат фигуры, но это похоже на многочисленные потенциальные вычисления, которые я надеялся упростить, Любые мысли были бы чрезвычайно оценены. Спасибо!

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 в элемент холста, а затем запуск кода через нечто подобное.

Ответы

Ответ 1

Попробуйте создать ascii-представление изображения, css white-space установить в pre, .html(), String.prototype.replace() с помощью RegExp, чтобы соответствовать любому символу в строке, возвращать элемент в качестве замены для совпадающего символа в строке ввода html

$(function() {
  $("div").html(function(index, html) {
    return html.replace(/g/g, function(match) {
      return "<span>" + match + "</span>"
    })
  })
})
div {
  font: 8px/4px monospace; 
  text-align: center;
  white-space:pre;
}

span {
  background-color:dodgerblue;
  color: navy;
  text-shadow: 0.75em 0.75em gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
                                                                                     
                                                                             
                                                                                     
                                                                             gggg                                                     
                                                                          ggggggggg                                                   
                                                                         gggggggggggg                                                 
                                                                       ggggggggggggggg                                                
                                                                      ggggggggggggggggg                                               
                                                                      ggggggggggggggggg                                               
                                                                     ggggggggggggggggggg                                              
                                                                    gggggggggggggggggggg                                              
                                                                   gggggggggggggggggggggg                                             
                                                                  ggggggggggggggggggggggg                                             
                                                                 gggggggggggggggggggggggg                                             
                                                                gggggggggggggggggggggggggg                                            
                                                              gggggggggggggggggggggggggggg                                            
                                        gggggggggggggggggggggggggggggggggggggggggggggggggg                                            
                                      gggggggggggggggggggggggggggggggggggggggggggggggggggg                                            
                                     gggggggggggggggggggggggggggggggggggggggggggggggggggggg                                           
                                     gggggggggggggggggggggggggggggggggggggggggggggggggggggg                                           
                                    ggggggggggggggggggggggggggggggggggggggggggggggggggggggg             ggg                           
                                    ggggggggggggggggggggggggggggggggggggggggggggggggggggggg          ggggggggg                        
                                   gggggggggggggggggggggggggggggggggggggggggggggggggggggggg        ggggggggggggg                      
                                   gggggggggggggggggggggggggggggggggggggggggggggggggggggggg     gggggggggggggggggg                    
                                   gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                   
                                   gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                   
                                   ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                  
                                   ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                  
                                   ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                  
                                    gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                  
                                    gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                  
                                     ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                  
                                      gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                  
                                      gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                  
                                       ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                  
                                       gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                   
                                        ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                   
                                        gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                    
                                        ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                     
                                        gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                      
                                        ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                       
                                        gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                        
                                        gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                          
                                       gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                           
                                      ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                             
                                     ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                
                                    gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                  
                                  ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                     
                                 gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                       
                                ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                         
                               gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                           
                              gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                            
                             gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                             
                            ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                             
                           gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                             
                          ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                             
                          ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                             
                         ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                            
                        gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                            
                        ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                           
                       ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                          
                      gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                        
                      ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                       
                     ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                      
                     gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                     
                    gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                    
                    gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                    
                    gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                    
                    gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                    
                    gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                    
                    ggggggggggggggggggggggggggggggggggg       gggggggggggggggggggggggggggggggggggg                                    
                    ggggggggggggggggggggggggggggggggg          ggggggggggggggggggggggggggggggggggg                                    
                    gggggggggggggggggggggggggggggggg            ggggggggggggggggggggggggggggggggg                                     
                    gggggggggggggggggggggggggggggg               gggggggggggggggggggggggggggggggg                                     
                    ggggggggggggggggggggggggggggg                 gggggggggggggggggggggggggggggg                                      
                     ggggggggggggggggggggggggggg                  gggggggggggggggggggggggggggggg                                      
                     gggggggggggggggggggggggggg                    gggggggggggggggggggggggggggg                                       
                      ggggggggggggggggggggggggg                    gggggggggggggggggggggggggggg                                       
                      gggggggggggggggggggggggg                      gggggggggggggggggggggggggg                                        
                       gggggggggggggggggggggg                        gggggggggggggggggggggggg                                         
                        gggggggggggggggggggg                         ggggggggggggggggggggggg                                          
                         gggggggggggggggggg                           ggggggggggggggggggggg                                           
                          gggggggggggggggg                             ggggggggggggggggggg                                            
                            ggggggggggggg                              gggggggggggggggggg                                             
                              ggggggggg                                  ggggggggggggggg                                              
                                                                          gggggggggggg                                                
                                                                            gggggggg                                                  
                                                                                                                                      
                                                                                                                                      
                                                                                                                                      
                                                                                                                                                                                                         
</div>