Qt之使用Graphics View Framework开发拼图游戏

用Qt的图形视图框架(Graphics View Framework)做了一个拼图游戏DEMO,演示了:

  • QGraphicsView、QGraphicsScene、QGraphicsItem的基本用法
  • drag && drop
  • 自定义QGraphicsItem

先来看看效果吧:

现在,来看下代码了。

项目说明

如上图所示,项目名称为qPuzzle,三个源文件,main.cpp是入口,imageitem.h和imageitem.cpp实现了:

  • PuzzleImageItem,就是界面左上侧那两个可以拖动的碎片,支持拖动
  • PuzzlePart,用于接受拖放的item
  • PuzzlePartManager,管理可拖放的PuzzleImageItem,拖放到位后从QGraphicsScene中移除PuzzleImageItem

项目还有几个图片资源,model.png是带有拼图区域的房子图片,mode_1.png和model_2.png是房子上扣出来的小图片。

源码说明

分开来说吧,main()、PuzzleImageItem和PuzzlePartItem。

入口函数main

先看main.cpp吧:

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
class GraphicsView : public QGraphicsView { public: GraphicsView(QGraphicsScene *scene) : QGraphicsView(scene) { } protected: virtual void resizeEvent(QResizeEvent *) Q_DECL_OVERRIDE { } }; int main(int argc, char *argv[]) { QApplication a(argc, argv); QGraphicsScene scene(0, 0, 480, 360); PuzzleImageItem *image1 = new PuzzleImageItem(":/model_1.png", 60, 60, 1); image1->setPos(4, 4); scene.addItem(image1); PuzzleImageItem *image2 = new PuzzleImageItem(":/model_2.png", 60, 60, 2); image2->setPos(4, 70); scene.addItem(image2); QGraphicsPixmapItem *model = new QGraphicsPixmapItem(QPixmap(":/model.png")); scene.addItem(model); model->setPos(100, 100); PuzzlePartManager mgr(&scene); mgr.addSourceItems(1, image1); mgr.addSourceItems(2, image2); PuzzlePart *part1 = new PuzzlePart(&mgr, 60, 60, 1); part1->setPos(261, 149); part1->setZValue(2); scene.addItem(part1); PuzzlePart *part2 = new PuzzlePart(&mgr, 60, 60, 2); part2->setPos(231, 199); part2->setZValue(2); scene.addItem(part2); GraphicsView view(&scene); view.setRenderHint(QPainter::Antialiasing); view.setViewportUpdateMode(QGraphicsView::BoundingRectViewportUpdate); view.setBackgroundBrush(QColor(230, 200, 167)); view.setWindowTitle("House Puzzle"); view.show(); return a.exec(); }

main()方法创建了QGraphicsScene实例,构造各种item并添加到场景中,将QGraphicsView与QGraphicsScene关联起来,代码很直接,不多说了。

PuzzleImageItem

再来看看支持拖动的PuzzleImageItem的实现:

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
class PuzzleImageItem : public QGraphicsObject { public: PuzzleImageItem(const QString & imagePath, int w, int h, int partId); QRectF boundingRect() const Q_DECL_OVERRIDE; void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget) Q_DECL_OVERRIDE; protected: void mousePressEvent(QGraphicsSceneMouseEvent *event) Q_DECL_OVERRIDE; void mouseMoveEvent(QGraphicsSceneMouseEvent *event) Q_DECL_OVERRIDE; void mouseReleaseEvent(QGraphicsSceneMouseEvent *event) Q_DECL_OVERRIDE; protected: QImage m_image; int m_width; int m_height; int m_partId; };

PuzzleImageItem代表完整图片的一部分,它从QGraphicsObject继承而来,持有一个图片、宽、高以及图片的id(m_partId)。其中m_partId是碎片索引,在拖放到位后,PuzzlePartManager通过它来将界面左上角的碎片从视图中移除。

重写了boundingRect和paint方法,这是自定义QGraphicsItem时通常都需要做的。

重写了mousePressEvent,在它里面将鼠标形状修改为抓紧的小手:

 
 
  • 1
  • 2
  • 3
  • 4
