飞舞的蝴蝶（GraphicsView框架）

飞舞的蝴蝶（GraphicsView框架）

 

一、简介

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

二、关系图

（1）三者间的关系

（2）坐标系统

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

（3）坐标映射

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

三、详解

1、运行图

 

2、解析

 

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

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. };  

 

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）来回移动的星星

 

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. };  

 

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. }  

 

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）简单正方形

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添加一个正方形的图形项。

 

注意编译时会出现如下警告：

Warning::Class Butterfly imlements the interface QGraphicsItem but does not list it in Q_INTERFACES　；qobject_cast to QGraphicsItem will not work

原因：

QGraphicsItem的paint方法是在item被重绘时调用的，除了调用这个接口函数外，他还需要调用另外几个接口函数，你是不是在类中没有写呀？

需要添加的函数列表：
     QRectF boundingRect() const;
    QPainterPath shape() const;
    virtual void paint(QPainter *painter, const QStyleOptionGraphicsItem *item, QWidget *widget);
    void mousePressEvent(QGraphicsSceneMouseEvent *event);
    void mouseMoveEvent(QGraphicsSceneMouseEvent *event);
    void mouseReleaseEvent(QGraphicsSceneMouseEvent *event);
    void contextMenuEvent(QGraphicsSceneContextMenuEvent *event);
    void hoverEnterEvent(QGraphicsSceneHoverEvent * event);
    void hoverLeaveEvent(QGraphicsSceneHoverEvent * event);

 

 

一、简介

       GraphicsView支持事件传播体系结构，可以使图元在场景scene中得到提高了已被的精确交互能力。图形视图框架中的事件都是首先由视图进行接收，然后传递给场景，再由场景给相应的图形项。

       对于键盘鼠标事件，scene会传递给获得焦点的图形项。如果场景没有获得焦点，那键盘事件会丢弃；如果调用场景setFocus()或者场景中的一个图形项获得了焦点，那么场景会自动获得焦点；如果场景丢失了焦点（如调用clearFocus()）而其中一个图形项获得焦点那场景会保存这个图形项的焦点信息。

       图形项默认无法接收悬停事件，可以使用QGraphicsItem的setAcceptHoverEvents()函数使图形项可以接收悬停事件。 

二、运行图

（1）五个图形项的运行图如下图所示。

三、详解

1、QGraphicsScene

 

1. #ifndef MYSCENE_H  
2. #define MYSCENE_H  
3.   
4. #include <QGraphicsScene>  
5. #include <QGraphicsSceneMouseEvent>  
6. #include <QPaintEvent>  
7. #include <QKeyEvent>  
8.   
9. class MyScene : public QGraphicsScene  
10. {  
11.     Q_OBJECT  
12. public:  
13.     explicit MyScene(QObject *parent = 0);  
14.   
15. protected:  
16.     void keyPressEvent(QKeyEvent *event);  
17.     void mousePressEvent(QGraphicsSceneMouseEvent *event);  
18.   
19. signals:  
20.   
21. public slots:  
22.   
23. };  
24.   
25. #endif // MYSCENE_H  

 

1. #include "myscene.h"  
2.   
3. MyScene::MyScene(QObject *parent) :  
4.     QGraphicsScene(parent)  
5. {  
6.     clearFocus();  
7. }  
8.   
9. void MyScene::keyPressEvent(QKeyEvent *event)  
10. {  
11.     qDebug("*********MyScene::keyPressEvent***************");  
12.     return QGraphicsScene::keyPressEvent(event);  
13. }  
14.   
15. void MyScene::mousePressEvent(QGraphicsSceneMouseEvent *event)  
16. {  
17.     qDebug("*********MyScene::mousePressEvent***************");  
18.     QGraphicsScene::mousePressEvent(event);  
19. }  

 

2、QGraphicsView

