如何在 HTML 画布上找到文本的高度? [英] How can you find the height of text on an HTML canvas?

问题描述

规范有一个 context.measureText(text) 函数，它会告诉您打印该文本需要多少宽度，但我找不到一种方法来确定它有多高.我知道它基于字体，但我不知道将字体字符串转换为文本高度.

The spec has a context.measureText(text) function that will tell you how much width it would require to print that text, but I can't find a way to find out how tall it is. I know it's based on the font, but I don't know to convert a font string to a text height.

推荐答案

UPDATE - 作为这个工作的示例，我在 Carota 编辑器.

UPDATE - for an example of this working, I used this technique in the Carota editor.

继 ellisbben 的回答之后，这里是一个增强版本，用于从基线获取上升和下降，即与 Win32 的 tmAscent 和 tmDescent 相同="http://msdn.microsoft.com/en-us/library/dd144941%28v=vs.85%29.aspx" rel="noreferrer">GetTextMetric API.如果您想使用不同字体/大小的跨度进行自动换行的文本运行，则需要这样做.

Following on from ellisbben's answer, here is an enhanced version to get the ascent and descent from the baseline, i.e. same as tmAscent and tmDescent returned by Win32's GetTextMetric API. This is needed if you want to do a word-wrapped run of text with spans in different fonts/sizes.

上图是在 Safari 中的画布上生成的，红色是画布被告知要绘制文本的顶行，绿色是基线，蓝色是底部(所以红色到蓝色是整个高度).

The above image was generated on a canvas in Safari, red being the top line where the canvas was told to draw the text, green being the baseline and blue being the bottom (so red to blue is the full height).

为了简洁使用 jQuery:

Using jQuery for succinctness:

var getTextHeight = function(font) {

  var text = $('<span>Hg</span>').css({ fontFamily: font });
  var block = $('<div style="display: inline-block; width: 1px; height: 0px;"></div>');

  var div = $('<div></div>');
  div.append(text, block);

  var body = $('body');
  body.append(div);

  try {

    var result = {};

    block.css({ verticalAlign: 'baseline' });
    result.ascent = block.offset().top - text.offset().top;

    block.css({ verticalAlign: 'bottom' });
    result.height = block.offset().top - text.offset().top;

    result.descent = result.height - result.ascent;

  } finally {
    div.remove();
  }

  return result;
};

除了一个文本元素，我还添加了一个带有 display: inline-block 的 div，这样我就可以设置它的 vertical-align 样式，然后找出哪里浏览器已经放了.

In addition to a text element, I add a div with display: inline-block so I can set its vertical-align style, and then find out where the browser has put it.

所以你得到一个带有 ascent、descent 和 height 的对象(这只是 ascent + <为方便起见，代码>下降).为了测试它，值得拥有一个绘制水平线的函数:

So you get back an object with ascent, descent and height (which is just ascent + descent for convenience). To test it, it's worth having a function that draws a horizontal line:

var testLine = function(ctx, x, y, len, style) {
  ctx.strokeStyle = style; 
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x + len, y);
  ctx.closePath();
  ctx.stroke();
};

然后您可以看到文本相对于顶部、基线和底部在画布上的位置:

Then you can see how the text is positioned on the canvas relative to the top, baseline and bottom:

var font = '36pt Times';
var message = 'Big Text';

ctx.fillStyle = 'black';
ctx.textAlign = 'left';
ctx.textBaseline = 'top'; // important!
ctx.font = font;
ctx.fillText(message, x, y);

// Canvas can tell us the width
var w = ctx.measureText(message).width;

// New function gets the other info we need
var h = getTextHeight(font);

testLine(ctx, x, y, w, 'red');
testLine(ctx, x, y + h.ascent, w, 'green');
testLine(ctx, x, y + h.height, w, 'blue');

这篇关于如何在 HTML 画布上找到文本的高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！