【Qt】2D绘图之绘制路径

男娘i 2022-11-12 10:52 345阅读 0赞

## 00. 目录 ##

### 文章目录 ###

*   *  00. 目录
     *  01. 概述
     *  02. 开发环境
     *  03. 绘制简单路径
     *  04. 复制图形路径
     *  05. 位置问题探讨
     *  06. 附录

## 01. 概述 ##

如果要绘制一个复杂的图形，尤其是要重复绘制这样的图形，那么可以使用QPainterPath类，然后使用QPainter::drawPath()来进行绘制。QPainterPath类为绘制操作提供了一个容器，可以用来创建图形并且重复使用。一个绘图路径就是由多个矩形、椭圆、线条或者曲线等组成的对象，一个路径可以是封闭的，例如矩形和椭圆；也可以是非封闭的，例如线条和曲线。

## 02. 开发环境 ##

**Windows系统**：Windows10

**Qt版本**：Qt5.15或者Qt6

## 03. 绘制简单路径 ##

程序示例

void Widget::paintEvent(QPaintEvent *)
    { 
        QPainter painter(this);
    
        QPainterPath path;
    
        //绘制圆形
        path.addEllipse(100, 100, 50, 50);
    
        //绘制直线
        path.moveTo(100, 100);
        path.lineTo(200, 200);
    
        painter.setPen(Qt::green);
        painter.setBrush(Qt::red);
        //绘制路径
        painter.drawPath(path);
    }

当创建一个QPainterPath对象后，可以使用lineTo()、arcTo()、cubicTo()和quadTo()等函数将直线或者曲线添加到路径中。运行程序，效果如下图所示。

![在这里插入图片描述][20210323203113870.png]

## 04. 复制图形路径 ##

如果只是简单的将几个图形拼接在一起，其实完全没有必要用路径，之所以要引入路径，就是因为它的一个非常有用的功能：复制图形路径。

程序示例：

执行结果:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70]

对于已经绘制好的路径，可以非常简单地进行重复绘制。

## 05. 位置问题探讨 ##

程序示例一：

void Widget::paintEvent(QPaintEvent *)
    { 
        QPainterPath path;
    
        path.lineTo(100, 100);
    
        path.lineTo(200, 100);
    
        QPainter painter(this);
    
        painter.drawPath(path);
    
    }

可以看到，创建路径后，默认是从(0, 0)点开始绘制的，当绘制完第一条直线后当前位置是(100, 100)点，从这里开始绘制第二条直线。绘制完第二条直线后，当前位置是(200, 100)。

执行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70 1]

程序示例二：

void Widget::paintEvent(QPaintEvent *)
    { 
        QPainterPath path;
        path.addRect(50, 50, 40, 40);
    
        path.lineTo(0, 0);
    
        QPainter painter(this);
    
        painter.setPen(QColor(Qt::red));
        painter.drawPath(path);
    
    }

执行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70 2]

当绘制完矩形后，当前位置在矩形的左上角顶点，然后从这里开始绘制后面的直线。

程序示例三:

void Widget::paintEvent(QPaintEvent *)
    { 
        QPainterPath path;
        path.addRect(50, 50, 40, 40);
    
        //改变当前位置为(100, 100)
        path.moveTo(100, 100);
    
        path.lineTo(0, 0);
    
        QPainter painter(this);
    
        painter.setPen(QColor(Qt::red));
        painter.drawPath(path);
    
    }

执行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70 3]

## 06. 附录 ##

源码下载：[【Qt】2D绘图之绘制路径.rar][Qt_2D_.rar]

[20210323203113870.png]: /images/20221022/e3932d7bbb3741b79ffa9f657529829f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70]: /images/20221022/3647879a01314de59fd39479816b63f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70 1]: /images/20221022/98938f893aec48668a7b4d60a56339ee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70 2]: /images/20221022/cba42e1b5079433f9d18b29d87ca5a43.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70 3]: /images/20221022/a93c54545f6c440a9a8cb859c99923ad.png
[Qt_2D_.rar]: https://download.csdn.net/download/dengjin20104042056/16072294