Question

我正在尝试使用LaParus中的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 标记

Answer 1

起初，我不知道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>

它也可以使用ExtJs，但这是获取文本宽度的最简单方法。

希望这有帮助。

Answer 2

在ExtJS中使用一个有用的TestMetrics类，如下所示：

var textWidth = 
  Ext.util.TextMetrics.measure(
    extTextfield.getEl().dom, 
    text).
  width;

如何在ExtPascal中获取字符串的文本宽度

2 个答案: