2012-05-09 17 views
2

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

私がこのような呼び出し使用して変更するフォントを取得できませんでしたことを関連している可能性がある:

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 マーク

答えて

0

最初は、私はExtPascalもラザロを知りません。

私は解決策がかなり簡単だと思います。 JavaScriptのみで行うことができます。

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

テキストの幅が必要な場合 1. hidden divのtext、fontSize、fontFamilyを設定します。 2. hidden divをvisibleに設定します。 3. divの幅を取得します。 4. divをhiddenに設定します。コードで

<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> 

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

これが役に立ちます。 ExtJSので

0

このような便利TestMetricsクラスを使用します。

var textWidth = 
    Ext.util.TextMetrics.measure(
    extTextfield.getEl().dom, 
    text). 
    width; 
関連する問題