Word Wrapping in HTML5 Canvas

Ich versuche, in HTML5 Canvas zu umbrechen, aber ich habe Probleme!Word Wrapping in HTML5 Canvas

Ich habe ein TextTyper-Objekt erstellt, mit dem mehrere Zeilen von Word-Wrap-Text verwaltet werden.

Das Problem, das ich habe, ist, dass ich eine Endlosschleife bekomme!

Ich brauche eine Lösung, die reines JavaScript (kein jQuery) und HTML5 Canvas verwendet.

Ich habe ein JSFiddle gemacht, meine Probleme zu lösen und verschiedene Strategien testen: http://jsfiddle.net/Jamesking56/eECar/

mein TextTyper Objekt Hier ist so weit:

function TextTyper(text, x, y, font, colour) 
{ 
    this.text = text || ""; 
    this.x = x || 20; 
    this.y = y || 20; 
    this.font = font || false; 
    this.colour = colour || [0, 0, 0]; 
    this.lines = 0; 

    // Calculate and draw the lines 
    this.draw = function() 
    { 
     canvas.width = canvas.width; 

     var maxWidth = (canvas.width - 40); 

     var words = this.text.split(' '); 
     var line = [words[0]]; //begin with a single word 

     for (var i = 1; i < words.length; i++) 
     { 
      while (ctx.measureText(line.join(' ')) < maxWidth && i < words.length - 1) 
      { 
       line.push(words[i++]); 
      } 

      if (i < words.length - 1) 
      { 
       //Loop ended because line became too wide 
       line.pop(); //Remove last word 
       i--; //Take one step back 
      } 
      this.lines++; 
     } 
    } 
}

Irgendwelche Ideen?

Quelle

2013-04-25 Jamesking56

Schritt durch Ihren Code mit Ihren Entwicklertools und Sie sollten das Problem finden. –

'ctx.measureText' gibt ein neues 'TextMetrics'-Objekt zurück und nicht die tatsächliche Breite. Das musst du wahrscheinlich in 'ctx.measureText (...). Width' ändern. Wenn Sie nach dem Zählen einer Zeile nie "Zeile" leeren, wie erwarten Sie dann, die Breite eines neuen Wortbereichs zu messen? – Rikonator

Nun, das ist, was ich für meine HTML5 Spiel: http://jsfiddle.net/eECar/16/

while (text.length) { 
    for(i=text.length; ctx.measureText(text.substr(0,i)).width > max_width; i--); 

    result = text.substr(0,i); 

    if (i !== text.length) 
     for(j=0; result.indexOf(" ",j) !== -1; j=result.indexOf(" ",j)+1); 

    lines.push(result.substr(0, j|| result.length)); 
    width = Math.max(width, ctx.measureText(lines[ lines.length-1 ]).width); 
    text = text.substr(lines[ lines.length-1 ].length, text.length); 
}

Hoffe, es hilft.

Quelle

2013-04-25 17:43:27

Word Wrapping in HTML5 Canvas

Antwort

Verwandte Themen