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

【问题标题】：How to get the text width of a string in ExtPascal如何在 ExtPascal 中获取字符串的文本宽度
【发布时间】：2012-05-09 01:27:22
【问题描述】：

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

【问题讨论】：

标签： extjs pascal lazarus text-width

【解决方案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 也可以，但这是获取文本宽度的最简单方法。

希望这会有所帮助。

【讨论】：

【解决方案2】：

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

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

【讨论】：