Próbuję zawijać słowo w Canvas HTML5, ale walczę!Zawijanie słów w płótnie HTML5
Utworzono obiekt TextTyper, który będzie zarządzać wieloma wierszami tekstu zawijanego.
Problem, który mam, to nieskończona pętla!
Potrzebuję rozwiązania, które wykorzystuje czysty JavaScript (bez jQuery) i HTML5 Canvas.
Zrobiłem JSFiddle pomóc rozwiązać moje problemy i przetestować różne strategie: http://jsfiddle.net/Jamesking56/eECar/
Oto mój TextTyper Przedmiot tej pory:
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++;
}
}
}
jakieś pomysły?
Sprawdź swój kod za pomocą narzędzi programistycznych i powinieneś go znaleźć. –
'ctx.measureText' zwraca nowy obiekt' TextMetrics', a nie rzeczywistą szerokość. Prawdopodobnie będziesz musiał zmienić to na 'ctx.measureText (...). Width'. Ponadto, jeśli nigdy nie opróżnisz 'linii' po policzeniu jednej linii, jak możesz zmierzyć szerokość nowego zakresu słów? – Rikonator