第四章：深入理解框架之 GUI 模块
Qt 的 GUI 模块（QtGui）提供了图形化应用开发的核心功能，包括 2D 图形绘制、事件处理、字体与颜色管理、图像操作等。GUI 模块是构建丰富用户界面的重要组成部分。本章将从基础到高级，全面讲解 GUI 模块的核心概念和实际应用。
4.1 GUI 模块概述
4.1.1 核心功能
QtGui 模块主要用于图形和多媒体应用的开发，以下是其核心功能：
- 2D 图形绘制： 绘制点、线、矩形、椭圆等基本图形。
- 文本与字体： 管理字体样式、颜色以及文本绘制。
- 图像处理： 支持多种格式图像加载、保存及操作。
- 输入事件： 捕捉键盘、鼠标等用户输入。
4.1.2 GUI 模块的应用场景
QtGui 模块常用于：
- 绘制复杂的自定义组件。
- 实现数据可视化（如图表和图形界面）。
- 图像编辑器、矢量绘图工具等图形应用开发。
4.2 2D 图形绘制
4.2.1 QPainter 基础
QPainter 是 Qt 中的绘图工具类，用于在窗口或组件上绘制内容。
示例：绘制简单图形
#include <QApplication>
#include <QWidget>
#include <QPainter>class MyWidget : public QWidget {
protected:void paintEvent(QPaintEvent *) override {QPainter painter(this);// 设置画笔和画刷painter.setPen(Qt::blue);painter.setBrush(Qt::yellow);// 绘制矩形painter.drawRect(50, 50, 100, 100);// 绘制椭圆painter.setBrush(Qt::red);painter.drawEllipse(200, 50, 100, 100);}
};int main(int argc, char *argv[]) {QApplication app(argc, argv);MyWidget widget;widget.resize(400, 200);widget.show();return app.exec();
}
- 关键点：
setPen()和setBrush()用于设置线条颜色和填充样式。- 绘制形状的方法如
drawRect()和drawEllipse()。
4.2.2 高级绘图
QPainter 还支持复杂绘图功能，例如抗锯齿、渐变填充和变换操作。
示例：渐变填充与抗锯齿
painter.setRenderHint(QPainter::Antialiasing); // 开启抗锯齿
QLinearGradient gradient(50, 50, 150, 150);
gradient.setColorAt(0, Qt::red);
gradient.setColorAt(1, Qt::blue);
painter.setBrush(gradient);
painter.drawEllipse(50, 50, 100, 100);
4.3 文本与字体管理
4.3.1 字体设置
QFont 类用于管理字体样式和大小。
示例：绘制文本并设置字体
#include <QApplication>
#include <QWidget>
#include <QPainter>class FontWidget : public QWidget {
protected:void paintEvent(QPaintEvent *) override {QPainter painter(this);QFont font("Arial", 16, QFont::Bold);painter.setFont(font);painter.drawText(50, 50, "Hello, Qt!");}
};int main(int argc, char *argv[]) {QApplication app(argc, argv);FontWidget widget;widget.resize(200, 100);widget.show();return app.exec();
}
- 关键点：
QFont构造函数支持字体名称、大小、加粗等属性。drawText()用于绘制文本。
4.3.2 字体测量
可以使用 QFontMetrics 测量文本尺寸：
QFontMetrics metrics(font);
int width = metrics.horizontalAdvance("Hello, Qt!");
int height = metrics.height();
4.4 图像处理
4.4.1 加载与显示图像
QPixmap 和 QImage 用于加载和显示图像。
#include <QApplication>
#include <QLabel>
#include <QPixmap>int main(int argc, char *argv[]) {QApplication app(argc, argv);QLabel label;QPixmap pixmap(":/resources/image.png"); // 使用资源文件加载图像label.setPixmap(pixmap);label.show();return app.exec();
}
4.4.2 图像操作
通过 QImage 可进行像素级操作：
#include <QImage>
#include <QColor>QImage image("example.png");
for (int x = 0; x < image.width(); ++x) {for (int y = 0; y < image.height(); ++y) {QColor color = image.pixelColor(x, y);color.setRed(255); // 修改红色通道image.setPixelColor(x, y, color);}
}
image.save("modified.png");
4.5 输入事件处理
4.5.1 鼠标事件
通过重写 mousePressEvent()、mouseMoveEvent() 等方法捕捉鼠标输入。
#include <QApplication>
#include <QWidget>
#include <QMouseEvent>
#include <QDebug>class MouseWidget : public QWidget {
protected:void mousePressEvent(QMouseEvent *event) override {qDebug() << "Mouse pressed at:" << event->pos();}
};int main(int argc, char *argv[]) {QApplication app(argc, argv);MouseWidget widget;widget.resize(400, 300);widget.show();return app.exec();
}
4.5.2 键盘事件
通过重写 keyPressEvent() 捕捉键盘输入。
protected:void keyPressEvent(QKeyEvent *event) override {if (event->key() == Qt::Key_Escape) {qDebug() << "Escape key pressed!";}}
4.6 自定义组件
4.6.1 基本自定义组件
通过继承 QWidget 实现自定义绘制。
#include <QWidget>
#include <QPainter>class CustomWidget : public QWidget {
protected:void paintEvent(QPaintEvent *) override {QPainter painter(this);painter.drawText(rect(), Qt::AlignCenter, "Custom Widget");}
};
4.6.2 添加交互功能
结合鼠标和键盘事件，为自定义组件增加交互能力。
4.7 实战：绘制一个简单的图形编辑器
综合运用本章知识，构建一个支持简单绘图的图形编辑器：
- 支持矩形、圆形的绘制。
- 支持颜色选择。
- 支持保存绘制结果为图片文件。
以下是部分关键代码：
#include <QApplication>
#include <QWidget>
#include <QPainter>
#include <QMouseEvent>
#include <QFileDialog>class SimpleEditor : public QWidget {QPoint start, end;QVector<QRect> shapes;
protected:void mousePressEvent(QMouseEvent *event) override {start = event->pos();}void mouseReleaseEvent(QMouseEvent *event) override {end = event->pos();shapes.append(QRect(start, end));update(); // 触发重绘}void paintEvent(QPaintEvent *) override {QPainter painter(this);painter.setPen(Qt::black);for (const QRect &rect : shapes) {painter.drawRect(rect);}}
};int main(int argc, char *argv[]) {QApplication app(argc, argv);SimpleEditor editor;editor.resize(800, 600);editor.show();return app.exec();
}
4.8 小结
本章详细介绍了 Qt GUI 模块的功能，包括 2D 绘图、字体管理、图像处理以及输入事件处理，并通过综合示例展示了模块的实际应用。通过这些内容，您可以开始构建高质量、交互性强的图形界面应用程序。