Qt浅谈之十七：飞舞的蝴蝶（GraphicsView框架）

Myth丶恋晨 2022-06-09 00:24 304阅读 0赞

# 一、简介    #

GraphicsView框架结构主要包含三个主要的类QGraphicsScene（容器）、QGraphicsView（视图）、QGraphicsItem（图形项）。QGraphicsScene本身不可见必须通过与之相连的QGraphicsView视口类来显示及与外界进行互操作，主要提供项目的操作接口、传递事件和管理各个项目状态；QGraphicsView提供一个可视的窗口，用于显示场景中的项目，一个场景中可以有多个视口；QGraphicsItem是场景中各个项目的基础类。

# 二、关系图 #

（1）三者间的关系

![SouthEast][]

（2）坐标系统

QGraphicsScene坐标系是以中心为原点(0,0)，QGraphicsView继承自QWidget以窗口的左上角作为自己坐标系的原点，而QGraphicsItem则有自己的坐标系其paint()函数重画时以此坐标系为基准。

![SouthEast 1][]![SouthEast 2][]![SouthEast 3][]

（3）坐标映射

三个坐标系之间的相互转换函数及图形项与图形项之间的转换函数。

![SouthEast 4][]

# 三、详解 #

## 1、运行图 ##

![SouthEast 5][]![SouthEast 6][]

## 2、解析 ##

（1）利用定时器实现QGraphicsItem不停上下飞舞的蝴蝶的动画效果

**\[cpp\]**  [view plain][]   [copy][view plain]

1.  \#include <QGraphicsItem>  
2.  \#include <QObject>  
3.    
4.  **class** Butterfly : **public** QObject, **public** QGraphicsItem  
5.  \{  
6.      Q\_OBJECT  
7.  **public**:  
8.      Butterfly();  
9.      **void** timerEvent(QTimerEvent \*);  
10.     QRectF boundingRect() **const**;  
11.      
12. **protected**:  
13.     **void** paint(QPainter \*painter, **const** QStyleOptionGraphicsItem \*option, QWidget \*widget);  
14.   
15.       
16. **private**:  
17.     **bool** up;  
18.     QPixmap pix\_up;  
19.     QPixmap pix\_down;   
20.       
21.     qreal angle;  
22.   
23. \};

**\[cpp\]**  [view plain][]   [copy][view plain]

1.  **static** **const** **double** PI = 3.14159265358979323846264338327950288419717;  
2.    
3.  Butterfly::Butterfly()  
4.  \{   
5.      setFlag(QGraphicsItem::ItemIsMovable);  
6.    
7.      pix\_up.load(":/images/butterfly1.PNG");  
8.      pix\_down.load(":/images/butterfly2.PNG");  
9.      up = **true**;  
10.     startTimer(100);  
11. \}  
12.   
13. QRectF Butterfly::boundingRect() **const**  
14. \{  
15.     qreal adjust = 8;  
16.     **return** QRectF(-pix\_up.width()/2-adjust,-pix\_up.height()/2-adjust,  
17.                 pix\_up.width()+adjust\*2,pix\_up.height()+2\*adjust);  
18. \}  
19.   
20. **void** Butterfly::paint(QPainter \*painter, **const** QStyleOptionGraphicsItem \*option, QWidget \*widget)  
21. \{  
22.     **if**(up)  
23.     \{  
24.         painter->drawPixmap(boundingRect().topLeft(),pix\_up);  
25.         up = !up;  
26.     \}  
27.     **else**  
28.     \{  
29.         painter->drawPixmap(boundingRect().topLeft(),pix\_down);  
30.         up = !up;  
31.     \}  
32. //    painter->setPen(Qt::NoPen);  
33. //    painter->setBrush(Qt::darkGray);  
34. //    painter->drawEllipse(-7,-7,40,40);  
35.   
36. //    painter->setPen(QPen(Qt::black,0));  
37. //    painter->setBrush(flash ? (Qt::red):(Qt::yellow));  
38. //    painter->drawEllipse(-10,-10,40,40);  
39.           
40. \}  
41.   
42. **void** Butterfly::timerEvent(QTimerEvent \*)  
43. \{  
44.     // edge controll  
45.     qreal edgex = scene()->sceneRect().right()+boundingRect().width()/2;  
46.     qreal edgetop = scene()->sceneRect().top()+boundingRect().height()/2;  
47.     qreal edgebottom = scene()->sceneRect().bottom()+boundingRect().height()/2;  
48.     //qDebug() << scene()->itemsBoundingRect();  
49.     **if** (pos().x() >= edgex)  
50.         setPos(scene()->sceneRect().left(),pos().y());  
51.     **if** (pos().y() <= edgetop)  
52.         setPos(pos().x(),scene()->sceneRect().bottom());  
53.     **if** (pos().y() >= edgebottom)  
54.         setPos(pos().x(),scene()->sceneRect().top());  
55.       
56.     angle += (qrand()%10)/20.0;  
57.     qreal dx = fabs(sin(angle\*PI)\*10.0);  
58.     qreal dy = (qrand()%20)-10.0;  
59.       
60.     setPos(mapToParent(dx,dy));  
61.     update();  
62. \}

