2017-05-09 4 views
2

Ich habe eine Klasse, die grundsätzlich ein 16x30 Raster zeichnet.Positionstext bei x, y im Raster

Idealerweise würde Ich mag der Lage sein, auszuführen:

OSD.setCursor(x y);

OSD.print('Text');

und haben es die Wortposition Text an Position x, y mit jedem Zeichen des Text an der richtigen Stelle positioniert das Gitter.

Hier ist, was ich bisher:

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

+1

ich genau wie diese Frage hatte. Lass mich dir die Antwort geben, mit der ich gearbeitet habe. – CodeMonkey

+0

@Inuka Danke dafür! – fuzz

+0

@fuzz, wenn Sie den Cursor auf eine beliebige Zahl setzen, sollte es in Text rechts ändern? –

Antwort

1

Nun scheint dies vielleicht nicht die ideale Lösung suchen, in diesem Fall bitte ich um Entschuldigung. Meine Anforderung war, ein gekacheltes Gitter basierend auf einem Bild zu erstellen, so wie ich es geschafft habe.

  • Die Gesamtzahl der Kacheln kann je nach Bedarf variieren. (Mein Fall 2500 Fliesen)
  • Wenn Sie die Bildgröße anpassen, die bestimmen wird, welche Größe der Kachel sein kann.

(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>

+1

Mmm, da drinnen ist viel los. Vielen Dank für die Bereitstellung dieses Beispiels. Leider bin ich auf der Suche nach einer Funktion, um den Text entsprechend zu positionieren, wo auch immer der Cursor steht: X, Y. Ich denke, ich könnte dies für seine Event-Funktionen in der Zukunft verwenden, aber was ich wirklich will, ist Positionierung und den Text zeichnen. – fuzz

+0

Haben Sie die Lösung dafür gefunden? – CodeMonkey

+0

Leider habe ich nicht. – fuzz