2015-11-24 4 views
12

Я видел this solution который, кажется, заботиться о кластеризации элементов в «последовательной» форме без наложений, но что, если форма была более неясными, как в следующем:Кластеризация элементы в форме

enter image description here

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


JS Fiddle для справки:

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); 
}); 

Edit

This example имеет случайную кластеризацию в пределах определенной формы, но поскольку контекст этой формы не является квадратом, мне нужно выполнить некоторое тестирование при первом преобразовании объекта SVG в элемент canvas и затем запустить код через нечто подобное.

+0

Возможно, вместо двух массивов (* по одному для каждой оси *) вы могли бы использовать пары координат, которые вы могли бы сначала фильтровать для тех, которые вписываются в формы, и от тех, которые вы можете произвольно выбрать, что хотите. Это будет линейный подход, который не нужно повторно выбирать, пока что-то не попадет внутрь. –

+0

Спасибо за ответ - любой шанс, что вы видели это в дикой природе? Попытка собрать вдохновение для возможных путей этого может быть достигнута. – Zach

+0

На самом деле это отличный вопрос. Является ли бокс вокруг формы опцией? –

ответ

6

Попробуйте создать ASCii представление изображения, csswhite-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>

+0

jsfiddle https://jsfiddle.net/vybzz4cg/ – guest271314

+0

Ничего себе, удивительный ответ и действительно оцените код примера! Это определенно создает границы для области, но (одна часть, которую я могу добавить к моему первоначальному вопросу) заключается в том, что не всегда может быть достаточно элементов для заполнения области. Конечно, на правильном пути. Я собираюсь начать играть с этим и посмотреть, где он меня достает. Благодаря! – Zach

Смежные вопросы