1. #ifndef MYVIEW_H  
2. #define MYVIEW_H  
3.   
4. #include <QGraphicsView>  
5.   
6. class MyView : public QGraphicsView  
7. {  
8.     Q_OBJECT  
9. public:  
10.     explicit MyView(QWidget *parent = 0);  
11.   
12. protected:  
13.     void keyPressEvent(QKeyEvent *event);  
14.     void mousePressEvent(QMouseEvent *event);  
15.     void paintEvent(QPaintEvent * event);  
16.     void mouseMoveEvent(QMouseEvent *event);  
17. signals:  
18.   
19. public slots:  
20.   
21. };  
22.   
23. #endif // MYVIEW_H  

 

1. #include "myview.h"  
2. #include <QKeyEvent>  
3.   
4. MyView::MyView(QWidget *parent) :  
5.     QGraphicsView(parent)  
6. {  
7. }  
8.   
9. void MyView::keyPressEvent(QKeyEvent *event)  
10. {  
11.    qDebug("*********MyView::keyPressEvent***************");  
12.     switch (event->key())  
13.     {  
14.     case Qt::Key_Left :  
15.         scale(1.2, 1.2);  
16.         break;  
17.     case Qt::Key_Right :  
18.         scale(1 / 1.2, 1 / 1.2);  
19.         break;  
20.     case Qt::Key_Up :  
21.         rotate(30);  
22.         break;  
23.     }  
24.     QGraphicsView::keyPressEvent(event);  
25. }  
26.   
27. void MyView::mousePressEvent(QMouseEvent *event)  
28. {  
29.     qDebug("************MyView::mousePressEvent*****************");  
30.     QGraphicsView::mousePressEvent(event);  
31. }  
32.   
33. void MyView::paintEvent(QPaintEvent *event)  
34. {  
35.     qDebug("************MyView::paintEvent*****************");  
36.     QGraphicsView::paintEvent(event);  
37. }  
38.   
39. void MyView::mouseMoveEvent(QMouseEvent *event)  
40. {  
41.     //qDebug("************MyView::mouseMoveEvent*****************");  
42.     QGraphicsView::mouseMoveEvent(event);  
43. }  

3、QGraphicsItem

1. #ifndef MYITEM_H  
2. #define MYITEM_H  
3.   
4. #include <QGraphicsItem>  
5. #include <QGraphicsSceneEvent>  
6. class MyItem : public QGraphicsItem  
7. {  
8. public:  
9.     MyItem();  
10.     QRectF boundingRect() const;  
11.     void paint(QPainter *painter, const QStyleOptionGraphicsItem *option,  
12.                   QWidget *widget);  
13.     void setColor(const QColor &color) { brushColor = color; }  
14.   
15. protected:  
16.     void keyPressEvent(QKeyEvent *event);  
17.     void mousePressEvent(QGraphicsSceneMouseEvent *event);  
18.     void hoverEnterEvent(QGraphicsSceneHoverEvent *event);  
19.     void hoverLeaveEvent (QGraphicsSceneHoverEvent * event);  
20.     void contextMenuEvent(QGraphicsSceneContextMenuEvent *event);  
21.     void mouseMoveEvent(QGraphicsSceneMouseEvent *event);  
22. private:  
23.     QColor brushColor;  
24.   
25. };  
26.   
27. #endif // MYITEM_H  

 

