是否有某种方法可以使用更多样式选项定义文本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字体参数,但没有找到太多用处。也许如果有人知道这意味着什么,他们可以对此有所了解。
答案 0 :(得分:4)
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
答案 1 :(得分:2)
我从未使用过extjs,但对我来说它看起来像SVG。不幸的是,Firefox不支持svg元素的text-decoration
属性,因此您可能正在Firefox中进行测试,但在Chrome中,它可能会显示您的style
属性。
解决方法是使用line
元素手动绘制下划线。使用javascript并不难,但我不知道如何以extjs的方式实现这一点。