Word, HTML5 Canvas'da Sarma

Question

HTML5 Canvas'da sarma kelimesini yazmaya çalışıyorum ama mücadele ediyorum!

Sarılmış metnin birden çok satırını yönetecek bir TextTyper nesnesi oluşturdum.

Sorun şu ki sonsuz bir döngü alıyorum!

Saf JavaScript (jQuery yok) ve HTML5 Canvas kullanan bir çözüme ihtiyacım var. http://jsfiddle.net/Jamesking56/eECar/

İşte benim TextTyper Nesne şimdiye kadar var:

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

Herhangi Fikirler benim sorunları çözmek ve farklı stratejileri test etmek yardım etmek

Bir JSFiddle yaptık?

Answer 1

Eh, bu benim HTML5 Oyunu için kullanılan budur:

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

http://jsfiddle.net/eECar/16/ faydası Umut.