用Qt图形视图框架开发拼图游戏

用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吧：

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的实现：

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，在它里面将鼠标形状修改为抓紧的小手：

void PuzzleImageItem::mousePressEvent(QGraphicsSceneMouseEvent *event){    setCursor(Qt::ClosedHandCursor);}

重写了mouseMoveEvent，在它里面组装QDrag和QMimeData：

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方法中有用到，代码如下：

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，在它里面重新设置鼠标形状为打开的小手：

void PuzzleImageItem::mouseReleaseEvent(QGraphicsSceneMouseEvent *event){    setCursor(Qt::OpenHandCursor);}

PuzzlePartItem

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

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，代码如下：

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离开自己时重绘。

---

好啦，这个demo基本就这样了。

需要项目源码的，可以关注我的订阅号“程序视界”，回复“qPuzzle”获取下载地址。