QT基础教程(文本绘制)

---

前言

本篇文章我们来讲解一下QT中使用QPainter来绘制文本的案例。

一、普通文本绘制

在 Qt 中，你可以使用 QPainter 类来绘制文本，包括普通文本、格式化文本和自定义文本效果。下面是使用 QPainter 绘制文本的基本方法和示例：

1.绘制普通文本：

使用 QPainter 的 drawText 函数可以绘制普通文本。这个函数的基本用法如下：

void QPainter::drawText(const QRectF &rectangle, int flags, const QString &text);

1
2

rectangle 参数指定了文本绘制的区域。

flags 参数用于指定文本的对齐方式和布局。

text 参数是要绘制的文本字符串。

示例：

void MyWidget::paintEvent(QPaintEvent *event) {
    QPainter painter(this);
    QRectF textRect(10, 10, 200, 100); // 定义文本绘制区域
    QString text = "Hello, Qt!"; // 要绘制的文本

    painter.drawText(textRect, Qt::AlignCenter, text); // 居中绘制文本
}

1
2
3
4
5
6
7
8

2.设置字体和颜色：

你可以使用 QFont 和 QPen 来设置文本的字体和颜色。

示例：

void MyWidget::paintEvent(QPaintEvent *event) {
    QPainter painter(this);
    QRectF textRect(10, 10, 200, 100);
    QString text = "Styled Text";

    QFont font("Arial", 20); // 设置字体
    QPen pen(Qt::blue); // 设置画笔颜色

    painter.setFont(font);
    painter.setPen(pen);

    painter.drawText(textRect, Qt::AlignCenter, text);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

3.绘制格式化文本：

你可以使用 QTextOption 来控制文本的格式化，例如文本的换行、对齐方式等。

示例：

void MyWidget::paintEvent(QPaintEvent *event) {
    QPainter painter(this);
    QRectF textRect(10, 10, 200, 100);
    QString text = "This is a long text that should wrap to the next line.";

    QFont font("Arial", 14);
    QPen pen(Qt::black);

    painter.setFont(font);
    painter.setPen(pen);

    QTextOption textOption;
    textOption.setWrapMode(QTextOption::WordWrap); // 自动换行
    textOption.setAlignment(Qt::AlignCenter); // 居中对齐

    painter.drawText(textRect, text, textOption);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

4.绘制自定义文本效果：

如果你想要绘制具有自定义效果的文本，例如添加阴影、描边等，可以通过多次调用 drawText 来实现。

示例：

void MyWidget::paintEvent(QPaintEvent *event) {
    QPainter painter(this);
    QRectF textRect(10, 10, 200, 100);
    QString text = "Fancy Text";

    QFont font("Arial", 20);
    QPen pen(Qt::white);

    painter.setFont(font);
    painter.setPen(pen);

    // 绘制文本阴影
    painter.drawText(textRect.translated(3, 3), Qt::AlignCenter, text);
    // 绘制文本本体
    painter.drawText(textRect, Qt::AlignCenter, text);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在这个示例中，我们首先绘制了一个带有阴影的文本，然后在同一位置绘制了文本的本体，从而创建了阴影效果。

这些示例演示了如何使用 QPainter 在 Qt 中绘制文本。你可以根据需要调整字体、颜色、对齐方式和格式化选项，以创建各种不同的文本效果。

二、绘制旋转文本

要在Qt中绘制旋转文本，你可以使用QPainter的rotate函数来旋转绘制的文本。以下是一个示例代码，演示如何绘制旋转文本：

#include 
#include 
#include 

class MyWidget : public QWidget {
public:
    MyWidget(QWidget *parent = nullptr) : QWidget(parent) {}

protected:
    void paintEvent(QPaintEvent *event) override {
        QPainter painter(this);
        QRectF textRect(50, 50, 200, 100);
        QString text = "Rotated Text";

        QFont font("Arial", 16);
        QPen pen(Qt::blue);

        painter.setFont(font);
        painter.setPen(pen);

        // 保存绘制状态
        painter.save();

        // 将绘制原点移到文本区域的中心
        painter.translate(textRect.center());

        // 旋转文本
        painter.rotate(45); // 以逆时针方向旋转45度

        // 绘制旋转后的文本
        painter.drawText(-textRect.width() / 2, -textRect.height() / 2, text);

        // 恢复绘制状态
        painter.restore();
    }
};

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    MyWidget widget;
    widget.resize(300, 200);
    widget.show();

    return app.exec();
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

在上面的代码中，我们创建了一个自定义的QWidget子类，并在paintEvent函数中使用QPainter来绘制旋转文本。以下是关于旋转文本的关键步骤：

1.我们首先保存了当前的绘制状态，以便后面可以恢复它。

2.然后，我们将绘制原点移动到文本区域的中心，这是因为旋转操作是以当前绘制原点为中心进行的。

3.接下来，我们使用rotate函数以逆时针方向旋转45度（可以根据需要调整角度）。

4.最后，我们使用drawText函数绘制旋转后的文本，此时的坐标是相对于新的绘制原点（文本区域中心）的。

三、旋转文本升级

要结合定时器实现放大缩小和旋转的文本，你可以使用Qt的定时器来定期更新文本的放大缩小和旋转角度。以下是一个示例代码，演示如何实现这个功能：

#include 
#include 
#include 
#include 

class MyWidget : public QWidget {
public:
    MyWidget(QWidget *parent = nullptr) : QWidget(parent) {
        rotationAngle = 0;
        scaleValue = 1.0;

        // 创建定时器，每隔一定时间触发一次定时器事件
        timer = new QTimer(this);
        connect(timer, SIGNAL(timeout()), this, SLOT(updateAnimation()));
        timer->start(100); // 每100毫秒触发一次
    }

protected:
    void paintEvent(QPaintEvent *event) override {
        QPainter painter(this);
        QRectF textRect(50, 50, 200, 100);
        QString text = "Scaling and Rotating Text";

        QFont font("Arial", 16);
        QPen pen(Qt::blue);

        painter.setFont(font);
        painter.setPen(pen);

        // 保存绘制状态
        painter.save();

        // 将绘制原点移到文本区域的中心
        painter.translate(textRect.center());

        // 旋转文本
        painter.rotate(rotationAngle);

        // 缩放文本
        painter.scale(scaleValue, scaleValue);

        // 绘制旋转和缩放后的文本
        painter.drawText(-textRect.width() / 2, -textRect.height() / 2, text);

        // 恢复绘制状态
        painter.restore();
    }

private slots:
    void updateAnimation() {
        // 更新旋转角度和缩放值
        rotationAngle += 5; // 逆时针旋转5度
        scaleValue += 0.1; // 每次放大0.1倍

        // 限制缩放在1到2之间
        if (scaleValue > 2.0) {
            scaleValue = 1.0;
        }

        // 重新绘制窗口
        update();
    }

private:
    QTimer *timer;
    qreal rotationAngle;
    qreal scaleValue;
};

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    MyWidget widget;
    widget.resize(400, 300);
    widget.show();

    return app.exec();
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

在上述代码中，我们创建了一个定时器，每100毫秒触发一次updateAnimation槽函数。在updateAnimation函数中，我们更新了旋转角度和缩放值，然后调用update函数来触发窗口重绘。

在paintEvent函数中，我们使用旋转和缩放的值来绘制文本。通过定时器不断更新这些值，文本就会以动画效果旋转和缩放。

这样，你就可以在Qt中创建一个带有放大缩小和旋转动画的文本。

总结

QPainter是Qt框架中的一个关键绘图工具，用于在QWidget和其他绘图设备上进行2D图形绘制。以下是关于QPainter的总结：

1.绘图设备：QPainter可以用于在各种绘图设备上进行绘制，包括QWidget、QPixmap、QImage等。这使得你可以将图形绘制到屏幕上、保存为图像文件，或者用于其他用途。

2.基本绘图操作：QPainter支持各种基本绘图操作，如绘制线条、矩形、椭圆、多边形和文本。你可以选择不同的画笔和画刷样式来自定义图形的外观。

3.坐标系统：QPainter使用笛卡尔坐标系统，原点通常位于左上角，x轴水平向右，y轴垂直向下。你可以使用translate函数来改变原点位置，以及使用scale和rotate函数来缩放和旋转绘图。

4.状态管理：QPainter允许你保存和恢复绘图状态，这包括坐标变换、画笔和画刷设置等。这对于在一组图形之间共享状态非常有用。

5.文本绘制：你可以使用QPainter在绘图设备上绘制文本，可以自定义文本的字体、大小、颜色等属性。文本绘制支持水平和垂直对齐方式。

6.图像绘制：QPainter可以绘制图像，包括从文件加载的图像或通过绘制操作创建的图像。这对于在绘图中使用图像元素很有用。

7.渐变和图案填充：QPainter支持渐变和图案填充，使你能够创建更复杂的背景和图形效果。

8.蒙版操作：你可以使用QPainter的蒙版操作来实现复杂的绘图效果，例如擦除、混合和遮罩。

9.自定义绘图：除了基本绘图操作外，你还可以自定义绘图操作，绘制任何你需要的图形和效果。

QPainter是Qt中强大的2D绘图工具，提供了广泛的绘图功能，允许你创建各种复杂的图形和界面元素。通过掌握QPainter，你可以在Qt应用程序中实现自定义的绘图和图形效果。

本篇文章就讲解到这里，掌握painter后我们就可以随心所欲的绘制自己想要的内容了。