Qt QGraphics简述及例程 - QGraphicsView、QGraphicsScene和QGraphicsItem

发布于:2025-07-01 ⋅ 阅读:(23) ⋅ 点赞:(0)

引言

QGraphics*是Qt框架中,主要用于处理2D图形项的显示、交互和管理的模块,包括QGraphicsView、QGraphicsScene和QGraphicsItem。提供了一套高效的场景-视图架构,适合开发复杂的图形应用程序,如绘图工具、数据可视化、游戏等。该模块通过分层设计平衡了灵活性与性能,是Qt中处理复杂图形交互的首选方案。

  1. QGraphicsView
    用于显示场景内容的视图组件,支持缩放、旋转、滚动等交互操作。多个视图可以关联同一个场景,实现不同视角的同步展示。
  2. QGraphicsScene
    作为容器管理所有图形项(QGraphicsItem),负责场景的坐标系统、碰撞检测、事件传递等。场景可以包含数百万个项,但仍能保持高性能。
  3. QGraphicsItem
    所有图形项的基类,提供位置、变换、碰撞、绘制等基本功能。常见的派生类包括QGraphicsEllipseItem(圆形)、QGraphicsRectItem(矩形)等。

一、简单例程

简单的比喻:QGraphicsScene是一个场景,QGraphicsItem是场景里物体 (可以是多个),QGraphicsView是看场景的视角。

  • 可拖动Item的效果展示:
    在这里插入图片描述

  • 源码:

#include <QApplication>
#include <QGraphicsView>
#include <QGraphicsScene>
#include <QGraphicsRectItem>
#include <QGraphicsEllipseItem>
#include <QBrush>
#include <QPen>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    // 创建一个场景
    QGraphicsScene scene;
    scene.setSceneRect(0, 0, 400, 300);

    // 创建一个矩形项并添加到场景
    QGraphicsRectItem *rectItem = new QGraphicsRectItem(50, 50, 100, 100);
    rectItem->setBrush(QBrush(Qt::blue));
    rectItem->setPen(QPen(Qt::black));
    rectItem->setFlag(QGraphicsItem::ItemIsMovable); // 允许拖动
    scene.addItem(rectItem);

    // 创建一个椭圆项并添加到场景
    QGraphicsEllipseItem *ellipseItem = new QGraphicsEllipseItem(200, 100, 150, 100);
    ellipseItem->setBrush(QBrush(Qt::red));
    ellipseItem->setPen(QPen(Qt::black));
    ellipseItem->setFlag(QGraphicsItem::ItemIsMovable); // 允许拖动
    scene.addItem(ellipseItem);

    // 创建一个视图并设置场景
    QGraphicsView view(&scene);
    view.setWindowTitle("示例");
    view.resize(500, 400);
    view.show();

    return app.exec();
}

Qt QGraphics体系及刷新机制介绍:https://zhuanlan.zhihu.com/p/613637924

二、关于坐标系问题

Qt图形视图框架三–坐标系统简介:https://blog.csdn.net/zhaoxd200808501/article/details/76177497

    1. QgraphicsScene的setSceneRect函数可以设置场景的位置(或者说View查看的位置)和大小。默认scene的中心和View的中心是重合的(默认Qt::AlignmentCenter),或者说默认原点(0,0)在中心,如下图所示:
      在这里插入图片描述
    QGraphicsScene *scene = new QGraphicsScene();
    scene->setBackgroundBrush(Qt::yellow);
    QGraphicsRectItem *rectItem = new QGraphicsRectItem(0, 0, 100, 100);
    scene->addItem(rectItem);
    //scene->setSceneRect(-50, -50, 100, 100);

    QGraphicsView *view = new QGraphicsView(scene);
    //view->setAlignment(Qt::AlignLeft|Qt::AlignTop);
    this->setCentralWidget(view);
    this->setGeometry(300, 300, 200, 200);
    1. 使用scene->setSceneRect(-50, -50, 100, 100)进行偏移,就是将view的查看的位置向左上都移动50 (也可以看作scene向右下移动50),由于默认Qt::AlignmentCenter,所有偏移是距离中心原点的距离,如下图所示:
      在这里插入图片描述
    1. 再设置view->setAlignment(Qt::AlignLeft|Qt::AlignTop);setSceneRect所设置的-50偏移,就是距离左上顶点的偏移,如下图所示:
      在这里插入图片描述

坐标系统问题总结:

  1. View和Scene的对齐方式,决定坐标系原点(0,0) (默认Qt::AlignmentCenter,中心作为原点),不是左上角为原点。
  2. setSceneRect设置的位置,是距离原点的位置。
  3. 换句话说就是,默认设置Scene的中心为坐标系原点,setSceneRect设置的(-50,-50)就是:View的中心在Scene中心左上方50处。

Qt工作笔记-QGraphicsView框架容易忽视的坐标问题-“画布”QgraphicsScene到底放在了哪儿?:https://blog.csdn.net/qq78442761/article/details/80965627
一个例子,搞懂QGraphicsView,QGraphicsScene坐标系统以及sceneRect设置:https://blog.csdn.net/biewenwoaaaa/article/details/144597336