分析：在定时器的timeEvent()中对QGraphicsItem进行重画，重画paint()函数中飞舞的蝴蝶是由两幅图片组成，蝴蝶的移动边界做一个限定，dx和dy是相对于蝴蝶的坐标系而言的，调用setPos函数时使用mapToParent()函数映射成场景的坐标。setFlag(QGraphicsItem::ItemIsMovable);使蝴蝶可以通过鼠标移动。

（2）来回移动的星星

**\[cpp\]**  [view plain][]   [copy][view plain]

1.  **class** StarItem : **public** QGraphicsItem  
2.  \{  
3.  **public**:  
4.      StarItem();  
5.    
6.      QRectF boundingRect() **const**;  
7.      **void** paint(QPainter \*painter, **const** QStyleOptionGraphicsItem \*option, QWidget \*widget);  
8.    
9.  **private**:  
10.     QPixmap pix;  
11. \};

**\[cpp\]**  [view plain][]   [copy][view plain]

1.  StarItem::StarItem()  
2.  \{  
3.      pix.load(":/images/star.png");  
4.  \}  
5.    
6.  QRectF StarItem::boundingRect() **const**  
7.  \{  
8.      **return** QRectF(-pix.width()/2,-pix.height()/2,pix.width(),pix.height());  
9.  \}  
10.   
11. **void**  
12. StarItem::paint(QPainter \*painter, **const** QStyleOptionGraphicsItem \*option, QWidget \*widget)  
13. \{  
14.     painter->drawPixmap(boundingRect().topLeft(),pix);  
15. \}

**\[cpp\]**  [view plain][]   [copy][view plain]

1.  \{  
2.      StarItem \*star = **new** StarItem;  
3.      QGraphicsItemAnimation \*anim = **new** QGraphicsItemAnimation;  
4.      anim->setItem(star);  
5.      QTimeLine \*timeLine = **new** QTimeLine(4000);  
6.      timeLine->setCurveShape(QTimeLine::SineCurve);  
7.      timeLine->setLoopCount(0);  
8.      anim->setTimeLine(timeLine);  
9.    
10.     **int** y = (qrand()%400) - 200;  
11.     **for** (**int** i=0; i<400; i++)  
12.     \{  
13.         anim->setPosAt(i/400.0, QPointF(i-200,y));  
14.     \}  
15.     timeLine->start();  
16.     scene->addItem(star);  
17. \}

分析：利用QGraphicsItemAnimation类和QTimeLine实现项目的动画效果（也可使用定时器QTimer结合重绘函数来实现）。

（3）简单正方形

**\[cpp\]**  [view plain][]   [copy][view plain]

1.  \{  
2.      QGraphicsRectItem \*item = **new** QGraphicsRectItem(QRectF(0,0,60,60));  
3.      QPen pen;  
4.      pen.setWidth(3);  
5.      pen.setColor(QColor(qrand()%256,qrand()%256,qrand()%256));  
6.      item->setPen(pen);  
7.      item->setBrush(QColor(qrand()%256,qrand()%256,qrand()%256));  
8.      item->setFlag(QGraphicsItem::ItemIsMovable);  
9.      scene->addItem(item);  
10.     //item->setPos((qrand()%int(scene->sceneRect().width()))-200,(qrand()%int(scene->sceneRect().height()))-200);  
11.     item->setPos(-200, -200);  
12. \}

