[Qt教程] 第14篇 2D绘图（四）绘制路径

楼主

发表于 2013-4-27 12:40:52 | 查看: 611| 回复: 0

绘制路径

该文章原创于Qter开源社区（www.qter.org），作者yafeilinux，转载请注明出处！

导语

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

环境：Windows Xp + Qt 4.8.4+QtCreator 2.6.2

一、简单的使用路径

二、复制图形

三、绘制图形时的当前位置

正文

一、简单的使用路径

依然在前面的项目中进行讲解。更改paintEvent()函数如下：

void MainWindow::paintEvent(QPaintEvent *)

{

QPainterPath path;

path.addEllipse(100, 100, 50, 50);

path.lineTo(200, 200);

QPainter painter(this);

painter.setPen(Qt::blue);

painter.setBrush(Qt::red);

painter.drawPath(path);

}

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

二、复制图形

如果只是简单的将几个图形拼接在一起，其实完全没有必要用路径，之所以要引入路径，就是因为它的一个非常有用的功能：复制图形路径。我们在painEvent()函数中继续添加下面几行代码：

QPainterPath path2;

path2.addPath(path);

path2.translate(100,0);

painter.drawPath(path2);

现在运行程序，效果如下图所示。

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

三、绘制图形时的当前位置

1.我们先来看个例子，将paintEvent()函数更改如下：

void MainWindow::paintEvent(QPaintEvent *)

{

QPainterPath path;

path.lineTo(100,100);

path.lineTo(200,100);

QPainter painter(this);

painter.drawPath(path);

}

程序运行效果如下图所示。

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

2.再来看一个例子。将paintEvent()函数的内容更改如下：

void MainWindow::paintEvent(QPaintEvent *)

{

QPainterPath path;

path.addRect(50, 50, 40, 40);

path.lineTo(200, 200);

QPainter painter(this);

painter.drawPath(path);

}

运行程序，效果如下图所示。

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

4.我们也可以使用moveTo()函数来改变当前点的位置。例如将上面的代码更改为：

void MainWindow::paintEvent(QPaintEvent *)

{

QPainterPath path;

path.addRect(50, 50, 40, 40);

//移动到(100, 100)点

path.moveTo(100, 100);

path.lineTo(200, 200);

QPainter painter(this);

painter.drawPath(path);

}

这样当绘制完矩形以后，就会移动到(100, 100)点进行后面的绘制。程序运行效果如下图所示。

结语

这里只讲解了QPainterPath最基本的应用，使用好这个类可以绘制出很多特效图形。如果绘制的两个图形有交集，那么还要涉及到相交部分的填充规则问题，这部分内容可以参考《Qt Creator快速入门》第10章的相关内容。

涉及到的源码下载：

painter_1.zip (2.11 KB, 下载次数: 5)

[Qt教程] 第14篇 2D绘图（四）绘制路径相关推荐

[Qt教程] 第20篇 2D绘图（十）图形视图框架（下）
[Qt教程] 第20篇 2D绘图(十)图形视图框架(下) 楼主发表于 2013-5-4 15:43:02 | 查看: 861| 回复: 0 图形视图框架(下) 版权声明该文章原创于Qter开源社 ...
[Qt教程] 第19篇 2D绘图（九）图形视图框架（上）
[Qt教程] 第19篇 2D绘图(九)图形视图框架(上) 楼主发表于 2013-5-4 15:26:20 | 查看: 1798| 回复: 26 图形视图框架(上) 版权声明导语在前面讲的基本绘 ...
[Qt教程] 第15篇 2D绘图（五）绘制图片
[Qt教程] 第15篇 2D绘图(五)绘制图片楼主发表于 2013-5-2 17:59:00 | 查看: 886| 回复: 3 绘制图片版权声明该文章原创于Qter开源社区(www.qter ...
[Qt教程] 第13篇 2D绘图（三）绘制文字
[Qt教程] 第13篇 2D绘图(三)绘制文字楼主发表于 2013-4-25 23:04:46 | 查看: 720| 回复: 0 绘制文字版权声明该文章原创于Qter开源社区,作者yafei ...
[Qt教程] 第11篇 2D绘图（一）绘制简单图形
[Qt教程] 第11篇 2D绘图(一)绘制简单图形楼主发表于 2013-4-23 12:52:35 | 查看: 1398| 回复: 5 绘制简单图形版权声明该文章原创于Qter开源社区,作者 ...
[Qt教程] 第18篇 2D绘图（八）双缓冲绘图
[Qt教程] 第18篇 2D绘图(八)双缓冲绘图楼主发表于 2013-5-2 22:07:23 | 查看: 789| 回复: 1 双缓冲绘图版权声明该文章原创于Qter开源社区(www.qt ...
[Qt教程] 第17篇 2D绘图（七）涂鸦板
[Qt教程] 第17篇 2D绘图(七)涂鸦板楼主发表于 2013-5-2 21:37:41 | 查看: 1255| 回复: 16 涂鸦板版权声明该文章原创于Qter开源社区(www.qter ...
[Qt教程] 第16篇 2D绘图（六）坐标系统
[Qt教程] 第16篇 2D绘图(六)坐标系统楼主发表于 2013-5-2 20:08:12 | 查看: 738| 回复: 0 坐标系统版权声明该文章原创于Qter开源社区(www.qter ...
[Qt教程] 第12篇 2D绘图（二）渐变填充
[Qt教程] 第12篇 2D绘图(二)渐变填充楼主发表于 2013-4-23 17:59:31 | 查看: 689| 回复: 1 渐变填充版权声明该文章原创于Qter开源社区,作者yafei ...

[Qt教程] 第14篇 2D绘图（四）绘制路径

[Qt教程] 第14篇 2D绘图（四）绘制路径

[Qt教程] 第14篇 2D绘图（四）绘制路径相关推荐

最新文章

热门文章