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

起初，我不知道 ExtPascal 和 Lazarus。

我相信解决方案非常简单。只能使用 JavaScript 来完成。

步骤： 1. 创建一个隐藏的div。

当你需要一些文本的宽度时， 1. 设置隐藏div的文本、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 也可以，但这是获取文本宽度的最简单方法。

希望这可以帮助。

于 2012-07-26T17:19:16.227 回答
0

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

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