Question

是否有某种方法可以使用更多样式选项定义文本sprite，然后只显示示例中显示的大小和字体？

{
    type: "text",
    text: "Hello, Sprite!",
    fill: "green",
    font: "18px monospace"
}

具体来说，我希望将其加粗或加下划线。

我尝试了style这样的配置：

style: {
    'text-decoration': 'underline'
}

我也尝试在字体配置中设置它，如下所示：

font: "underline 18px monospace"

两者都没有。

来自Ext.draw.Sprite#font配置in the docs的这句话听起来很有希望，但它非常神秘：

使用与CSS字体参数相同的语法

我一直在谷歌搜索 CSS字体参数，但没有找到太多用处。也许如果有人知道这意味着什么，他们可以对此有所了解。

Answer 1

font css属性允许您指定粗体和斜体，但使用text-decoration属性设置下划线。您需要使用样式配置：

{
    type: "text",
    text: "Hello, Sprite!",
    fill: "green",
    font: "bold 18px monospace",
    style: {
        textDecoration: "underline"
    }
}

工作演示： http://jsfiddle.net/gilly3/WSQv9/。在Chrome和IE9中测试过。 Firefox doesn't yet support underline in SVG

供参考，这是字体参数定义：
MSDN
MDN

Answer 2

我从未使用过extjs，但对我来说它看起来像SVG。不幸的是，Firefox不支持svg元素的text-decoration属性，因此您可能正在Firefox中进行测试，但在Chrome中，它可能会显示您的style属性。

解决方法是使用line元素手动绘制下划线。使用javascript并不难，但我不知道如何以extjs的方式实现这一点。

文字雪碧造型

2 个答案: