我正在使用以下代码将输入包装到我正在处理的基于Web的小型应用程序中的textarea。
我希望页面下方的元素定位取决于文本占用的行数。
有人可以提出一种方法来确定文本占用的行数,并将其定义为变量吗?
感谢。
的JavaScript
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);
}
var size = document.getElementById("bgSize").value;
var maxWidth = (canvas.width * (size / 100)) - (canvas.width * ((size / 100) * 0.15));
var alignment = document.getElementById("bgAlign").value;
if(alignment > 0){
var x = 1280-(size * 6.4);
}else{
var x = size * 6.4;
}
var y = 160;
var textContent = document.getElementById("textContent").value;
var text = textContent;
var colourInput = document.getElementById("bgColour").value;
if(colourInput > 0){
var textColour = '#fff';
}else{
var textColour = '#415055';
}
var fontSizeInput = 40;
var maxFontSize = 60;
var fontSize = fontSizeInput;
context.font = ''+fontSize+'pt gillsans';
context.fillStyle = textColour;
context.textAlign = "center";
var lineFactor = 1.35;
var lineHeight = fontSize * lineFactor;
wrapText(context, text, x, y, maxWidth, lineHeight);