EASELJS - 下划线文字

Question

我在框架中没有看到任何本机支持，所以我做了一些代码，通过测量字体高度并在下面画一条线。我需要找出字体有多少下降，因为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＆amp;处绘制线条。文本对象的y（可能将y偏移一个或两个像素以将其放在您想要的位置）。

这是一个例子： http://jsfiddle.net/gskinner/y919oszd/

值得注意的是，其他基线值（如“表意文字”）非常不可靠，并且在不同的浏览器上表现不同。最可靠的是“字母”，后跟“顶部”，FireFox会错误地渲染：https://bugzilla.mozilla.org/show_bug.cgi?id=737852。

Answer 2

我在这里找到了一个解决方案，用于获取字体指标：https://stackoverflow.com/a/9847841/3202740

拥有字体下降，唯一需要做的就是获取字体高度并添加字体下降：

var lineBreaks = self.canvasLayer.text.split("\n");

$.each(lineBreaks, function (idx, text) {
    if (text != '') {
        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 textMetrics = getTextHeight('Arial');

        var underlineShape = new createjs.Shape();

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

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

        underlineShapes.push(underlineShape);

        self.canvasLayer.stage.addChild(underlineShape);
    }
});    

导致：