如何确定 Raphael text() 的准确高度？答案

【问题标题】：How can I determine accurate height of Raphael text()?如何确定 Raphael text() 的准确高度？
【发布时间】：2014-03-12 04:03:29
【问题描述】：

使用Raphael JS 2.1.2，代码如下：

var distance = 250;
var sizes = [ 14, 18, 24, 48, 72, 96 ];
for(var i = 0; i < sizes.length; i++)
{
  var size = sizes[i];
  var text = me.paper.text(distance + (size * 5), me.top + 200, size).attr({ 'font-size': size });

  var rect = text.getBBox();
  text.paper.rect(rect.x, rect.y, rect.width, rect.height).attr({ stroke: '#FF0000' });
}

产生这个输出：

如何准确测量文本的高度，如您所见，边界框包含与字体大小相关的垂直填充？

$(text.node).height() 也返回与 rect.height 相同的值。我正在尝试将文本的顶部和/或底部与其他元素对齐，因此我需要一些方法来确定每个字体大小的填充或文本高度。

我可以维护{ size: [font size], padding: [padding] } 的集合，但如果我可以在运行时生成它会更好。

【问题讨论】：

标签： javascript svg raphael

【解决方案1】：

你不能。实际上，这不是“填充”。 getBBox 返回从字体度量给出的尺寸，而不是单个字形。文本元素的 BBox 高度包括字体的上升和下降。

在大多数字体中，ascent 会为“Ä”等字形保留一个高于大写高度的间隙。 Discenders 保留用于带有“tails”的小写字符，例如“g”、“j”、“q”等。例如，在文本“Äg”周围绘制一个矩形。

【讨论】：

我认为这不会被应用，除非需要，或者如果它有一些针对我可以用来确定“实际”高度的元素的度量。没关系，我只使用 1 种需要对齐的字体，因此我可以维护每个字符的指标列表，以针对不同的字体大小使用……但遗憾的是我无法计算这一点。

【解决方案2】：

这是可能的，但它很混乱。您可以通过使用OpenType.js 来完成此操作，然后使用与 Raphael 相同的文本/大小和 OpenType getPath 绘制路径并测量路径。您可以使用Raphael.pathBBox(path.toPathData()) 测量输出路径，或者通过创建here 概述的临时SVG 来测量输出路径（最好是速度更快，但浏览器支持更有限）。

路径的大小将是您想要的文本的确切大小。

同样，您可能还会遇到位置挑战，即尝试确定 svg 框如何适合 raphael 框。您可以使用从 OpenType 加载返回的字体对象提供的上升/下降值以及 SVG 路径的 y/y2 值。所有这些都可以让您找出 OpenType 文本的基线，并且您可以将其与 Raphael 框相匹配。

【讨论】：