Question

我正在尝试在HTML5画布中创建文本框，我知道你实际上无法做到这一点，所以我创建了一个框并在同一位置创建了一些文本。但是，我想确保文本保留在框中，因此我需要知道文本的一部分何时开箱即用。我想我应该能够以像素为单位测量文本，然后将其与框进行比较。我的问题是，使用javascript，如何测量任何给定字体的字符大小？

Answer 1

您可以使用context.measureText来获取指定文本的宽度：

// set the font

context.font = "14px verdana";

// use measureText to get the text width

var textWidth = context.measureText("Measure this!").width;

文本换行看起来像这样：

function wrapText(context, text, x, y, maxWidth, fontSizeFace) {
  var words = text.split(' ');
  var line = '';
  var lineHeight=measureTextHeight(fontSizeFace);

  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) {
      context.fillText(line, x, y);
      line = words[n] + ' ';
      y += lineHeight;
    }
    else {
      line = testLine;
    }
  }
  context.fillText(line, x, y);
}

Answer 2

您可以在回答measureText()函数时使用markE提及。

specifications defines其结果（TextMetrix）：

interface TextMetrics {
  // x-direction
  readonly attribute double width; // advance width
  readonly attribute double actualBoundingBoxLeft;
  readonly attribute double actualBoundingBoxRight;

  // y-direction
  readonly attribute double fontBoundingBoxAscent;
  readonly attribute double fontBoundingBoxDescent;
  readonly attribute double actualBoundingBoxAscent;
  readonly attribute double actualBoundingBoxDescent;
  readonly attribute double emHeightAscent;
  readonly attribute double emHeightDescent;
  readonly attribute double hangingBaseline;
  readonly attribute double alphabeticBaseline;
  readonly attribute double ideographicBaseline;
};

然而问题是在主要浏览器中只实现了width，因此您无法使用此功能获得高度（上升+下降）（如果基于画布的文字处理器，我也不会感到惊讶在完全实施之前，至少有一个“主要3”出现......但这是回归和猜测:-)）。

为了测量字体，你必须使用DOM元素，这个小技巧将允许你测量字体的宽度和高度：

Online demo here （打开控制台查看结果）。

function measureText(font, txt) {

    var el = document.createElement('div'),
        cs, res;

    el.style.cssText = 'position:fixed;left:-4000px;top:-4000px;padding:0;margin:0;font:' + font;
    el.innerHTML = txt;

    document.body.appendChild(el);

    cs = getComputedStyle(el);

    res = {width: cs.getPropertyValue('width'),
           height: cs.getPropertyValue('height')};

    document.body.removeChild(el);

    return res;    
}

该函数创建一个div元素，将一些基本样式应用于窗口外部。这是因为我们必须将它附加到DOM树才能使用getComputedStyle() - 我们还必须在再次删除元素之前获取属性值。

传递字体的参数，就像传递上下文（即20px sans-serif）和文本一样。

它显然会带来很小的性能损失（虽然使用固定定位元素不会导致任何重新流动，因此它不会那么糟糕）所以请谨慎使用。

字符大小，以像素为单位

2 个答案: