Qt QGraphicsView实战：手把手教你实现一个可拖拽、碰撞检测的简易画板（附完整源码）
Qt QGraphicsView实战：从零构建可交互画板（拖拽+碰撞检测）
记得第一次用QGraphicsView做项目时，被它强大的图形处理能力惊艳到了——但官方文档里那些零散的特性说明，总让我有种"每个字都认识但组合起来不会用"的困惑。今天我们就用最直接的方式：通过做一个可玩性十足的画板，把拖拽操作、碰撞检测这些抽象概念变成看得见的代码。最终效果是：画板上随机分布着不同颜色的几何图形，你可以用鼠标任意拖拽它们，当两个图形相撞时，它们的颜色会混合生成新色彩——就像调色盘一样直观有趣。
1. 环境搭建与基础框架
先确保你的开发环境已经配置好Qt库。我用的是Qt 5.15.2 + Qt Creator，但任何支持QGraphicsView模块的版本都可以。在.pro文件中添加核心模块依赖：
QT += core gui widgets创建主窗口类时，我们需要三个核心组件：
- QGraphicsScene：相当于画布的"物理空间"，管理所有图形项
- QGraphicsView：观察场景的"镜头"，处理显示和用户交互
- 自定义QGraphicsItem：实现我们想要的拖拽和碰撞行为
基础窗口代码如下：
#include <QMainWindow> #include <QGraphicsView> #include <QGraphicsScene> class MainWindow : public QMainWindow { Q_OBJECT public: MainWindow(QWidget *parent = nullptr) { scene = new QGraphicsScene(this); view = new QGraphicsView(scene, this); // 设置场景大小和背景 scene->setSceneRect(0, 0, 800, 600); scene->setBackgroundBrush(Qt::lightGray); setCentralWidget(view); resize(840, 640); } private: QGraphicsScene *scene; QGraphicsView *view; };2. 实现可拖拽图形项
要让图形能被鼠标拖动，我们需要继承QGraphicsItem并实现几个关键方法。下面创建一个支持拖拽的彩色圆形项：
class DraggableCircle : public QGraphicsEllipseItem { public: DraggableCircle(qreal x, qreal y, qreal diameter, QColor color) : QGraphicsEllipseItem(x, y, diameter, diameter) { // 启用拖拽标志 setFlag(QGraphicsItem::ItemIsMovable); setFlag(QGraphicsItem::ItemSendsGeometryChanges); // 设置画笔和画刷 setPen(QPen(Qt::black, 2)); setBrush(color); // 记录初始颜色 originalColor = color; } protected: // 位置变化时触发碰撞检测 QVariant itemChange(GraphicsItemChange change, const QVariant &value) override { if (change == ItemPositionHasChanged) { checkCollisions(); } return QGraphicsEllipseItem::itemChange(change, value); } private: QColor originalColor; void checkCollisions() { // 碰撞检测逻辑将在下一节实现 } };在场景中添加测试图形：
// 在主窗口构造函数中添加 for (int i = 0; i < 10; ++i) { QColor randomColor(QRandomGenerator::global()->bounded(256), QRandomGenerator::global()->bounded(256), QRandomGenerator::global()->bounded(256)); DraggableCircle *circle = new DraggableCircle( QRandomGenerator::global()->bounded(600), QRandomGenerator::global()->bounded(400), 50 + QRandomGenerator::global()->bounded(30), randomColor); scene->addItem(circle); }此时运行程序，你应该能看到随机分布的彩色圆形，并且可以用鼠标拖动它们——但碰撞时还没有任何反应。
3. 碰撞检测与颜色混合
Qt提供了几种碰撞检测方式，我们选择最高效的collidingItems()方法。修改checkCollisions()函数：
void DraggableCircle::checkCollisions() { QList<QGraphicsItem*> collisions = collidingItems(); if (!collisions.isEmpty()) { QColor mixedColor = originalColor; int colorCount = 1; // 混合所有碰撞项的颜色 for (QGraphicsItem *item : collisions) { if (DraggableCircle *circle = dynamic_cast<DraggableCircle*>(item)) { mixedColor.setRed((mixedColor.red() + circle->originalColor.red()) / 2); mixedColor.setGreen((mixedColor.green() + circle->originalColor.green()) / 2); mixedColor.setBlue((mixedColor.blue() + circle->originalColor.blue()) / 2); colorCount++; } } setBrush(mixedColor); } else { // 没有碰撞时恢复原色 setBrush(originalColor); } }这里有个实用技巧：我们存储了原始颜色originalColor，这样当图形不再碰撞时可以恢复原色。颜色混合采用简单的平均值算法，你也可以尝试更复杂的混合模式：
| 混合模式 | 算法公式 | 视觉效果 |
|---|---|---|
| 平均值 | (color1 + color2) / 2 | 自然过渡 |
| 乘法混合 | color1 * color2 / 255 | 变暗效果 |
| 屏幕混合 | 255 - (255-color1)*(255-color2)/255 | 变亮效果 |
| 差值 | abs(color1 - color2) | 高对比度效果 |
4. 性能优化与高级功能
当图形项很多时，碰撞检测可能成为性能瓶颈。以下是几种优化策略：
1. 碰撞检测优化：
// 在构造函数中添加 setCacheMode(DeviceCoordinateCache); // 启用缓存 // 修改碰撞检测范围 QList<QGraphicsItem*> collisions = collidingItems( Qt::IntersectsItemBoundingRect); // 使用边界矩形检测2. 添加图形类型多样化：
class DraggableRect : public QGraphicsRectItem { // 实现类似圆形项的拖拽和碰撞功能 }; // 在主窗口随机创建不同形状 if (QRandomGenerator::global()->bounded(2)) { scene->addItem(new DraggableCircle(...)); } else { scene->addItem(new DraggableRect(...)); }3. 实时显示碰撞信息：
// 添加状态显示控件 QGraphicsTextItem *statusText = scene->addText("碰撞检测中..."); statusText->setPos(10, 10); // 在checkCollisions()中更新状态 if (!collisions.isEmpty()) { statusText->setPlainText(QString("碰撞数: %1").arg(collisions.count())); } else { statusText->setPlainText("无碰撞"); }5. 完整项目结构与扩展思路
最终的工程文件结构如下：
GraphicsBoard/ ├── graphicsboard.pro ├── main.cpp ├── mainwindow.h ├── mainwindow.cpp ├── draggablecircle.h ├── draggablecircle.cpp └── draggablerect.h如果你想进一步扩展这个项目，可以考虑：
- 添加图形缩放旋转：重写
mouseDoubleClickEvent实现双击变换 - 实现撤销/重做：使用QUndoStack记录图形位置变化
- 保存/加载场景：通过JSON序列化图形项状态
- 多视图同步：创建多个QGraphicsView观察同一场景
调试提示：如果遇到图形显示异常，可以检查boundingRect()和paint()的实现是否正确，这是QGraphicsItem子类最常见的错误来源。
这个项目最让我惊喜的是，只用不到200行核心代码就实现了一个视觉效果丰富的交互系统。当第一次看到拖拽的图形碰撞出新的色彩时，那种即时反馈的成就感，正是图形编程的魅力所在。