Решение проблемы отображения текста внутри кнопки с пользовательским фоном в C++ Builder

Delphi , Компоненты и Классы , Кнопки

Введение

Вопрос пользователя связан с созданием кнопки в среде разработки C++ Builder, которая имеет пользовательский фон и содержит внутри себя текст. Проблема заключается в том, что при выполнении программы текст отображается рядом с изображением, а не внутри него, как это задумано.

Решение проблемы

Для решения данной проблемы можно использовать компонент TSpeedButton, который позволяет программно создавать иконку кнопки с использованием изображения и текста. В качестве примера можно использовать библиотеку TBitmap для создания иконки кнопки на лету, с текстом, нанесенным поверх изображения.

Пример кода

Graphics::TBitmap *bmp = new Graphics::TBitmap;
bmp->LoadFromFile("button_background.bmp");
bmp->Canvas->Font->Color = clWhite;
bmp->Canvas->Brush->Style = bsClear;
AnsiString s = "caption1";
int x = (bmp->Width - bmp->Canvas->TextWidth(s)) / 2;
int y = (bmp->Height - bmp->Canvas->TextHeight(s)) / 2;
bmp->TextOutA(x, y, s);
bmp->SaveToFile("button1.bmp");
delete bmp;

Данный код позволяет создать изображение кнопки с фоном и текстом, но для использования в приложении он не подходит напрямую, так как требует сохранения и загрузки файла. Вместо этого можно использовать свойство Glyph компонента TSpeedButton, которое позволяет загружать битмап напрямую.

Улучшенный подход

void bt_init(TSpeedButton *bt, Graphics::TBitmap *bmp)
{
    int x, y, xs, ys;
    AnsiString s;
    // Обнуление текста кнопки
    s = bt->Caption;
    bt->Caption = "";
    // Настройка иконки
    bt->Glyph->PixelFormat = bmp->PixelFormat;
    bt->Glyph->SetSize(bt->Width, bt->Height);
    // Рендеринг фона (повтор текстуры)
    xs = bmp->Width;
    ys = bmp->Height;
    for (y = 0; y < bt->Height; y += ys)
        for (x = 0; x < bt->Width; x += xs)
            bt->Glyph->Canvas->Draw(x, y, bmp);
    // Установка прозрачного цвета
    bt->Glyph->Canvas->Pixels[0][bt->Glyph->Height - 1] = clBlack;
    // Рендеринг текста
    bt->Glyph->Canvas->Font->Color = clWhite;
    bt->Glyph->Canvas->Font->Style = TFontStyles() << fsBold;
    bt->Glyph->Canvas->Brush->Style = bsClear;
    x = (bt->Glyph->Width - bt->Glyph->Canvas->TextWidth(s)) / 2;
    y = (bt->Glyph->Height - bt->Glyph->Canvas->TextHeight(s)) / 2;
    bt->Glyph->Canvas->TextOutA(x, y, s);
}

Иннициализация в коде формы

__fastcall TForm1::TForm1(TComponent* Owner) : TForm(Owner)
{
    Graphics::TBitmap *bmp = new Graphics::TBitmap;
    bmp->LoadFromFile("button.bmp");
    bmp->PixelFormat = pf32bit;
    bt_init(SpeedButton1, bmp);
    bt_init(SpeedButton2, bmp);
    bt_init(SpeedButton3, bmp);
    bt_init(SpeedButton4, bmp);
    delete bmp;
}

Этот код позволяет инициализировать кнопки с пользовательским фоном и текстом, отображаемым поверх фона, непосредственно в коде формы.

Заключение

Пользовательский интерфейс может быть значительно улучшен с помощью таких техник, как изменение размера шрифта или добавление цветного бордюра для улучшения контраста. Также следует помнить, что в нижнем левом углу итогового изображения кнопки остаётся прозрачный цвет. Если он не используется, его следует заменить на цвет, который не используется в текстуре, чтобы избежать артефактов.

Дополнительные материалы

Для улучшения визуального восприятия текста на изображении можно ознакомиться со следующей статьёй: Какой хороший алгоритм для выбора цвета, чтобы текст на изображении выделялся?

Вывод

Проблема отображения текста внутри кнопки с пользовательским фоном в C++ Builder решается с помощью создания иконки кнопки, используя объекты класса TBitmap и программно нанесением текста на фон. Приведенный пример кода демонстрирует, как это можно реализовать.

Создано по материалам из источника по ссылке.

Вопрос пользователя связан с программированием в среде C++ Builder, где рассматривается проблема отображения текста внутри кнопки с пользовательским фоном, и предлагается решение с использованием компонента `TSpeedButton` и класса `TBit

Комментарии и вопросы

Получайте свежие новости и обновления по Object Pascal, Delphi и Lazarus прямо в свой смартфон. Подпишитесь на наш Telegram-канал delphi_kansoftware и будьте в курсе последних тенденций в разработке под Linux, Windows, Android и iOS

:: Главная :: Кнопки ::