将文本换行中的行数定义为变量

时间:2015-09-09 13:54:04

标签: javascript

我正在使用以下代码将输入包装到我正在处理的基于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);

0 个答案:

没有答案