Question

我正在试图弄清楚我是否可以在javascript中测量字符串高度。我在C＃中有这个代码，但是我想看看我是否也可以在Javascript中获得这个代码。我查看了过去的SO并发现这是一个答案（没有链接）：

function get_tex_height(txt, font) {
    this.element = document.createElement('canvas');
    this.context = this.element.getContext('2d');
    this.context.font = font;
    return this.context.measureText(txt).height;
  }

无论出于何种原因，这都行不通。 为什么？ 你可能会问。我不知道。我也无从得知。我正在UIWebView中的移动应用程序中重新编写HTML，这是我进行任何调试的唯一方法是alert(somethinghere)。如果JS不起作用，那么它就不会继续执行代码而我不知道它在哪里失败了。

所以我想看看我是否可以传递一个字体，字体大小，宽度约束，并获得渲染时该字符串的准确高度。如果这是可能的，我开始总结的不是。我可能只需要使用我的C＃方法。

Answer 1

您必须将其附加到DOM才能进行渲染和测量。您可以在不在页面上显示它的情况下执行此操作，如下所示。

function getTextHeight(text, font)
{
  var cvs, ctx, body, h;

  cvs = document.createElement('canvas');
  ctx = cvs.getContext('2d');
  cvs.style.display = "none";
  body = document.getElementsByTagName("BODY")[0];
  body.appendChild(cvs);

  ctx.font = font;
  h = ctx.measureText(text).height;
  body.removeChild(cvs);

  return h;
}

告诉我它是否有效，可能还有一个错误。显然，如果将文本高度直接插入DOM，则 NOTHING 与文本高度相关。您获得的高度就是在画布上呈现的文本的高度。对于DOM中的高度，你必须做一些不同的事情，根据容器的宽度考虑包装......

有没有办法计算字符串高度而不进行任何渲染？

1 个答案: