Qt中的绘图事件和绘图设置（详细图文教程_附代码）

💪 图像算法工程师，专业从事且热爱图像处理，图像处理专栏更新如下👇：

📝《图像去噪》

📝《超分辨率重建》

📝《数据集》

📝《C++》

📝《Qt》

在 Qt 中，绘图事件和绘图高级设置主要涉及 QPainter 类以及如何通过事件处理机制进行自定义绘图。

一、绘图事件
二、QPainter设置
- [2.1 笔](#2.1 笔)
- [2.2 画刷](#2.2 画刷)
- [2.3 抗锯齿](#2.3 抗锯齿)
- [2.4 变换](#2.4 变换)
- [2.5 路径](#2.5 路径)
三、高级绘图设置
- [3.1 渐变色](#3.1 渐变色)
- [3.2 图像绘制](#3.2 图像绘制)
- [3.3 阴影效果](#3.3 阴影效果)
四、实例
- [4.1 头文件](#4.1 头文件)
- [4.2 源文件](#4.2 源文件)
- [4.3 绘图效果](#4.3 绘图效果)
五、总结

一、绘图事件

Qt 中的绘图事件主要通过 paintEvent() 来实现，paintEvent() 是一个专门处理绘图操作的事件。通常，用户界面控件（如 QWidget）会重写 paintEvent() 来定制其绘制行为。

基本步骤：

复制代码

在控件中重写 paintEvent() 方法。
使用 QPainter 对象进行绘制。
调用 QPainter.end() 来完成绘制过程。

二、QPainter设置

2.1 笔

笔（Pen）：通过 QPainter::setPen() 设置，可以控制绘制路径的颜色、宽度、样式等。

cpp 复制代码

painter.setPen(QPen(Qt::red, 5, Qt::DashLine));  // 红色虚线，宽度 5

2.2 画刷

画刷（Brush）：通过 QPainter::setBrush() 设置填充颜色或纹理。

cpp 复制代码

painter.setBrush(QBrush(Qt::green));  // 填充绿色
painter.setBrush(QBrush(QPixmap(":/images/pattern.png")));  // 使用图案填充

2.3 抗锯齿

抗锯齿（Antialiasing）：通过 setRenderHint() 启用抗锯齿，平滑曲线和直线。

cpp 复制代码

painter.setRenderHint(QPainter::Antialiasing);

2.4 变换

变换（Transformations）：可以进行旋转、平移、缩放等操作。

cpp 复制代码

painter.translate(100, 100);  // 平移
painter.rotate(45);  // 旋转 45 度

2.5 路径

路径（Path）：通过 QPainterPath 创建自定义路径，并使用 drawPath() 绘制。

cpp 复制代码

QPainterPath path;
path.moveTo(50, 50);
path.lineTo(150, 50);
path.lineTo(100, 150);
path.closeSubpath();
painter.drawPath(path);

三、高级绘图设置

3.1 渐变色

渐变色（Gradients）：使用 QLinearGradient、QRadialGradient、QConicalGradient 可以创建渐变效果。

cpp 复制代码

QLinearGradient gradient(0, 0, 200, 200);  // 创建线性渐变
gradient.setColorAt(0, Qt::blue);  // 起点颜色
gradient.setColorAt(1, Qt::red);  // 终点颜色
painter.setBrush(gradient);  // 设置渐变为画刷
painter.drawRect(50, 50, 200, 100);

3.2 图像绘制

图像绘制：使用 QPainter::drawImage() 绘制图片。

cpp 复制代码

QImage image(":/images/pic.png");
painter.drawImage(50, 50, image);

3.3 阴影效果

阴影效果（Shadow Effect）：通过 QGraphicsDropShadowEffect 为控件添加阴影效果。

cpp 复制代码

QGraphicsDropShadowEffect *shadow = new QGraphicsDropShadowEffect(this);
shadow->setOffset(5, 5);
shadow->setBlurRadius(15);
shadow->setColor(QColor(0, 0, 0, 160));  // 半透明黑色阴影
widget->setGraphicsEffect(shadow);

四、实例

应用上面的绘图事件和绘图设置，新建项目工程文件，添加相应代码见下。

4.1 头文件

头文件中代码见下：

cpp 复制代码

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui {
class Widget;
}
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

    // 绘图事件
    void paintEvent(QPaintEvent *);

    int posX = 0;   // 默认的图片位置是0

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H

4.2 源文件

源文件中代码见下：

cpp 复制代码

#include "widget.h"
#include "ui_widget.h"
#include <QPainter>   // 画家类

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    // 点击移动按钮，移动图片
    connect(ui->pushButton,&QPushButton::clicked,[=](){
        posX += 20;
        // 如果要手动调用绘图事件，用update更新
        update();
    });
}

// 绘图事件
void Widget::paintEvent(QPaintEvent *)
{
    // 实例化画家对象，this指定的是绘图设备
    QPainter painter(this);

    // 设置画笔
    QPen pen(QColor(255,0,0));

    // 设置画笔宽度
    pen.setWidth(6);

    // 设置画笔风格
    pen.setStyle(Qt::DotLine);

    // 让画家 使用这个笔
    painter.setPen(pen);

    // 设置画刷，对封闭图形填充颜色
    QBrush brush(Qt::cyan);
    // 设置画刷的风格
    brush.setStyle(Qt::Dense7Pattern);
    // 让画家使用画刷
    painter.setBrush(brush);

    // 画线
    painter.drawLine(QPoint(0,0),QPoint(100,100));

    // 画圆
    painter.drawEllipse(QPoint(100,100),50,50);  // Ellipse是椭圆，QPoint(100,100)表示圆心坐标，第一个50表示rx，第二个50表示ry

    // 设置画笔
    QPen pen_1(QColor(0,0,255));

    // 让画家 使用这个笔
    painter.setPen(pen_1);

    // 画矩形
    painter.drawRect(QRect(20,20,50,50));

    // 画文字
    painter.drawText(QRect(10,200,100,50),"巳巳如意");    // 在矩形框的内部绘画文字

// 高级设置 /
    QPainter painter_1(this);
    painter_1.drawEllipse(QPoint(100,400),50,50);
    // 设置 抗锯齿能力 效率较低
    painter_1.setRenderHint(QPainter::Antialiasing);
    painter_1.drawEllipse(QPoint(200,400),50,50);

    // 画矩形
    painter_1.drawRect(QRect(300,300,50,50));

    // 移动画家
    painter_1.translate(100,0);

    // 保存画家状态
    painter_1.save();

    painter_1.drawRect(QRect(300,300,50,50));

    // 画矩形
    painter_1.drawRect(QRect(300,300,50,50));

    // 移动画家
    painter_1.translate(100,0);

    // 还原画家保存状态
    painter_1.restore();

    painter_1.drawRect(QRect(300,300,50,50));

     利用画家 画资源图片 
    QPainter painter_2(this);

    // posX += 20;

    // painter.drawPixmap(400,0,QPixmap(":/image/fei.png"));

    // 如果超出屏幕，从0开始
    if(posX > this->width())   // 屏幕宽度的获取this->width()，屏幕高度的获取this->height()
    {
        posX = 0;
    }

    painter.drawPixmap(posX,0,QPixmap(":/image/fei.png"));

}

Widget::~Widget()
{
    delete ui;
}

4.3 绘图效果

绘图效果见下：

五、总结

以上就是Qt中的绘图事件和绘图设置方法，希望能帮到你！

感谢您阅读到最后！😊总结不易，多多支持呀🌹 点赞👍收藏⭐评论✍️，您的三连是我持续更新的动力💖

关注下面「视觉研坊」，获取干货教程、实战案例、技术解答、行业资讯！

Qt中的绘图事件和绘图设置（详细图文教程_附代码）

目录

一、绘图事件

二、QPainter设置

2.1 笔

2.2 画刷

2.3 抗锯齿

2.4 变换

2.5 路径

三、高级绘图设置

3.1 渐变色

3.2 图像绘制

3.3 阴影效果

四、实例

4.1 头文件

4.2 源文件

4.3 绘图效果

五、总结