Qt实现2D绘图

太过爱你忘了你带给我的痛 2024-04-08 09:36 75阅读 0赞

#### 一、介绍 ####

Qt中提供了强大的2D绘图系统，可以使用相同的API在屏幕和绘图设备上进行绘制，它主要基于`QPainter`、`QPaintDevice`和`QPaintEngine`这三个类。其中`QPainter`用来执行绘图操作；`QPaintDevice`提供绘图设备，它是一个二维空间的抽象，可以使用`QPainter`在其上进行绘制；`QPaintEngine`提供了一些接口，可以用于`QPainter`在不同的设备上进行绘制。

#### 二、绘制一条直线 ####

1．新建Qt Gui应用，项目名称为`painter_1`，类信息界面不用修改，即类名为`MainWindow`，基类为`QMainWindow`。

2．在`mainwindow.h`文件中添加重绘事件处理函数的声明：

protected:
        void paintEvent(QPaintEvent *);override;

所有的绘制操作都要在这个函数里面完成。

3．下面到`mainwindow.cpp`文件中先需要添加头文件包含：

#include <QPainter>

然后添加该函数的定义：

void MainWindow::paintEvent(QPaintEvent *)
    {
        QPainter painter(this);
        QPen pen;
        pen.setColor(QColor(Qt::blue)); //设置笔颜色
        pen.setWidth(4); //设置笔宽度
        painter.setPen(pen); //设置为要绘制的笔
        painter.drawLine(QPoint(0, 0), QPoint(100, 100));//画线
    
    }

这里首先为该部件创建了一个`QPainter`对象，用于后面的绘制。然后使用`drawLine()`函数绘制了一条线段，线段的起点为`(0, 0)`，终点为`(100, 100)` ，这里的单位是像素。效果如下图所示。

![92e48a6e2a69422696619180e1ed9e45.png][]

#### 三、画笔与画刷 ####

我们将`paintEvent(`)函数的内容更改如下：

void MainWindow::paintEvent(QPaintEvent *)
    {
        QPainter painter(this);
        QPen pen; //画笔
        pen.setColor(QColor(255, 0, 0));
        QBrush brush(QColor(0, 255, 0, 125)); //画刷
        painter.setPen(pen); //添加画笔，绘制出矩形框
        painter.setBrush(brush); //添加画刷，给矩形上色
        painter.drawRect(50, 50, 200, 100); //开始绘制矩形
    }

运行

![fd8540b2e9914bb3a353f5192466b76f.png][]

画笔还有许多其他的设置，可以查看该类的帮助文档。例如，可以使用`pen.setStyle()`来设置画笔样式，可用的画笔样式如下图所示。

![918f3667f42444c1bdff3b611d10d022.png][]

画刷也有很多其他设置，这个也可以查看其帮助文档。在Qt中为画刷提供了一些可用的样式，可以使用`setStyle()`函数来设置。如下图所示。

![dca830e90cc24fa589e0109424631be4.png][]

#### 四、绘制弧线 ####

我们将`paintEvent()`函数更改如下：

void MainWindow::paintEvent(QPaintEvent *)
    {
        QRectF rectangle(10.0, 20.0, 80.0, 60.0); //矩形
        int startAngle = 30 * 16;     //起始角度
        int spanAngle = 120 * 16;   //跨越度数
        QPainter painter(this);
        painter.drawArc(rectangle, startAngle, spanAngle);
    }

![c9c35897490b4d9db48b05156ed73aa0.png][]

参考：

[第11篇 2D绘图（一）绘制简单图形 · Qt 快速入门系列教程][11_ 2D_ _ Qt]

[QPainter详解\_友善啊，朋友的博客-CSDN博客\_qpainter][QPainter_-CSDN_qpainter]

[92e48a6e2a69422696619180e1ed9e45.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/0882b342e39b4de9b9a83c924e3ee6f0.png
[fd8540b2e9914bb3a353f5192466b76f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/1cb97ea7977448fbbe418decea39e982.png
[918f3667f42444c1bdff3b611d10d022.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/e4a64dac4139435cbcfa84d4372b3088.png
[dca830e90cc24fa589e0109424631be4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/4caa99763b78406c979ca867b0c34940.png
[c9c35897490b4d9db48b05156ed73aa0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/4e85a9eed0c04f67855888a77a3f1fa9.png
[11_ 2D_ _ Qt]: http://shouce.jb51.net/qt-beginning/15.html
[QPainter_-CSDN_qpainter]: https://blog.csdn.net/kenfan1647/article/details/116266875