文字精灵样式

Posted 2023-02-26

【中文标题】文字精灵样式

【英文标题】：Text Sprite styling

【发布时间】：2012-08-23 00:37:10

【问题描述】：

有没有什么方法可以定义文本sprite，除了示例中显示的大小和字体之外，还有更多样式选项？

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

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

我尝试了这样的style 配置：

style: 
    'text-decoration': 'underline'

我也尝试在字体配置中这样设置：

font: "underline 18px monospace"

都没有用。

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

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

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

【参考方案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.

供参考，这里是字体参数定义：MSDNMDN

【参考方案2】：

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

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

【讨论】：

由于浏览器与“文本装饰”的兼容性问题，我支持此解决方案。