Кнопка с произвольным фоном, текст внутри - C++ Builder

Я хочу создать кнопку с собственным фоном и текстом внутри. (при исполнении)

Но текст идет рядом с картинкой, а не внутри.

Кнопка и текст рядом с ней

Вы знаете какой-нибудь способ сделать это?

Для информации я могу использовать весь пакет компонентов TMS


button delphi c++builder tms
person macTAR    schedule 04.07.2018    source источник
comment
Создайте элемент управления. Затем сначала нарисуйте I age, а текст поверх него. Возможно, создание подкласса кнопки и ее отрисовка.   -  person David Heffernan    schedule 04.07.2018
comment
У меня до сих пор не было на это времени, и вы уже приняли мой ответ, но я только что добавил новое редактирование с лучшим подходом (проверено на VCL).   -  person Spektre    schedule 12.07.2018

Ответы (1)


arrow_upward
4
arrow_downward

TSpeedButton имеют свойство Glyph, но IIRC не объединяют Caption и Glyph вместе. К счастью, вы можете создавать свои глифы программно на ходу, используя Graphics::TBitmap, используя фоновое изображение и отображать текст поверх него... Я не кодер Delphi, но в билдере это будет выглядеть так:

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;

Таким образом, вы можете создать утилиту, которая создает все необходимые глифы, которые вы затем используете в IDE для своего проекта. Я никогда не пытался загружать глифы во время выполнения, но может быть способ (сделать это непосредственно в инициализации целевого приложения).

[Edit1] Наконец-то появилось время на тестирование

Свойство Glyph является растровым, поэтому вы можете загружать его напрямую из файла... нет необходимости создавать/удалять. Если вы хотите иметь что-то более надежное, взгляните на это. Я создал пустое новое приложение формы с несколькими TSpeedButtons на нем и установил размер их позиции и Caption вот так:

дизайнер IDE

И я использовал бесшовную текстуру в качестве фона (так что я могу иметь любой размер кнопки без проблем с масштабированием...):

текстура

И инициализируйте мои кнопки во время выполнения следующим образом:

//---------------------------------------------------------------------------
#include <vcl.h>
#pragma hdrstop
#include "Unit1.h"
//---------------------------------------------------------------------------
#pragma package(smart_init)
#pragma resource "*.dfm"
TForm1 *Form1;
//---------------------------------------------------------------------------
void bt_init(TSpeedButton *bt,Graphics::TBitmap *bmp)
    {
    int x,y,xs,ys;
    AnsiString s;
    // clear caption
    s=bt->Caption; bt->Caption="";
    // prepare glyph
    bt->Glyph->PixelFormat=bmp->PixelFormat;
    bt->Glyph->SetSize(bt->Width,bt->Height);
    // render seamless background (repeat texture)
    xs=bmp->Width;
    ys=bmp->Height;
    for (y=0;y<bt->Width;y+=ys)
     for (x=0;x<bt->Width;x+=xs)
      bt->Glyph->Canvas->Draw(x,y,bmp);
    // set transparent color
    bt->Glyph->Canvas->Pixels[0][bt->Glyph->Height-1]=clBlack;
    // render caption
    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;
    }
//---------------------------------------------------------------------------

Вы также можете добавить рендер границы (другая текстура ...). Также вы можете изменить рендеринг подписи (крупный шрифт или цветная рамка для повышения контраста). Здесь превью:

предварительный просмотр

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

Также взгляните на это:

для некоторых идей визуального улучшения текста.

person Spektre    schedule 05.07.2018