Сегодня мы продолжим улучшать наш виджет. На этот раз мы рассмотрим выравнивание текста.

Мы будем использовать проект и прошлой статьи.

Основы работы с текстом

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

На самом деле это очень важно, к примеру если мы сделаем подпись маленькой, а саму лампочку очень большой то у нас получиться:

Как видите, надпись не выравнивается. Конечно, мы могли бы добавить код, который вычислял бы середину текста и выравнивал надпись, но зачем это делать, когда в Qt5 уже предусмотрен механизм для выравнивания текста.

Давайте с помощью рисунка определимся, что нам потребуется:

На данном рисунке черным цветом выделена граница виджета, а зеленым граница блока текста. Так вот, чтобы Qt5 мог правильно выровнять текст или перенести слово на новую строку мы должны прямо указать эту зеленую область.

Для начала рассмотрим самый простой пример – выравнивание текста.

Заменим строчку

    painter.drawText(QPoint(0,this->getLampSize()+heightOfText/2),this->getCaption());

на

    painter.drawText(0,this->getLampSize(),
                     this->getLampSize(), heightOfText,
                     0,
                     this->getCaption(),
                     new QRect(0,this->getLampSize(),this->getLampSize(), heightOfText));

Добавим код для отрисовки рамки вокруг текста, чтобы сделать процесс нагляднее.

      painter.setBrush(QBrush());
    QPen pen;
    pen.setStyle(Qt::DashLine);
    painter.setPen(pen);
    QRect border = QRect(0,this->getLampSize(),
                         this->getLampSize(), heightOfText*2);
    painter.drawRect(border);

    painter.setPen(QPen(QColor(this->captionColor), 1));

Запустим:

Как видите, текст выводиться в прямоугольной области, заданной координатами:

0,this->getLampSize(),this->getLampSize(), heightOfText

Мы используем метод drawText():

