2011-06-29 14 views
6

Jak mogę wyrównać tekst w płótnie HTML5 justify "? W poniższym kodzie, tekst może być w lewo/w prawo/w centrum wyrównane. Muszę ustawić align="justify". Proszę sugerują, jak można to zrobić?Jak usprawiedliwić wyrównywanie tekstu w kanwie HTML5?

HTML :

<body onload="callMe()"> 
    <canvas id="MyCanvas"></canvas> 
</body> 

JS:

function callMe() { 
    var canvas = document.getElementById("MyCanvas"); 
    var ctx = canvas.getContext("2d"); 
    var txt = "Welcome to the new hello world example"; 
    cxt.font = "10pt Arial"; 
    cxt.textAlign = "left"; 

    /* code to text wrap*/ 
    cxt.fillText(txt, 10, 20); 
} 
+0

Interesujące pytanie :). Pomogłoby to nieco, gdybyś sformował swoje pytanie nieco bardziej szczegółowo, szczególnie za pomocą kodu;) – Jeroen

Odpowiedz

2

płótno HTML5 za nie obsługuje tekstu wielowierszowego rysunek więc nie ma brak rzeczywistego efektu dla typu wyrównania.

Jeśli chcesz wesprzeć line-kanałów, trzeba ją wspierać siebie, widać poprzedniej dyskusji na temat tutaj: HTML5 Canvas - can I somehow use linefeeds in fillText()?

To jest mój wdrożenie do przenoszenia wyrazów/linia zasila:

function printAtWordWrap(context, text, x, y, lineHeight, fitWidth) { 
     fitWidth = fitWidth || 0; 
     lineHeight = lineHeight || 20; 

     var currentLine = 0; 

     var lines = text.split(/\r\n|\r|\n/); 
     for (var line = 0; line < lines.length; line++) { 


      if (fitWidth <= 0) { 
       context.fillText(lines[line], x, y + (lineHeight * currentLine)); 
      } else { 
       var words = lines[line].split(' '); 
       var idx = 1; 
       while (words.length > 0 && idx <= words.length) { 
        var str = words.slice(0, idx).join(' '); 
        var w = context.measureText(str).width; 
        if (w > fitWidth) { 
         if (idx == 1) { 
          idx = 2; 
         } 
         context.fillText(words.slice(0, idx - 1).join(' '), x, y + (lineHeight * currentLine)); 
         currentLine++; 
         words = words.splice(idx - 1); 
         idx = 1; 
        } 
        else 
        { idx++; } 
       } 
       if (idx > 0) 
        context.fillText(words.join(' '), x, y + (lineHeight * currentLine)); 
      } 
      currentLine++; 
     } 
    } 

tam nie ma wsparcia dla wyrównania lub uzasadnienia, musisz dodać to w

+0

Potrafię przerwać zdanie na podstawie znaku nowej linii i umieścić resztę tekstu w kolejnej linii (np. Wielowierszowej) Mogę to wyrównać do środka/prawo/lewo za pomocą textAlign .Ale nie mogę wyrównać go, aby uzasadnić .. – Sangam254

+0

dziękuję za kod .. Ale potrzebuję pomocy, aby usprawiedliwić tekst – Sangam254

+1

Yuo cna wykorzystać ten algorytm uzasadnienia: https: //www.rose- hulman.edu/class/csse/csse221/200910/Projects/Markov/justification.html powinno być dość łatwe do wdrożenia w obszarze roboczym – Variant