Question

使用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' });
}

生成此输出：

Raphael text output

如何准确测量文本的高度，因为您可以看到边界框包含相对于字体大小的垂直填充？

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

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

谢谢，莫里斯

Answer 1

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

在大多数字体中，上升保留了比“Ä”等字形高出上限的间隙。 Discenders保留为带有“尾巴”的小写字符，例如“g”，“j”，“q”等。例如，在文本“Äg”周围画一个矩形。

有关详细信息，请参阅：
http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Text http://www.w3.org/TR/SVG11/text.html#BaselineAlignmentProperties http://en.wikipedia.org/wiki/Baseline_(typography)

Answer 2

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

路径的大小将是您所需文本的确切大小。

沿着相同的路线，您可能还会遇到位置挑战，即尝试确定svg盒子如何适合raphael盒子。您可以使用从OpenType加载返回的字体对象提供的ascender / descender值以及SVG路径的y / y2值。所有这些都可以让你弄清楚OpenType文本的基线，你可以将它与Raphael框相匹配。

如何确定Raphael文本的准确高度（）？

2 个答案: