javascript - EASELJS - 下划线文本

Question

我没有在框架中看到任何对此的原生支持，所以我通过测量字体高度并在下方画一条线来编写一些代码。我需要找出字体有多少 Descent，因为 getMeasureHeight 只测量字体基线。

到目前为止，我有以下代码:

var textLayer = new createjs.Text();
var fontSizeInPx = Math.round((self.fontSize() / 72) * 300, 0) + "px";

textLayer.textBaseline = 'bottom';
textLayer.text = text;
textLayer.font = getFontStyle(self.isBold(), self.isItalic(), fontSizeInPx, 'Arial');;
var textMeasures = textLayer.getBounds();

var underlineShape = new createjs.Shape();

var startYCoords = self.positionY() + textMeasures.height;

underlineShape.graphics.beginStroke(self.color()).setStrokeStyle(2)
    .moveTo(self.positionX(), startYCoords)
    .lineTo(textMeasures.width + self.positionX(), startYCoords);

这是结果:

我怎样才能得到这个指标？

谢谢

Answer 1

最简单的方法是利用 textBaseline 属性。将其设置为 alphabetic 而不是 top(默认值)将使用 y=0 处的字体基线绘制文本。然后，您可以使用 getMeasuredWidth() 获取宽度，并在文本对象的 x 和 y 处画线(可能将 y 偏移一两个像素以将其放在您想要的位置)。

举个例子: http://jsfiddle.net/gskinner/y919oszd/

还值得注意的是，其他基线值(如“表意文字”)非常不可靠，并且在不同的浏览器上表现不同。最可靠的是“alphabetic”，其次是“top”，FireFox 渲染错误:https://bugzilla.mozilla.org/show_bug.cgi?id=737852 .