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 のように見えます。text-decoration残念ながら、Firefox はsvg 要素の属性をサポートしていないため、Firefox でテストしていても、Chrome ではstyle属性で問題なく表示される可能性があります。

これを回避するには、要素を使用して手動で下線を引きlineます。JavaScript では難しくありませんが、extjs の方法でこれを達成する方法がわかりません。

于 2012-08-23T01:01:17.397 に答える