Javascript EASELJS-下划线文本

我在框架中没有看到任何本机支持，所以我编写了一些代码，通过测量字体高度并在下面画一条线。我需要找出字体的下降量，因为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);

这就是结果：

我怎样才能得到这个指标

---

谢谢

最简单的方法是利用

textbreeline

属性。将其设置为

字母

而不是

top

（默认设置）将使用

y=0

的字体基线绘制文本。然后，您可以使用

getMeasuredWidth（）

获取宽度，并在文本对象的x&y处绘制线（可能会将y偏移一两个像素以将其放置在您想要的位置）

下面是一个例子：

---

还值得注意的是，其他基线值，如“表意”非常不可靠，并且在不同的浏览器上表现不同。最可靠的是“字母”，然后是“top”，FireFox错误地呈现了它：。

我在这里找到了一个解决方案，用于获取字体度量：

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

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);
    }
});    

导致：

---

感谢您的回复。不幸的是，我不能简单地将一些额外的像素添加到底边的Y坐标中，每种字体都有自己的降序度量，并且，根据字体的大小，我必须计算需要添加多少额外的像素。另外，我必须使用TOP作为文本基线，因为坐标是从.psd文件导入的，该文件使用TOP作为字体基线绘制文本。