飞舞的蝴蝶（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. class Butterfly : public QObject, public QGraphicsItem
4. {
5. Q_OBJECT
6. public:
7. Butterfly();
8. void timerEvent(QTimerEvent *);
9. QRectF boundingRect() const;
10. protected:
11. void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget);
12. private:
13. bool up;
14. QPixmap pix_up;
15. QPixmap pix_down;
16. qreal angle;
17. };

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

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

（2）来回移动的星星

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

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

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. int y = (qrand()%400) - 200;
10. for (int i=0; i<400; i++)
11. {
12. anim->setPosAt(i/400.0, QPointF(i-200,y));
13. }
14. timeLine->start();
15. scene->addItem(star);
16. }

分析：利用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. #include <QGraphicsScene>
4. #include <QGraphicsSceneMouseEvent>
5. #include <QPaintEvent>
6. #include <QKeyEvent>
7. class MyScene : public QGraphicsScene
8. {
9. Q_OBJECT
10. public:
11. explicit MyScene(QObject *parent = 0);
12. protected:
13. void keyPressEvent(QKeyEvent *event);
14. void mousePressEvent(QGraphicsSceneMouseEvent *event);
15. signals:
16. public slots:
17. };
18. #endif // MYSCENE_H

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

2、QGraphicsView

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

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

3、QGraphicsItem

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

4、main及运行

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

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

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

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

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