x，y在网格中的位置文本

Question

我有一个类，它基本上绘制了一个16x30的网格。

理想情况下，我想能够执行：

OSD.setCursor(x y);

OSD.print('Text');

，并让它在x, y位置与定位在正确的位置的Text每个字符的字Text定位网格。

这是我到目前为止有：

class MAX7456 { 
 
    constructor() { 
 
    this.items = null; 
 
    this.divs = null; 
 
    } 
 

 
    begin() { 
 
    var ratioH = 16, 
 
     ratioW = 30; 
 
    
 
    var parent = $('<div />', { 
 
     class: 'grid', 
 
     width: ratioW * 25, 
 
     height: ratioH * 18 
 
    }).addClass('grid').appendTo('body'); 
 

 
    for (var i = 0; i < ratioH; i++) { 
 
     for(var p = 0; p < ratioW; p++) { 
 
      this.divs = $('<div />', { 
 
       width: 25 - 1, 
 
       height: 18 - 1 
 
      }).appendTo(parent); 
 
      
 
      this.items = $('<span />', { 
 
       width: 25 - 1, 
 
       height: 18 - 1, 
 
       style: "padding-left: 2px;" 
 
      }).appendTo(this.divs); 
 
     } 
 
    } 
 
    } 
 

 
    setCursor(x, y) { 
 
    $('div > span:nth-child(2n-1)').text(function (i, txt) { 
 
    \t $(this).append(i) 
 
    \t i++; 
 
    \t //console.log(txt + $(this).next().text()); 
 
    }); 
 
    } 
 
    print (txt) { 
 
    } 
 
} 
 

 
var OSD = new MAX7456(); 
 
OSD.begin(); // create grid 
 
OSD.setCursor(0, 0); // set text at cursor (x, y) 
 
OSD.print("Label 2");

