QT跨平台应用程序开发框架（14）—— 绘图API

原创已于 2025-08-13 15:07:22 修改 · 836 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#qt #开发语言

于 2025-07-30 14:48:44 首次发布

Qt跨平台应用程序开发框架专栏收录该内容

14 篇文章

订阅专栏

目录

一，介绍

二，使用

2.1 绘制线段

2.2 绘制圆形

2.3 绘制文字

2.4 设置画笔

2.5 设置画刷

2.6 绘制图片

一，介绍

Qt 已经有了很多内置的控件，其实它们本质上也是“画”出来的，我们前面学习的各种控件，其实都是大佬们已经“画”好了的，放进库里我们直接用就行

但是，也总会有各种非常规场景，从而导致内置的控件不够用，所以有些时候我们需要更强的“自定义”能力，比如事件机制，就是这样

Qt 提供了画图相关的 API，允许我们在窗口上绘制任意的图形形状，来完成更复杂的界面设计（实际开发中大部分情况下不会用，老样子，要用的时候直接查资料现学现用）

绘图 API 核心类如下：

类	说明
QPainter	"绘画者" 用来绘图的对象，提供⼀系列 drawXXX 方法，允许我们绘制各种图形
QPaintDevice	"画板" 描述了 QPainter 把图形画到哪个对象上，QWidget 也是一种QPaintDevice（QWidget是QPaintDevice的子类）
QPen	"画笔" 描述了 QPainter 画出来的线是什么样的
QBrush	"画刷" 描述了 QPainter 填充一个区域是什么样的

绘图 API 的使用，一般不会在 QWidget 类的构造函数中，要放到 paintEvent 事件中

原因：和 paintEvent 对应的有一个 QPaintEvent 事件，在下面情况中会触发：

控件首次创建的时候，比如往 QWidget 上画画，在 QWidget 创建之前画的东西不会生效，创建之后就会显示出来
控件被遮挡，再解除遮挡
窗口最小化，再恢复
控件大小发生变化时
主动调用 repaint() 或 update() 方法
......

如果把绘图 API 放到构造函数中，一旦出现上面的情况，界面的绘制效果就会有偏差了

二，使用

2.1 绘制线段

先在头文件声明：

后续我们绘图的各种操作就放到这里来执行，如下是绘制直线：

void Widget::paintEvent(QPaintEvent *event)
{
    (void) event;
    QPainter painter(this); //这个this不是父对象，是指定绘制的设备（在什么东西上画），在这里不是指 QWidget，而是指整个窗口

    //画线段
    painter.drawLine(20, 20, 200, 20); //从(20, 20)的位置开始画，画到(200, 20)停止，也可以用 QPoint 来代替坐标
    painter.drawLine(20, 20, 20, 200); //这个是竖着画
    painter.drawLine(QPoint(20, 20), QPoint(100, 100)); //斜着画
}

2.2 绘制圆形

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

    painter.drawEllipse(QPoint(100, 100), 50, 50); //画一个正圆形
    painter.drawEllipse(QPoint(200, 200), 200, 50); //可以画椭圆，后面两个参数是外界矩形的高度宽度
}

2.3 绘制文字

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

    //设置字体
    QFont font("微软雅黑", 24);
    painter.setFont(font);

    //设置画笔颜色
    painter.setPen(Qt::blue);

    //画字
    painter.drawText(QRect(100, 200, 600, 150), "努力就会有回报");
    //前面两个参数是文字显示的矩形的左上角起始位置，后面两个参数是边框矩形的宽度和高度
}

2.4 设置画笔

上面我们使用 setPen 设置了画笔颜色，同样的，我们也可以设置画笔的宽度和风格，如下实例

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

    QPen pen;
    pen.setColor(QColor(255, 0, 0)); //设置画笔颜色
    pen.setWidth(5); //设置线条粗细，单位px
    pen.setStyle(Qt::DashLine); //设置线条风格

    painter.setPen(pen);
    painter.drawEllipse(QPoint(100, 100), 50, 50); //画一个圆形
}

2.5 设置画刷

画刷使用 QBrush 来描述，大多数情况下画刷用于填充，具有样式、颜色、渐变以及纹理等属性

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

    QPen pen;
    pen.setColor(QColor(255, 0, 0)); //设置画笔颜色
    pen.setWidth(5); //设置线条粗细，单位px
    pen.setStyle(Qt::DashLine); //设置线条风格
    painter.setPen(pen);

    QBrush brush;
    brush.setColor(QColor(0, 255, 0));
    brush.setStyle(Qt::SolidPattern); //设置填充样式
    painter.setBrush(brush); //让其能使用画刷

    painter.drawEllipse(200, 400, 400, 100);
}

可以设置的部分样式如下：

2.6 绘制图片

Qt 提供了四个类来处理图像数据：QImage、QPixmap、QBitmap和QPicture，它们都是常用的绘图设备

QImage：主要用来进行 I/O 处理，它对I/O处理操作进行了优化，而且可以用来直接访问和操作像素
QPixmap：主要用来在屏幕上显示图像，它对在屏幕上显示图像进行了优化
QBitmap：是 QPixmap 的子类，用来处理颜色深度为1的图像，即只能显示黑白两种颜色
QPicture：用来记录并重演 QPainter 命令

下面来演示一下 QPixmap 绘制图片：

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

    //painter.translate(100, 100); //设置图片位置，左上角

    //从(0, 0) 开始画图，图片尺寸和原图一样
    painter.drawPixmap(0, 0, QPixmap(":/deepseek.png"));

    //从(300, 400) 开始画图，尺寸变为50 * 60
    painter.drawPixmap(300, 400, 50, 60, QPixmap(":/deepseek.png"));
}