2

Lazarus で ExtPascal ライブラリ (ExtJS を囲むラッパー) を使用してボタン (TExtButton) を配置しようとしています。ボタンのテキストとフォントに基づいてボタンの幅を設定したい。GetWidth と JSExpression と ExtUtilTextMetrics のさまざまな組み合わせを試しましたが、返される答えは -420,000 のようなものです。

次のような呼び出しを使用してフォントを変更できなかったことが関連している可能性があります。

JSCode('style:{"font-size":"'+ FontSize +'px","font-family":"Tahoma"}');

しかし、その方法で得られる唯一の効果は、フォントを十分に大きく設定するとボタンが高くなることでしたが、ボタンのテキストは元の小さなフォントでレンダリングされました.

そこで、次の式を使用して、ボタンの Text プロパティに渡される文字列にスタイルを入れることにしました。

result := '<b style="font-size:1.4em;font-family=sans-serif;color:rgb(14,63,138);">' + s + '</b>'

正確なテキスト幅を計算するのを手伝ってくれる人はいますか?

TIAマーク

4

2 に答える 2

0

ExtJS では、次のような便利なTestMetricsクラスを使用します。

var textWidth = 
  Ext.util.TextMetrics.measure(
    extTextfield.getEl().dom, 
    text).
  width;
于 2015-07-09T04:47:38.093 に答える
0

最初は、ExtPascal も Lazarus もわかりません。

解決策は非常に簡単だと思います。JavaScriptのみで可能です。

手順: 1. 非表示の div を作成します。

テキストの幅が必要な場合は、1. 非表示の div の text、fontSize、および fontFamily を設定します。2. 非表示の div を表示に設定します。 3. div の幅を取得します。4. div を非表示に戻します。

コード内:

<html>
<head>
    <script>
        function getWidth(text, fontSize, fontFamily) 
        {
            var element = document.getElementById('ruler');

            element.style.fontSize = fontSize;
            element.style.fontFamily = fontFamily;
            element.style.display = "inline";
            element.innerHTML = text;

            var width = element.offsetWidth;
            document.getElementById('width').innerHTML = width;
        }
    </script>
    <style>
        div#ruler
        {
            display : none;
        }
    </style>
</head>
<body onload="getWidth('Test', '13', 'Verdana');">
    <div id="ruler"></div>
    <div id="width"></div>
</body>
</html>

ExtJ でも可能ですが、これがテキストの幅を取得する最も簡単な方法です。

お役に立てれば。

于 2012-07-26T17:19:16.227 に答える