1. #include "myitem.h"  
2. #include <QPainter>  
3. #include <QCursor>  
4. #include <QKeyEvent>  
5. #include <QGraphicsSceneHoverEvent>  
6. #include <QGraphicsSceneContextMenuEvent>  
7. #include <QMenu>  
8.   
9. MyItem::MyItem()  
10. {  
11.     brushColor = Qt::red;  
12.     setFlag(QGraphicsItem::ItemIsFocusable);  
13.     setFlag(QGraphicsItem::ItemIsMovable);  
14.     //setAcceptHoverEvents(true);  
15. }  
16.   
17. QRectF MyItem::boundingRect() const  
18. {  
19.     qreal adjust = 0.5;  
20.     return QRectF(-10 - adjust, -10 - adjust,  
21.                   20 + adjust, 20 + adjust);  
22. }  
23.   
24. void MyItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option,  
25.                    QWidget *widget)  
26. {   qDebug("************MyItem::paint*****************");  
27.     if(hasFocus()) {  
28.         painter->setPen(QPen(QColor(255,255,255,200)));  
29.     } else {  
30.         painter->setPen(QPen(QColor(100,100,100,100)));  
31.     }  
32.     painter->setBrush(brushColor);  
33.     painter->drawRect(-10, -10, 20, 20);  
34. }  
35.   
36. // 鼠标按下事件处理函数，设置被点击的图形项获得焦点，并改变光标外观  
37. void MyItem::mousePressEvent(QGraphicsSceneMouseEvent *event)  
38. {  
39.     qDebug("************MyItem::mousePressEvent*****************");  
40.     setFocus();  
41.     setCursor(Qt::ClosedHandCursor);  
42. }  
43.   
44. // 键盘按下事件处理函数，判断是否是向下方向键，如果是，则向下移动图形项  
45. void MyItem::keyPressEvent(QKeyEvent *event)  
46. {  
47.     qDebug("************MyItem::keyPressEvent*****************");  
48.     if(event->key() == Qt::Key_Down)  
49.         moveBy(0, 10);  
50. }  
51.   
52. // 悬停事件处理函数，设置光标外观和提示  
53. void MyItem::hoverEnterEvent(QGraphicsSceneHoverEvent *event)  
54. {  
55.     qDebug("************MyItem::hoverEnterEvent*****************");  
56.     setCursor(Qt::OpenHandCursor);  
57.     setToolTip("I am item");  
58. }  
59.   
60. void MyItem::hoverLeaveEvent(QGraphicsSceneHoverEvent *event)  
61. {  
62.     qDebug("************MyItem::hoverLeaveEvent*****************");  
63.     setCursor(Qt::ArrowCursor);  
64. }  
65.   
66.   
67. // 右键菜单事件处理函数，为图形项添加一个右键菜单  
68. void MyItem::contextMenuEvent(QGraphicsSceneContextMenuEvent *event)  
69. {  
70.     QMenu menu;  
71.     QAction *moveAction = menu.addAction("move back");  
72.     QAction *actAction = menu.addAction("test");  
73.     QAction *selectedAction = menu.exec(event->screenPos());  
74.     if(selectedAction == moveAction) {  
75.         setPos(0, 0);  
76.     }  
77. }  
78.   
79. void MyItem::mouseMoveEvent(QGraphicsSceneMouseEvent *event)  
80. {  
81.     qDebug("************MyItem::mouseMoveEvent*****************");  
82.     QGraphicsItem::mouseMoveEvent(event);  
83. }  

4、main及运行

1. #include <QApplication>  
2. #include "myitem.h"  
3. #include "myview.h"  
4. #include "myscene.h"  
5. #include <QTime>  
6.   
7. int main(int argc,char* argv[ ])  
8. {  
9.     QApplication app(argc,argv);  
10.   
11.     qsrand(QTime(0, 0, 0).secsTo(QTime::currentTime()));  
12.   
13.     MyScene scene;  
14.     scene.setSceneRect(-200, -150, 400, 300);  
15.     for(int i = 0; i < 5; ++i) {  
16.         MyItem *item = new MyItem;  
17.         item->setColor(QColor(qrand() % 256, qrand() % 256, qrand() % 256));  
18.         item->setPos(i * 50 - 90, -50);  
19.         scene.addItem(item);  
20.     }  
21.   
22.   
23.     MyView view;  
24.     view.setScene(&scene);  
25.     view.setBackgroundBrush(QPixmap(":/background.png"));  
26.     view.show();  
27.   
28.     return app.exec();  
29. }  

分析：keyPressEvent键盘按下事件由View—Scene—Item

 

分析：mousePressEven鼠标按下事件由View—Scene—Item

分析：事件项Item没有获得焦点时，mousePressEven鼠标按下事件只由View传递到Scene。

分析：事件项Item的悬停事件，在构造函数中设置了setAcceptHoverEvents(true)。