void QPainter::drawText(int x, int y, int width, int height, int flags, const QString &text, QRect *boundingRect = nullptr

Собственно названия параметров говорят за себя.

Для управления выравниванием текста в данной версии метода используется параметр flags, пока он у нас равен нулю, так что никакие модификаторы к тексту не применяются.

Флаги выравнивания

Давайте рассмотрим какие флаги выравнивания текста мы можем использовать: 

• Qt::AlignLeft – выравнивание по левому краю
• Qt::AlignRight – выравнивание по правому краю
• Qt::AlignHCenter – выравнивание посередине горизонтально краю
• Qt::AlignJustify – выравнивание по содержимому краю
• Qt::AlignTop – выравнивание по верхнему краю
• Qt::AlignBottom – выравнивание по нижнему краю
• Qt::AlignVCenter – выравнивание по центру вертикально краю
• Qt::AlignCenter – выравнивание по центру
• Qt::TextSingleLine – вывод только одной линии
• Qt::TextWordWrap – перенос по словам

 Давайте добавим поле для хранения флага выравнивания:

private:     int captionAlign;

int QLampWidget::getCaptionAlign() const
{
    return captionAlign;
}

void QLampWidget::setCaptionAlign(int value)
{
    captionAlign = value;
    repaint();
}

Внесем изменения в вывод текста:

           painter.drawText(0,this->getLampSize(),
                     this->getLampSize(), heightOfText*2,
                     this->getCaptionAlign(),
                     this->getCaption(),
                     new QRect(0,this->getLampSize(),this->getLampSize(), heightOfText*2));

Для демонстрации я добавил много лампочек на форму и назвал их соответственно, увеличив высоту области текста в два раза:

Изменил строчку

    this->setFixedHeight(this->getLampSize()+heightOfText*2); 

И строки: 

    painter.setBrush(QBrush(QColor(157,255,252,127)));
    QPen pen;
    pen.setStyle(Qt::DashLine);
    painter.setPen(pen);
    QRect border = QRect(0,this->getLampSize(),
                         this->getLampSize(), heightOfText*2);
    painter.drawRect(border);

    painter.setPen(QPen(QColor(this->captionColor), 1));
    painter.drawText(0,this->getLampSize(),
                     this->getLampSize(), heightOfText*2,
                     this->getCaptionAlign(),
                     this->getCaption(),
                     new QRect(0,this->getLampSize(),this->getLampSize(), heightOfText*2));

Я подготовил пример для всех способов выравнивания:

    QHBoxLayout *hlay2 = new QHBoxLayout();

    QLampWidget *lamp3 = new QLampWidget("#557d00","#F00",QLampWidget::on, 64, "2");
    lamp3->setCaption("Left");
    lamp3->setCaptionAlign(Qt::AlignLeft);
    hlay2->addWidget(lamp3);

    QLampWidget *lamp4 = new QLampWidget("#557d00","#F00",QLampWidget::on, 64, "2");
    lamp4->setCaption("Center");
    lamp4->setCaptionAlign(Qt::AlignHCenter);
    hlay2->addWidget(lamp4);

    QLampWidget *lamp5 = new QLampWidget("#557d00","#F00",QLampWidget::on, 64, "2");
    lamp5->setCaption("Right");
    lamp5->setCaptionAlign(Qt::AlignRight);
    hlay2->addWidget(lamp5);

    hlay2->addStretch(1);

    vlay->addLayout(hlay2);

    QHBoxLayout *hlay3 = new QHBoxLayout();


    QLampWidget *lamp7 = new QLampWidget("#557d00","#F00",QLampWidget::on, 64, "2");
    lamp7->setCaption("Top Left");
    lamp3->setCaptionAlign(Qt::AlignLeft | Qt::AlignTop);
    hlay3->addWidget(lamp7);

    QLampWidget *lamp6 = new QLampWidget("#557d00","#F00",QLampWidget::on, 64, "2");
    lamp6->setCaption("Top Center");
    lamp6->setCaptionAlign(Qt::AlignHCenter  | Qt::AlignTop);
    hlay3->addWidget(lamp6);


    QLampWidget *lamp8 = new QLampWidget("#557d00","#F00",QLampWidget::on, 64, "2");
    lamp8->setCaption("Top Right");
    lamp8->setCaptionAlign(Qt::AlignRight |  Qt::AlignTop );
    hlay3->addWidget(lamp8);

    hlay3->addStretch(1);

    vlay->addLayout(hlay3);

    QHBoxLayout *hlay4 = new QHBoxLayout();

    QLampWidget *lamp10 = new QLampWidget("#557d00","#F00",QLampWidget::on, 64, "2");
    lamp10->setCaption("Mid Left");
    lamp10->setCaptionAlign(Qt::AlignVCenter |Qt::AlignLeft);
    hlay4->addWidget(lamp10);

    QLampWidget *lamp11 = new QLampWidget("#557d00","#F00",QLampWidget::on, 64, "2");
    lamp11->setCaption("Mid Center");
    lamp11->setCaptionAlign(Qt::AlignVCenter |Qt::AlignHCenter);
    hlay4->addWidget(lamp11);

    QLampWidget *lamp12 = new QLampWidget("#557d00","#F00",QLampWidget::on, 64, "2");
    lamp12->setCaption("Mid Right");
    lamp12->setCaptionAlign(Qt::AlignVCenter |Qt::AlignRight);
    hlay4->addWidget(lamp12);

    hlay4->addStretch(1);

    vlay->addLayout(hlay4);

    QHBoxLayout *hlay5 = new QHBoxLayout();

    QLampWidget *lamp13 = new QLampWidget("#557d00","#F00",QLampWidget::on, 64, "2");
    lamp13->setCaption("Bot Left");
    lamp13->setCaptionAlign(Qt::AlignBottom |Qt::AlignLeft);
    hlay5->addWidget(lamp13);

    QLampWidget *lamp14 = new QLampWidget("#557d00","#F00",QLampWidget::on, 64, "2");
    lamp14->setCaption("Bot Center");
    lamp14->setCaptionAlign(Qt::AlignBottom |Qt::AlignHCenter);
    hlay5->addWidget(lamp14);

    QLampWidget *lamp15 = new QLampWidget("#557d00","#F00",QLampWidget::on, 64, "2");
    lamp15->setCaption("Bot Right");
    lamp15->setCaptionAlign(Qt::AlignBottom |Qt::AlignRight);
    hlay5->addWidget(lamp15);

    hlay5->addStretch(1);

    vlay->addLayout(hlay5);

Запускаем:

Заключение 

Сегодня мы рассмотрели выравнивание текста в Qt5 при использовании QPainter.

Были рассмотрены методы, флаги выравнивания и приведен пример выравнивания с использованием всех флагов.

Исходный код проекта вы можете найти на GitFlic.