5
HTML5 캔버스에서 단어 줄 바꿈을 시도하고 있지만 고생 중입니다!HTML5 캔버스에서 단어 줄 바꿈
여러 줄의 단어 줄 바꿈 텍스트를 관리하는 TextTyper 객체를 만들었습니다.
내가 가지고있는 문제는 무한 루프가 발생했습니다!
순수 JavaScript (jQuery 없음)와 HTML5 Canvas를 사용하는 솔루션이 필요합니다. http://jsfiddle.net/Jamesking56/eECar/
여기 내 TextTyper 개체 지금까지의 :
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++;
}
}
}
어떤 아이디어가 내 문제를 해결하고 다른 전략을 테스트하기 위해
은 내가 JSFiddle했습니다?
개발자 도구로 코드를 단계별 실행하면 문제를 찾아야합니다. –
'ctx.measureText'는 새로운'TextMetrics' 객체를 반환하고 실제 너비는 반환하지 않습니다. 아마도 이것을 'ctx.measureText (...) .width'로 변경해야 할 것입니다. 또한 한 줄을 계산 한 후에'line'을 비우지 않으면 새로운 단어 범위의 너비는 어떻게 측정합니까? – Rikonator