0

是否有某种方法可以定义具有更多样式选项的文本精灵，然后只是大小和字体，如示例中所示？

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

具体来说，我想让它加粗或加下划线。

我尝试了style这样的配置：

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

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

font: "underline 18px monospace"

都没有奏效。

文档Ext.draw.Sprite#font中配置中的这句话听起来很有希望，但它非常神秘：

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

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

4

2 回答 2

4

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

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

工作演示：http: //jsfiddle.net/gilly3/WSQv9/。在 Chrome 和 IE9 中测试。 Firefox 尚不支持 SVG 中的下划线。

作为参考，这里是字体参数定义：
MSDN
MDN

于 2012-08-23T00:53:12.733 回答
2

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

line解决方法是使用元素手动绘制下划线。使用 javascript 并不困难，但我不知道如何以 extjs 方式完成此操作。

于 2012-08-23T01:01:17.397 回答