在形状内聚类元素

Question

我见过this solution似乎在没有重叠的情况下处理“一致”形状中的聚类元素，但如果形状更加模糊，如下所示：

我的第一对夫妇似乎指向将形状简化为最基本的形式，然后检查元素是否在实际形状坐标内，但这似乎是我希望简化的大量潜在计算。任何想法都会非常感激。谢谢！

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

修改

This example在定义的形状中有随机聚类，但由于该形状的上下文不是正方形，我需要先进行一些测试，然后再将SVG对象转换为canvas元素然后运行代码通过类似的东西。

Answer 1

尝试创建图像的ascii表示，css white-space设置为pre，.html()，String.prototype.replace()和RegExp以匹配任何字符string，return元素作为输入字符串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>