Qt——文本绘制技巧

1.QPainter拥有绘制文本的能力

drawText（拥有多个重载形式）
常见调用方式
- p.drawText(10, 10, "hello");
  - 在坐标（10，10）处绘制文本
- p.drawText(0, 0, 100, 30, Qt::AlignCenter, "hello")
  - 在矩形范围（0，0，100，30）中以居中对齐的方式绘制文本

2.文本绘制参数

字体（QFont），颜色（QColor）
- 控制文本大小、风格、颜色等
坐标（QPoint），角度（rotate）
- 文本绘制的位置（对齐该坐标）
- 以绘制坐标为圆心顺时针旋转

Widget.h

复制代码

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

class Widget : public QWidget
{
    Q_OBJECT

protected:
    void paintEvent(QPaintEvent *);

public:
    explicit Widget(QWidget *parent = nullptr);
    ~Widget() override;
};
#endif // WIDGET_H

Widget.cpp

复制代码

#include "Widget.h"
#include <QPainter>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{

}

void Widget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);

    painter.save(); //保存之前的状态（颜色、字体、角度）

    painter.setPen(Qt::black);
    painter.setFont(QFont("Arial", 16));
    painter.rotate(0);
    painter.drawText(30, 40, "Hello");

    painter.setPen(Qt::red);
    painter.setFont(QFont("Comic Sans MS", 20));
    painter.rotate(20);
    painter.drawText(30, 40, "Hello");

    painter.restore(); //恢复保存时的状态
    painter.drawText(130, 140, "hello");

}
Widget::~Widget() = default;

运行结果：

3.示例：绘制一个字体从屏幕中间慢慢放大的效果

步骤：

在主窗口中绘制文本
将文本中心绘制于窗口中心（width()/2, height()/2）
动画效果通过连续控制字体参数完成（Font）
通过计时器强行更新文本绘制（QTimer）

小技巧：通过QFontMetrics获取字符串在指定字体下的宽度和高度

//指定字体

QFontMetrics metrics(font);

//获取指定字体下相应字符串宽度

int w = metrics.width(text);

//获取指定字体的字符高度

int h = metrics.height();

所以坐标计算为：x = width/2 - w/2 y = height/2 - h/2

Widget.h

复制代码

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QTimer>

class Widget : public QWidget
{
    Q_OBJECT

    int m_sizeFactor;
    QTimer m_timer;

protected slots:
    void onTimeout();
protected:
    void paintEvent(QPaintEvent* );
public:
    explicit Widget(QWidget *parent = nullptr);
    ~Widget() override;
};
#endif // WIDGET_H

Widget.cpp

复制代码

#include "Widget.h"
#include <QPainter>
#include <QFontMetrics>
#include <QPoint>
#include <QFont>
#include <QRect>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    m_sizeFactor = 0;
    m_timer.setParent(this);

    connect(&m_timer, SIGNAL(timeout()), this, SLOT(onTimeout()));

    //定时器启动后，每 50ms 触发一次 timeout 信号，调用一次 onTimeout ()
    m_timer.start(50);
}

void Widget::onTimeout()
{
    update();
}

void Widget::paintEvent(QPaintEvent* )
{
    QPainter painter;
    const QString text = "Hello";
    QFont font("Comic Sans MS", 5 + (m_sizeFactor++) % 100);
    //用来计算当前字体下文字的实际宽、高
    QFontMetrics metrics(font);
    const int w = metrics.width(text);
    const int h = metrics.height();
    // 计算文字绘制矩形位置：水平居中、竖直居中，矩形宽高等于文字宽高
    QRect rect((width()-w)/2, (height()-w)/2, w, h);
    
    // 指定绘图设备为当前窗口 this，正式开始绘图
    painter.begin(this);
    painter.setPen(Qt::blue);
    painter.setFont(font);
    painter.drawText(rect, Qt::AlignCenter, text);
    painter.end();
}
Widget::~Widget() = default;