Как получить ширину текста строки в ExtPascal

Я пытаюсь расположить кнопки (TExtButton) с помощью библиотеки ExtPascal (оболочки вокруг ExtJS) в Lazarus. Я хочу установить ширину кнопок на основе текста и шрифта кнопки. Я пробовал различные комбинации 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 Mark

Источник

2 ответа

Сначала я не знаю ни ExtPascal, ни Lazarus.

Я считаю, что решение довольно простое. Это можно сделать только с помощью JavaScript.

Шаги: 1. Создать скрытый div.

Когда вам нужна ширина некоторого текста, 1. установите text, fontSize и fontFamily скрытого div. 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, но это самый простой способ получить ширину текста.

Надеюсь это поможет.

Источник

В ExtJS используйте полезный класс TestMetrics, например:

var textWidth = 
  Ext.util.TextMetrics.measure(
    extTextfield.getEl().dom, 
    text).
  width;
Источник
Другие вопросы по тегам