body { 
 
    padding: 0; 
 
    font-size: 12px; 
 
} 
 

 
.grid { 
 
    border: 1px solid #ccc; 
 
    border-width: 1px 0 0 1px; 
 
} 
 

 
.grid div { 
 
    border: 1px solid #ccc; 
 
    border-width: 0 1px 1px 0; 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

JSFiddle

Answer 1

现在这个五月似乎不是理想的解决办法寻找，在这种情况下，我的道歉。我的要求是基于图像创建平铺网格，所以我设法做到这一点。

• 瓷砖总数可以根据您的需要而变化。 （我的情况2500瓷砖）
• 当您调整图像大小，将决定瓷砖的大小。

(function($) { 
 
    var imagePadding = 0; 
 
    var pluginName = "tiles", 
 
    defaults = { 
 
     x: 2, // tiles in x axis 
 
     y: 2, // tiles in y axis 
 
     gap: { 
 
     x: 1, 
 
     y: 1 
 
     } 
 
    }; 
 

 
    function Plugin(elem, options) { 
 

 
    options = $.extend({}, defaults, options); 
 

 
    var $elem = $(elem).wrap("<div class='tiles-wrapper' />"), 
 
     width = $elem.outerWidth(), 
 
     height = $elem.outerHeight(), 
 
     n_tiles = options.x * options.y, 
 
     tiles = []; 
 

 
    $elem.parent(".tiles-wrapper").css({ 
 
     position: "relative", 
 
     width: width, 
 
     height: height 
 
    }); 
 

 
    for (var $i = 0; $i < n_tiles; $i++) { 
 
     if ($i >= imagePadding) { 
 
     tiles.push("<div class='tile' data-id='" + $i + "' data-clipboard-text='" + $i + "'>" + $i + "</div>"); 
 
     } else { 
 
     tiles.push("<div class='tile' data-id='" + $i + "' data-clipboard-text='" + $i + "'></div>"); 
 
     } 
 
    } 
 

 
    var $tiles = $(tiles.join("")); 
 

 
    // Hide original image and insert tiles in DOM 
 
    $elem.hide().after($tiles); 
 

 
    // Set backgrounds 
 
    $tiles.css({ 
 
     float: "left", 
 
     width: (width/options.x) - (options.gap.x || options.gap), 
 
     height: (height/options.y) - (options.gap.y || options.gap), 
 
     marginRight: options.gap.x || options.gap, 
 
     marginBottom: options.gap.y || options.gap, 
 
     backgroundImage: "url(" + $elem[0].src + ")", 
 
     lineHeight: (height/options.y) - (options.gap.y || options.gap) + "px", 
 
     textAlign: "center" 
 
    }); 
 

 
    // Adjust position 
 
    $tiles.each(function() { 
 
     var pos = $(this).position(); 
 
     this.style.backgroundPosition = -pos.left + "px " + -pos.top + "px"; 
 
    }); 
 

 
    } 
 

 
    $.fn[pluginName] = function(options) { 
 
    return this.each(function() { 
 
     new Plugin(this, options); 
 
    }); 
 
    }; 
 

 
}(jQuery)); 
 

 
window.onload = function() { 
 
    $('#img').tiles({ 
 
    x: 21.909, 
 
    y: 21.909 
 
    }); 
 

 
    $(".tile").click(function() { 
 
    console.log($(this).data("id")); 
 
    }); 
 

 
};

.tiles-wrapper { 
 
    z-index: 999; 
 
} 
 

 
.tile:hover { 
 
    opacity: .80; 
 
    filter: alpha(opacity=80); 
 
    background: #fecd1f!important; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<!-- Latest compiled and minified JavaScript --> 
 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-8"> 
 
     <div class="banner-head"></div> 
 
     <div class="row"> 
 
     <div class="col-md-12"> 
 
      <div class="image-holder"> 
 
      <img id="img" src="data:image/gif;base64,R0lGODlh6ANsAwAAACH5BAAAAAAALAAAAADoA2wDhwAAAAAAMwAAZgAAmQAAzAAA/wArAAArMwArZgArmQArzAAr/wBVAABVMwBVZgBVmQBVzABV/wCAAACAMwCAZgCAmQCAzACA/wCqAACqMwCqZgCqmQCqzACq/wDVAADVMwDVZgDVmQDVzADV/wD/AAD/MwD/ZgD/mQD/zAD//zMAADMAMzMAZjMAmTMAzDMA/zMrADMrMzMrZjMrmTMrzDMr/zNVADNVMzNVZjNVmTNVzDNV/zOAADOAMzOAZjOAmTOAzDOA/zOqADOqMzOqZjOqmTOqzDOq/zPVADPVMzPVZjPVmTPVzDPV/zP/ADP/MzP/ZjP/mTP/zDP//2YAAGYAM2YAZmYAmWYAzGYA/2YrAGYrM2YrZmYrmWYrzGYr/2ZVAGZVM2ZVZmZVmWZVzGZV/2aAAGaAM2aAZmaAmWaAzGaA/2aqAGaqM2aqZmaqmWaqzGaq/2bVAGbVM2bVZmbVmWbVzGbV/2b/AGb/M2b/Zmb/mWb/zGb//5kAAJkAM5kAZpkAmZkAzJkA/5krAJkrM5krZpkrmZkrzJkr/5lVAJlVM5lVZplVmZlVzJlV/5mAAJmAM5mAZpmAmZmAzJmA/5mqAJmqM5mqZpmqmZmqzJmq/5nVAJnVM5nVZpnVmZnVzJnV/5n/AJn/M5n/Zpn/mZn/zJn//8wAAMwAM8wAZswAmcwAzMwA/8wrAMwrM8wrZswrmcwrzMwr/8xVAMxVM8xVZsxVmcxVzMxV/8yAAMyAM8yAZsyAmcyAzMyA/8yqAMyqM8yqZsyqmcyqzMyq/8zVAMzVM8zVZszVmczVzMzV/8z/AMz/M8z/Zsz/mcz/zMz///8AAP8AM/8AZv8Amf8AzP8A//8rAP8rM/8rZv8rmf8rzP8r//9VAP9VM/9VZv9Vmf9VzP9V//+AAP+AM/+AZv+Amf+AzP+A//+qAP+qM/+qZv+qmf+qzP+q///VAP/VM//VZv/Vmf/VzP/V////AP//M///Zv//mf//zP///wAAAAAAAAAAAAAAAAiuAPcJHEiwoMGDCBMqXMiwocOHECNKnEixosWLGDNq3Mixo8ePIEOKHEmypMmTKFOqXMmypcuXMGPKnEmzps2bOHPq3Mmzp8+fQIMKHUq0qNGjSJMqXcq0qdOnUKNKnUq1qtWrWLNq3cq1q9evYMOKHUu2rNmzaNOqXcu2rdu3cOPKnUu3rt27ePPq3cu3r9+/gAMLHky4sOHDiBMrXsy4sePHkCNLnky5suXLmDNrSN7MubPnz6BDix5NurTp06hTq17NurXr17Bjy55Nu7bt27hz697Nu7fv38CDCx9OvLjx48iTK1/OvLnz59CjS59Ovbr169izaznfzr279+/gw4sfT768+fPo06tfz769+/fw48ufT7++/fv48+vfz7+///8ABijggAQWaOCBCCao4II0DDbo4IMQRijhhBRWaOGFGGao4YYcdujhhyCGKOKIJJZo4okopqjiiiy26OKLMMYo44w01i1o44045qjjjjz26OOPQAYp5JBEFmnkkUgmqeSSTDbp5JNQRinllFRWaeWVWGYpqeWWXHbp5ZdghinmmGSWaeaZaKap5ppstunmm3DGKeecdNZp55145qkn55589unnn4AGKuighBZq6KGIJqrooow26uijkEYq6aSUVmrppZhmI6rpppx26umnoIYq6qiklmrqqaimquqqrLbq6quwxirrrLTWImrrrbjmquuuvPbq66/ABivssMQWa+yxyCar7LLMNuvss9AfRivttNRWa+212Gar7bbcduvtt+CGK+645JZr7rnoph6r7rrstuvuu/DGK++89NZr77345qvvvvz26++/AAcdLPDABBds8MEIJ6zwwgw37PDDEEcs8cQUV2zxxRgbZ6zxxhx37PHHIIcs8sgkl2zyySinrPLKLLfsG/LLMMcs88w012zzzTjnrPPOPPfs889ABy300BlEF2300UgnrfTSTDft9NNQRy311FRXbfXVGVhnrfXWXHft9ddghy322GSXbfbZaKet9toXbLft9ttwxy333HTXbffdeOet99589+0X99+ABy744IQXbvjhiCeu+OKMN+7445AWRy755JRXbvnlmGeu+eacd+7556CHLhf66KSXbvrpqKeu+uqst+7667DHLvvstBXXbvvtuOeu++689+7778AHL/zwxBcVb/zxyCev/PLMN+/889BHL/301FdvFP312Gev/fbcd+/99+CHL/745JdvFP756Kev/vrst+/++/DHL//89NdvFf/9+Oev//789+///wAMoAAHSMACGhXwgAhMoAIXyMAGOvCBEIygBCdIwQoUWvCCGMygBjfIwQ568IMgDKEIR0gVwhKa8IQoTKEKV8jCFrrwhTCMoQxnE0jDGtrwhjjMoQ53yMMe+vCHQAwVohCHSMQiGvGISEyiEpfIxCY68YlQE4yiFKdIxSpa8YpYzKIWt8jFLnoS8YtgDKMYx0jGMprxjGhMoxrXE8jGNrrxjXCMoxznSMc62vGOeMwSox73yMc++vGPgAykIAdJyEIaE/KQiEykIhfJyEY68pGQjKQkJ0kSyUpa8pKYzKQmN8nJTnryk6AMEaUoR0nKUprylKhMpSpXycpWErrylbCMpSxnScta2vKWuMylLhB3ycte+vKXwAymMIdJzGIaEvOYyEymMpfJzGY685nQjKY0pxFJzWpa85rYzKY2t8nNbnrzmxDgDKc4x0nOcprznOhMpzrXEcnOdrrznfCMpzznSc962vOeEPjMpz73yc9++vOfAA2oQAcPStCCGvSgCE2oQhfK0IY6EfShEI2oRCdK0Ypa9KIYzahGDzfK0Y569KMgDalIR0rSkg+a9KQoTalKV8rSlrr0pTAPjalMZ0rTmtr0pjjNqU53D8rTnvr0p0ANqlCHStSiGg/1qEhNqlKXytSmOvWpUI0PqlSnStWqWvWqWM2qVrfKENWuevWrYA2rWMdK1rKa9awNaE2rWtfK1ra69a1wjQ+rXOdK17ra9a54zate98oO17769a+ADaxgB0vYwhoP9rCITaxiF8vYxjr2sZCNDqxkJ0vZylr2spjNrGY3DsvZznr2s6ANrWhHS9rSDpr2tKhNrWpXy9rWuva1DbCNrWxnS9va2va2uM0OrW53y9ve+va3wA2ucIcOS9ziGve4yE2ucpfL3OYMOve50I2udKdL3epaDve62M2udrfL3e5697vgDg2veMdL3vKa97zoTa96DNfL3va6973wja985wxL3/ra9774za9+98sO3/76978ADrCAB0zgAhsN+MAITrCCF8zgBjv4wQwQjrCEJ0zhClv4whgOzrCGN8zhDnv4wyAOsYgQR0ziEpv4xChOsYpX7JqAAAA7" 
 
       alt="event picture" /> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>