void PuzzleImageItem::mousePressEvent(QGraphicsSceneMouseEvent *event) { setCursor(Qt::ClosedHandCursor); }

重写了mouseMoveEvent,在它里面组装QDrag和QMimeData:

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
void PuzzleImageItem::mouseMoveEvent(QGraphicsSceneMouseEvent *event) { if (QLineF(event->screenPos(), event->buttonDownScreenPos(Qt::LeftButton)) .length() < QApplication::startDragDistance()) { return; } QDrag *drag = new QDrag((QObject*)event->widget()); QMimeData *mime = new QMimeData; mime->setImageData(m_image); mime->setData(QString(QMetaType::typeName(QMetaType::Int)), QString("%1").arg(m_partId).toLatin1()); drag->setMimeData(mime); drag->setPixmap(QPixmap::fromImage(m_image)); drag->setHotSpot(QPoint(15, 30)); drag->exec(); setCursor(Qt::OpenHandCursor); }

注意我在这里用QMimeData传递m_partId给接受拖放的PuzzlePartItem,这样可以区分碎片该放到哪个目标区域。在PuzzlePartItem的dragEnterEvent方法中有用到,代码如下:

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
void PuzzlePart::dragEnterEvent(QGraphicsSceneDragDropEvent *event) { const QMimeData *mime = event->mimeData(); int partId = mime->data(QMetaType::typeName(QMetaType::Int)).toInt(); if(mime->hasImage() && partId == m_partId) { event->setAccepted(true); m_dragOver = true; update(); } else { event->setAccepted(false); } }

这里可以留意一下使用QMimeData传递非典型类型数据的做法。

重写了mouseReleaseEvent,在它里面重新设置鼠标形状为打开的小手:

 
 
  • 1
  • 2
  • 3
  • 4
void PuzzleImageItem::mouseReleaseEvent(QGraphicsSceneMouseEvent *event) { setCursor(Qt::OpenHandCursor); }

PuzzlePartItem

PuzzlePartItem定义了一个区域,用于接受拖放。它同样从QGraphicsObject继承,声明如下:

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
class PuzzlePart : public QGraphicsObject { public: PuzzlePart(PuzzlePartManager *mgr, int w, int h, int partId, QGraphicsItem *parent = 0); QRectF boundingRect() const Q_DECL_OVERRIDE; void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget = 0) Q_DECL_OVERRIDE; protected: void dragEnterEvent(QGraphicsSceneDragDropEvent *event) Q_DECL_OVERRIDE; void dragLeaveEvent(QGraphicsSceneDragDropEvent *event) Q_DECL_OVERRIDE; void dropEvent(QGraphicsSceneDragDropEvent *event) Q_DECL_OVERRIDE; PuzzlePartManager *m_sourcePartManager; int m_width; int m_height; int m_partId; QImage m_image; bool m_dragOver; };

这个类也保留了一个id(m_partId),可以用来决定接受哪个PuzzleImageItem。前面贴出来的dragEnterEvent方法的代码里就用到了。dragEnterEvent方法在PuzzleImageItem被拖到PuzzlePartItem所在区域时触发。

当释放鼠标时,会触发dropEvent,代码如下:

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
void PuzzlePart::dropEvent(QGraphicsSceneDragDropEvent *event) { m_dragOver = false; const QMimeData *mime = event->mimeData(); int partId = mime->data(QMetaType::typeName(QMetaType::Int)).toInt(); if(mime->hasImage() && partId == m_partId) { m_image = qvariant_cast<QImage>(event->mimeData()->imageData()); m_sourcePartManager->removeItem(partId); } update(); }

我们在这里接收QMimeData里的图片,触发重新绘制,还调用PuzzlePartManager的removeItem将源item(PuzzleImageItem)从视图中移除。

重写dragLeaveEvent是为了在鼠标拖着源object离开自己时重绘。

原文链接:http://www.voidcn.com/article/p-rbzsgheg-bdp.html

相关文章
相关标签/搜索