分析：利用继承QGraphicsItem的类QGraphicsRectItem添加一个正方形的图形项。

http://blog.csdn.net/taiyang1987912/article/details/38681969

[SouthEast]: /images/20220609/a5bb4a3149094a588ac04e8ed1621f8c.png
[SouthEast 1]: https://img-blog.csdn.net/20140819152311590?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGFpeWFuZzE5ODc5MTI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 2]: https://img-blog.csdn.net/20140819152328922?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGFpeWFuZzE5ODc5MTI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 3]: /images/20220609/c4bcb18539a84dfb82bd19fc21252fc7.png
[SouthEast 4]: /images/20220609/4fe153cb6224461aa3f2251990f88756.png
[SouthEast 5]: https://img-blog.csdn.net/20140819160412687?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGFpeWFuZzE5ODc5MTI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 6]: /images/20220609/18d39162ccdc4bf49e8182854a2e36a4.png
[view plain]: http://blog.csdn.net/taiyang1987912/article/details/38681969#

发表评论取消回复

表情：

评论列表（有 0 条评论，304人围观）

还没有评论，来说两句吧...

相关阅读

相关 Django框架之过滤器浅谈

Django零基础学习常用过滤器在模版中，有时候需要对一些数据进行处理以后才能使用。一般在Python中我们是通过函数的形式来完成的。而在模版中，则是通过过滤器来实现的。过

偏执的太偏执、/ 2024年04月01日 16:09/ 0 赞/ 74 阅读

相关 Qt：飞舞的蝴蝶

1、新建Qt GUI应用，基类QMainWindows，取消创建界面 2、项目名称上选择“添加新文件”--->"C++类"-->基类“QObject”,类名"Butterfl

我不是女神ヾ/ 2023年01月12日 11:45/ 0 赞/ 188 阅读

相关 Qt浅谈之十八：GraphicsView框架事件处理

一、简介 GraphicsView支持事件传播体系结构，可以使图元在场景scene中得到提高了已被的精确交互能力。图形视图框架中的事件都是首先由视图进

ゝ一世哀愁。/ 2022年06月10日 05:25/ 0 赞/ 392 阅读

相关 QT开发（四十）——GraphicsView编程

一、QGraphicsScene 1、QGraphicsScene QGraphicsScene继承自QObject，是一个管理图元的容器，与QGraphi

「爱情、让人受尽委屈。」/ 2022年06月09日 12:19/ 0 赞/ 573 阅读

相关 QT开发（三十九）——GraphicsView框架

本文主要翻译自QT 5.6.2GraphicsView官方文档一、GraphicsView框架简介 QT4.2开始引入了Graphics View框架用来取代QT3中

阳光穿透心脏的1/2处/ 2022年06月09日 12:12/ 0 赞/ 229 阅读

相关 Qt的GraphicsView框架

GraphicsView框架是在Qt4.2中引入著名的图形应用开发框架Qt中的 GraphicsView提供了一套基于item的model-view编程方法

心已赠人/ 2022年06月09日 08:24/ 0 赞/ 238 阅读

相关浅谈Qt手势扩展

在目前的[嵌入式][Link 1]领域，Qt 被普遍应用于GUI的设计中。手势识别做为移动设备必不可少的技术，Qt对手势也提供了一些支持。 Qt主要为用户提供了以下几种手

小咪咪/ 2022年06月09日 08:15/ 0 赞/ 430 阅读

相关 Qt浅谈之十七：飞舞的蝴蝶（GraphicsView框架）

一、简介 GraphicsView框架结构主要包含三个主要的类QGraphicsScene（容器）、QGraphicsView（视图）、QGraphi

Myth丶恋晨/ 2022年06月09日 00:24/ 0 赞/ 305 阅读

相关 unity3d：路径点移动，使用dotween（模拟蝴蝶飞舞）

设置路径点 using UnityEngine; using System.Collections; using System.Collections

素颜马尾好姑娘i/ 2022年04月23日 14:26/ 0 赞/ 462 阅读

相关 GraphicsView框架

本文主要翻译自QT 5.6.2GraphicsView官方文档一、GraphicsView框架简介 QT4.2开始引入了Graphics View框架用来取代QT3中

阳光穿透心脏的1/2处/ 2022年04月18日 06:24/ 0 赞/ 212 阅读