Qt之图形（绘制文本）

简述

前面我们讲解了Qt图形的基本绘制，其中包括： 绘制文本、直线、直线、矩形、弧线、椭圆、多边形、图片，以及其它一些高级用法，比如：渐变、转换等。

本节我们来详细讲解文字的绘制。主要通过QPainter的darwText()函数来实现，里面包含多个重载函数，其中，可以通过QRect来指定绘制的区域，也可以通过QPoint来指定绘制的起始点。

QFont类可以辅助设置文本的大小、粗细、字符间距等，然后使用setFont()来设置。
QFontInfo类用来获取字体的信息，可以通过fontInfo()函数来获取。

也可以使用更多其它辅助类来实现更好的效果，比如：QTextOption、QFontMetrics。其中QTextOption可以对文本换行，并设置换行方式以及文本显示方向等效果。QFontMetrics可以计算文本长度，进行特殊处理（比如：显示…）。

• 简述
• 基本绘制
  • 效果
  • 源码
• 文本位置
  • 效果
  • 源码
• 显示不全
  • 效果
  • 源码
  • QTextOption
    • 效果
    • 源码
  • QFontMetrics
    • 效果
    • 源码
• 字体
  • 效果
  • 源码

基本绘制

效果

源码

void MainWindow::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);

    QPainter painter(this);

    // 设置画笔颜色
    painter.setPen(QColor(0, 160, 230));

    // 绘制区域为当前界面的整个区域（默认-左上角开始）
    painter.drawText(rect(), QStringLiteral("一去丶二三里"));

    // 绘制区域从x坐标100，y坐标100处开始
    painter.drawText(100, 100, QStringLiteral("青春不老，奋斗不止！"));

    // 绘制区域从坐标点(20, 200)处开始
    painter.drawText(QPoint(20, 200), QStringLiteral("纯正开源之美，有趣、好玩、靠谱。。。"));
}

drawText的重载函数比较，这里我们先介绍常用的几种绘制方式。

文本位置

效果

源码

void MainWindow::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);

    QPainter painter(this);

    // 设置画笔颜色
    painter.setPen(QColor(0, 160, 230));

    // 绘制区域为当前界面的整个区域（居中）
    painter.drawText(rect(), Qt::AlignCenter, QStringLiteral("一去丶二三里"));
}

从前面来看，无论我们使用哪种方式，首先都需要控制文本的绘制区域-QRect或起始点QPoint，然后可以根据对齐方式来辅助控制位置的显示-左对齐、右上对齐、居中对齐等。

显示不全

下面，我们先来看一个显示不全的效果图。

效果

源码

void MainWindow::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);

    QPainter painter(this);

    // 设置画笔颜色
    painter.setPen(QColor(0, 160, 230));

    painter.drawText(rect(), Qt::AlignCenter, QStringLiteral("青春不老，奋斗不止！-纯正开源之美，有趣、好玩、靠谱。。。"));
}

有时，我们会出现类似情况，显示不全，这时我们很烦恼，没关系，我们可以使用文本选项QTextOption来换行，也可以使用QFontMetrics来显示…。

QTextOption

效果

源码

void MainWindow::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);

    QPainter painter(this);

    // 设置画笔颜色
    painter.setPen(QColor(0, 160, 230));

    QTextOption option(Qt::AlignLeft | Qt::AlignVCenter);
    option.setWrapMode(QTextOption::WordWrap);

    painter.drawText(rect(), QStringLiteral("青春不老，奋斗不止！-纯正开源之美，有趣、好玩、靠谱。。。"), option);
}

文本过长，QTextOption可以帮助我们换行，也可以设置对齐方式，除此以外，还可以设置换行方式以及文本显示方向等效果。

QFontMetrics

效果

源码

void MainWindow::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);

    QPainter painter(this);

    // 设置画笔颜色
    painter.setPen(QColor(0, 160, 230));

    QFontMetrics fm = painter.fontMetrics();
    QString strText = QStringLiteral("青春不老，奋斗不止！-纯正开源之美，有趣、好玩、靠谱。。。");
    QString strElidedText = fm.elidedText(strText, Qt::ElideRight, 200, Qt::TextShowMnemonic);

    painter.drawText(rect(), Qt::AlignCenter, strElidedText);
}

如果文本过长，我们又不想换行，只想把其中一部分省略为…，那么我们可以通过QFontMetrics来实现。这里，当长度超过200px时，对文本右侧设置…。

字体

效果

源码

void MainWindow::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);

    QPainter painter(this);

    QTransform transform;
    transform.rotate(45);

    // 设置画笔颜色
    painter.setPen(QColor(0, 160, 230));

    QFont font;
    font.setFamily("Microsoft YaHei");
    // 大小
    font.setPointSize(16);
    // 斜体
    font.setItalic(true);
    // 设置下划线
    font.setUnderline(true);
    // 设置上划线
    font.setOverline(true);
    // 设置字母大小写
    font.setCapitalization(QFont::SmallCaps);
    // 设置字符间距
    font.setLetterSpacing(QFont::AbsoluteSpacing, 20);

    // 使用字体
    painter.setFont(font);

    // 获取字体信息
    QFontInfo info = painter.fontInfo();
    info.family();
    info.italic();

    // 转换
    painter.setTransform(transform);

    painter.drawText(rect(), QStringLiteral("一去丶二三里"));
}

通过QFont我们可以很轻易的设置文本的大小、字体间距等效果，再根据fontInfo()来获取字体信息QFontInfo。当然，我们也可以添加更多效果，比如：通过QTransform来实现转换，这里我们旋转了45度。