QT基础教程(文本绘制)

举报
yd_274589494 发表于 2023/09/24 18:29:59 2023/09/24
【摘要】 @TOC 前言本篇文章我们来讲解一下QT中使用QPainter来绘制文本的案例。 一、普通文本绘制在 Qt 中,你可以使用 QPainter 类来绘制文本,包括普通文本、格式化文本和自定义文本效果。下面是使用 QPainter 绘制文本的基本方法和示例:1.绘制普通文本:使用 QPainter 的 drawText 函数可以绘制普通文本。这个函数的基本用法如下:void QPainter::...

@TOC


前言

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

一、普通文本绘制

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

1.绘制普通文本:

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

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

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); // 居中绘制文本
}

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);
}

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);
}

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);
}

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

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

二、绘制旋转文本

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

#include <QApplication>
#include <QWidget>
#include <QPainter>

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();
}

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

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

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

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

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

三、旋转文本升级

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

#include <QApplication>
#include <QWidget>
#include <QPainter>
#include <QTimer>

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();
}

在上述代码中,我们创建了一个定时器,每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后我们就可以随心所欲的绘制自己想要的内容了。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。