用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”获取下载地址。