У меня есть небольшая функция, которую я нашел, которая берет строку из textarea
, а затем помещает ее в элемент canvas
и обертывает текст, когда линия становится слишком длинной. Но он не обнаруживает разрывов строк. Это то, что он делает и что ему следует делать:
Input:
Hello
This is dummy text that could be inside the text area.
It will then get put into the canvas.
Неверный вывод:
Hello this is dummy text
that could be inside the
text area. It will then
get put into the canvas.
Что он должен выводить:
Hello
This is dummy text that
could be inside the text
area. It will then get
put into the canvas.
Это функция, которую я использую:
function wrapText(context, text, x, y, maxWidth, lineHeight) {
var words = text.split(' ');
var line = '';
for(var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
context.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
}
else {
line = testLine;
}
}
context.fillText(line, x, y);
}
Можно ли достичь того, что я пытаюсь получить? Или есть способ просто перемещать текстовую область как в холст?