GraphicsView学习-基本图元使用（2）

最新推荐文章于 2024-02-06 12:13:00 发布
最新推荐文章于 2024-02-06 12:13:00 发布
阅读量1.9k 收藏 19
点赞数 2
分类专栏： QT # QGraphicsView框架 文章标签： Qt QGraphicsItem 基本图元 自定义图元
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43627907/article/details/127196363
版权

GraphicsView学习-基本图元使用（2）

文章目录

更多精彩内容
👉个人内容分类汇总 👈
👉QGraphicsView框架 👈

一、概述

  • Qt版本：Qt5.12.5
  • 系统：Windows10
  • 编译器：MSVC2017-64

本文内容：

  1. GraphicsView的基本使用，不同于网上一些例程上来就继承GraphicsView，或者继承QGraphicsScene，本文尽量做到最简单的使用GraphicsView、QGraphicsScene、QGraphicsItem。
  2. 演示如何使用内置的 直线、矩形、椭圆、多边形、简单文本、富文本、图片、绘图路径、窗口部件等基本图元；
  3. 使用自定义散点图元（如何自定义图元会在后面单独讲）；
  4. 实现所有图元鼠标选中、移动功能，包括窗口部件图元；
  5. 解决自定义图元鼠标移动存在残留问题。

实现效果：

在这里插入图片描述

本文中使用到的图元类继承关系：

在这里插入图片描述

二、实现步骤

  1. 新建一个工程，打开UI文件，选择一个QGraphicsView

    在这里插入图片描述

  2. 创建一个场景对象QGraphicsScene m_scene ，并把场景对象添加到QGraphicsView控件中

    QGraphicsScene m_scene;
ui->graphicsView->setScene(&m_scene);          // 添加绘图场景

  3. 将需要绘制的图元添加进场景对象m_scene，基本图元有两种添加方式；

    1. 方法一： 创建图元对象，通过场景类的QGraphicsScene::addItem函数添加；

      QGraphicsLineItem* item = new QGraphicsLineItem(QLineF(0, 0, 300, 0));
m_scene.addItem(item);

    2. 方法二： 场景类为每一个基本图元都内置了一个添加函数，将创建图元对象和addItem添加的步骤封装到了函数内部，例如：直线图元添加函数；

      QGraphicsLineItem* item = m_scene.addLine(QLineF(0, 0, 300, 0));

三、主要代码

  • mainwindow.h文件

    #ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QButtonGroup>
#include <QGraphicsScene>
#include <QMainWindow>

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private:
    void initToolBar();              // 初始化按键控件，也可以直接在UI文件中拖控件然后转到槽
    void drawLine();                 // 在这函数内演示添加直线图元
    void drawRect();            
    void drawEllipse();
    void drawPolygon();
    void drawSimpleText();
    void drawText();
    void drawPixmap();
    void drawPath();
    void addWidget();
    void drawPoints();
    void clear();                   // 清楚QGraphicsScene中显示的所有图元

private:
    Ui::MainWindow *ui;

    QButtonGroup m_butGroup;
    QGraphicsScene m_scene;
};
#endif // MAINWINDOW_H

  • mainwindow.cpp文件

    #include "mainwindow.h"
#include "ui_mainwindow.h"

#include <QDebug>
#include <QGraphicsProxyWidget>
#include <QPushButton>
#include <QTextDocument>
#include <QTextFrame>
#include <QTextFrameFormat>
#include <qgraphicsitem.h>
#include <qtoolbutton.h>
#include "qgraphicspointsitem.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    this->setWindowTitle("QGraphicsItem基本图元演示");

    initToolBar();

    ui->graphicsView->setScene(&m_scene);          // 添加绘图场景
}

MainWindow::~MainWindow()
{
    delete ui;
}


/**
 * @brief  初始化工具栏
 */
void MainWindow::initToolBar()
{
    QPushButton* but1 = new QPushButton("直线");
    QPushButton* but2 = new QPushButton("矩形");
    QPushButton* but3 = new QPushButton("椭圆");
    QPushButton* but4 = new QPushButton("多边形");
    QPushButton* but5 = new QPushButton("简单文本");
    QPushButton* but6 = new QPushButton("富文本");
    QPushButton* but7 = new QPushButton("图片");
    QPushButton* but8 = new QPushButton("路径");
    QPushButton* but9 = new QPushButton("窗口");
    QPushButton* but10 = new QPushButton("自定义散点");
    QPushButton* but_clear = new QPushButton("清除");

    // 按键设置可选
    but1->setCheckable(true);
    but2->setCheckable(true);
    but3->setCheckable(true);
    but4->setCheckable(true);
    but5->setCheckable(true);
    but6->setCheckable(true);
    but7->setCheckable(true);
    but8->setCheckable(true);
    but9->setCheckable(true);
    but10->setCheckable(true);
    but_clear->setCheckable(true);

    // 添加进按键组，默认是单选模式
    m_butGroup.addButton(but1);
    m_butGroup.addButton(but2);
    m_butGroup.addButton(but3);
    m_butGroup.addButton(but4);
    m_butGroup.addButton(but5);
    m_butGroup.addButton(but6);
    m_butGroup.addButton(but7);
    m_butGroup.addButton(but8);
    m_butGroup.addButton(but9);
    m_butGroup.addButton(but10);
    m_butGroup.addButton(but_clear);

    // 添加进工具栏
    ui->toolBar->addWidget(but1);
    ui->toolBar->addWidget(but2);
    ui->toolBar->addWidget(but3);
    ui->toolBar->addWidget(but4);
    ui->toolBar->addWidget(but5);
    ui->toolBar->addWidget(but6);
    ui->toolBar->addWidget(but7);
    ui->toolBar->addWidget(but8);
    ui->toolBar->addWidget(but9);
    ui->toolBar->addWidget(but10);
    ui->toolBar->addWidget(but_clear);

    // 绑定信号槽
    connect(but1, &QPushButton::clicked, this, &MainWindow::drawLine);
    connect(but2, &QPushButton::clicked, this, &MainWindow::drawRect);
    connect(but3, &QPushButton::clicked, this, &MainWindow::drawEllipse);
    connect(but4, &QPushButton::clicked, this, &MainWindow::drawPolygon);
    connect(but5, &QPushButton::clicked, this, &MainWindow::drawSimpleText);
    connect(but6, &QPushButton::clicked, this, &MainWindow::drawText);
    connect(but7, &QPushButton::clicked, this, &MainWindow::drawPixmap);
    connect(but8, &QPushButton::clicked, this, &MainWindow::drawPath);
    connect(but9, &QPushButton::clicked, this, &MainWindow::addWidget);
    connect(but10, &QPushButton::clicked, this, &MainWindow::drawPoints);
    connect(but_clear, &QPushButton::clicked, this, &MainWindow::clear);
}

/**
 * @brief  添加直线图元
 */
void MainWindow::drawLine()
{
    QLineF line(0, 0, 300, 0);
    QPen pen(Qt::red, 5);

#if 1              // 方式一，使用复杂一些，但更加灵活
    QGraphicsLineItem* item = new QGraphicsLineItem();
    item->setLine(line);
    item->setPen(pen);
    m_scene.addItem(item);
#else              // 方式二  这种方式将创建QGraphicsLineItem的步骤封装到函数内部了，使用简单
    QGraphicsLineItem* item = m_scene.addLine(line, pen);
#endif

    item->setFlags(QGraphicsItem::ItemIsSelectable | QGraphicsItem::ItemIsMovable);      // 设置可选可移动
}

/**
 * @brief 添加矩形图元
 */
void MainWindow::drawRect()
{
    QRectF rectf(0, 0, 200, 200);
    QPen pen(Qt::red, 5);
    QBrush brush(Qt::cyan);
#if 0        // 方式一
    QGraphicsRectItem* item = new QGraphicsRectItem();
    item->setRect(rectf);
    item->setPen(pen);
    item->setBrush(brush);
    m_scene.addItem(item);
#else       // 方式二
    QGraphicsRectItem* item = m_scene.addRect(rectf, pen, brush);
#endif

    item->setFlags(QGraphicsItem::ItemIsSelectable | QGraphicsItem::ItemIsMovable);      // 设置可选可移动
}

/**
 * @brief 添加椭圆图元
 */
void MainWindow::drawEllipse()
{
    QRectF rectf(0, 0, 200, 200);
    QPen pen(Qt::red, 5);
    QBrush brush(Qt::cyan);
#if 0        // 方式一
    QGraphicsEllipseItem* item = new QGraphicsEllipseItem();
    item->setRect(rectf);
    item->setPen(pen);
    item->setBrush(brush);
    m_scene.addItem(item);
#else       // 方式二
    QGraphicsEllipseItem* item = m_scene.addEllipse(rectf, pen, brush);
#endif
    item->setFlags(QGraphicsItem::ItemIsSelectable | QGraphicsItem::ItemIsMovable);      // 设置可选可移动
}

/**
 * @brief 添加多边形图元
 */
void MainWindow::drawPolygon()
{
    QPolygonF polygonF;
    polygonF << QPointF(0, 0) << QPointF(100, 50) << QPointF(150, 200);
    QPen pen(Qt::red, 5);
    QBrush brush(Qt::cyan);
#if 0        // 方式一
    QGraphicsPolygonItem* item = new QGraphicsPolygonItem();
    item->setPolygon(polygonF);
    item->setPen(pen);
    item->setBrush(brush);
    m_scene.addItem(item);
#else       // 方式二
    QGraphicsPolygonItem* item = m_scene.addPolygon(polygonF, pen, brush);
#endif
    item->setFlags(QGraphicsItem::ItemIsSelectable | QGraphicsItem::ItemIsMovable);      // 设置可选可移动
}

/**
 * @brief 添加简单文本图元
 */
void MainWindow::drawSimpleText()
{
    QFont font("宋体", 30, QFont::Bold);
#if 1        // 方式一
    QGraphicsSimpleTextItem *item = new QGraphicsSimpleTextItem();
    item->setText("简单文本");
    item->setFont(font);
    m_scene.addItem(item);
#else          // 方式二
    QGraphicsSimpleTextItem *item = m_scene.addSimpleText("简单文本", font);
#endif
    item->setFlags(QGraphicsItem::ItemIsSelectable | QGraphicsItem::ItemIsMovable);      // 设置可选可移动
}

/**
 * @brief 添加文本图元，支持富文本，功能更加强大
 */
void MainWindow::drawText()
{
    QFont font("宋体", 30, QFont::Bold);
#if 1        // 方式一
    // 显示纯文本
    QGraphicsTextItem *item1 = new QGraphicsTextItem();
    item1->setPlainText("文本");
    item1->setFont(font);
    item1->setDefaultTextColor(Qt::red);
    m_scene.addItem(item1);

    // 显示HTML文本，可通过HTML设置，功能更加强大
    QGraphicsTextItem *item2 = new QGraphicsTextItem();
    item2->setHtml("<h1>Html文本</h1>");
    item2->setPos(0, 100);
    m_scene.addItem(item2);

    // 富文本
    QGraphicsTextItem *item3 = new QGraphicsTextItem();
    QTextDocument* document = new QTextDocument();
    document->setHtml("<p><span style=\" font-family:'SimSun'; font-size:26pt; color:#00aaff;\">富文本</span></p>");
    item3->setDocument(document);
    item3->setPos(0, 200);
    m_scene.addItem(item3);
#else          // 方式二
    QGraphicsTextItem *item1 = m_scene.addText("文本", font);
#endif
    item1->setFlags(QGraphicsItem::ItemIsSelectable | QGraphicsItem::ItemIsMovable);      // 设置可选可移动
}

/**
 * @brief 添加图片图元
 */
void MainWindow::drawPixmap()
{
    QPixmap pixmap(":/1.png");
#if 0
    QGraphicsPixmapItem* item = new QGraphicsPixmapItem();
    item->setPixmap(pixmap);
    m_scene.addItem(item);
#else
    QGraphicsPixmapItem* item = m_scene.addPixmap(pixmap);
#endif
    item->setFlags(QGraphicsItem::ItemIsSelectable | QGraphicsItem::ItemIsMovable);      // 设置可选可移动
}

/**
 * @brief 添加绘图路径图元
 */
void MainWindow::drawPath()
{
    QPen pen(Qt::red, 5);
    QBrush brush(Qt::cyan);
    QPainterPath path;
    // 椭圆（圆形）
    path.addEllipse(150, 10, 100, 100);
    // 矩形
    path.addRect(300, 10, 100, 60);
    // 圆形区域
    path.addRegion(QRegion(450, 10, 40, 50, QRegion::Ellipse));
    // 圆角矩形
    path.addRoundRect(QRect(20, 150, 100, 100), 20, 20);

#if 0          // 方式一
    QGraphicsPathItem* item = new QGraphicsPathItem();
    item->setPath(path);
    m_scene.addItem(item);
#else           // 方式二
    QGraphicsPathItem* item = m_scene.addPath(path, pen, brush);
#endif
    item->setFlags(QGraphicsItem::ItemIsSelectable | QGraphicsItem::ItemIsMovable);      // 设置可选可移动
}

/**
 * @brief 嵌入窗口部件
 */
void MainWindow::addWidget()
{
    QPushButton* but = new QPushButton("button");
#if 0
    QGraphicsProxyWidget *proxy = new QGraphicsProxyWidget();
    proxy->setWidget(but);
    m_scene.addItem(proxy);
#else
    QGraphicsProxyWidget *proxy = m_scene.addWidget(but);                  // QGraphicsProxyWidget添加窗口部件后【不支持鼠标选中移动】
#endif
    // 这里通过添加一个矩形图元来实现鼠标移动
    QGraphicsRectItem* item = new QGraphicsRectItem(0, 0, 20, 20);         // 注意矩形长宽不能为负数，否则不能选中移动
    proxy->setPos(0, 20);                                                  // 将窗口部件下移，露出矩形图元
    proxy->setParentItem(item);                                            // 指定父项为矩形图元
    m_scene.addItem(item);
    item->setFlags(QGraphicsItem::ItemIsSelectable | QGraphicsItem::ItemIsMovable);      // 设置可选可移动
}

/**
 * @brief 添加自定义散点图元(这里是自定义图元，自定义图元部分的代码会放在下一章中详细讲解，这部分可以注释掉)
 */
void MainWindow::drawPoints()
{
    QPen pen(Qt::red, 20);
    QPolygonF polygonf;
    polygonf << QPointF(0,0) << QPointF(50,80) << QPointF(100,100) << QPointF(100,50) << QPointF(10, 200);
    QGraphicsPointsItem* item = new QGraphicsPointsItem();
    item->setPoints(polygonf);
    item->setPen(pen);
    item->setFlags(QGraphicsItem::ItemIsSelectable | QGraphicsItem::ItemIsMovable);      // 设置可选可移动

    m_scene.addItem(item);
}

/**
 * @brief 移除和删除所有项目
 */
void MainWindow::clear()
{
    m_scene.clear();
}

四、源代码

mahuifa
关注
  • 2
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
QGraphicsView学习
萧海的博客
01-16 201
效果 源码： 自定义View: #ifndef MYVIEW2_H #define MYVIEW2_H #include<QGraphicsView> #include<QMouseEvent> class MyView2:public QGraphicsView { Q_OBJECT public: MyView2(QWidget *parent); protected: void keyPressEvent(QKeyEvent *event);
QGraphicsView 学习
zwb998的博客
03-08 224
qt
QGraphicsView学习笔记1 --- 小示例
rrrrrr89098087的博客
11-04 410
示例1： int main(int argc,char* argv[ ]) { QApplication app(argc,argv); QGraphicsScene *scene = new QGraphicsScene; //场景 QGraphicsRectItem *item = new QGraphicsRectItem(100,100,50,50); //矩形项 scene->addItem(item); //项添加到场景 QGraphicsView
QGraphicsView教程
心向阳光，斗志昂扬！
02-08 6113
简介 Graphics View 提供了一个用于管理和交互大量的可定制的 2D 图形项与用于可视化这些项的 View 小部件的 surface（曲面），并提供缩放（zooming）和旋转（rotation）功能支持。 该框架包括事件传播体系结构（an event propagation architecture），该体系结构允许对场景中的项目进行精确的双精度交互功能。图元可以被如下操作处理：按键事件，鼠标按下，移动，释放和双击事件，它们还可以跟踪鼠标的移动。 Graphics View 使用 BSP（Bi
QT学习笔记： QGraphicsView的使用
qq_41909516的博客
01-10 3581
QT学习笔记：常见的 QGraphicsItem 简述 QGraphicsItem 类是 QGraphicsScene 中所有 item 的基类。 它提供了一个轻量级的基础，用于编写自定义 item。其中包括：定义 item 的几何形状、碰撞检测、绘制实现、以及通过其事件处理程序进行 item 的交互，QGraphicsItem 是 Qt之图形视图框架 的一部分。 常见的 QGraphicsIte...
Qt GraphicsView 添加图元.rar
03-13
Qt 场景、视图、图元的Demo,通过单击相应的空间相场景中添加椭圆、矩形、多边形、文本等图元。是初学者了解Qt的视图框架的模板软件。
QT Graphics View框架.pdf
04-03
本文档主要介绍Graphics View框架，该框架实现了模型－视图结构的图形管理，能对大量图元进行管理，支持碰撞检测，坐标变换和图元组等多种方便的功能。
QGraphicsView架构实现基本图形的绘制
05-07
1：实现了基本的图形：矩形、正方形、圆形、三角形、多线段、曲线的绘制 2：鼠标实时绘制图形。鼠标按下后开始绘制，再次按下后停止绘制。 3：图形的拖拽、删除、撤销操作 4：曲线图形实时绘制。
qt新的绘制2D图形框架
12-08
qt新的绘制2D图形框架，取代QT3中的Canvas模块。GraphicsView框架实现了模型－视图结构的图形管理，能对大量图元进行管理，支持碰撞检测，坐标变换和图元组等多种方便的功能。
QGraphicsView截图.zip
05-07
QT 通过图形视图框架（支持场景（Scene）中的图元（Item）进行精确的双精度交互功能。图元可以处理键盘事件、鼠标按下、移动、释放和双击事件，同时也能跟踪鼠标移动）鼠标左键点击 实现截图功能
QGraphicsView框架实现画板
11-26
支持图形的绘制，移动与拖拽、放大缩小、旋转、复制粘贴、撤销重做；绘制图形包括矩形、多边形、椭圆、直线、曲线等
qt之图形图像操作
qq_46127443的博客
07-20 301
文章目录1. 绘制文字2. 绘制线条3. 绘制椭圆4. 显示静态图像5.显示动态图像6. 图片移动7. 图片翻转8. 图片缩放 1. 绘制文字 mainwindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> QT_BEGIN_NAMESPACE namespace Ui { class MainWindow; } QT_END_NAMESPACE class MainWindow : public
Qt绘制图形，添加文字、矩形圆角、去除焦点线以及阴影设置
weixin_43525290的博客
03-06 2772
自定义图形（矩形） // 自定义 Item RectangleItem::RectangleItem(QGraphicsItem *parent) : QGraphicsRectItem(parent) { // 画笔 - 边框色 p = pen(); p.setWidth(1); p.setColor(CGlobal:: DRAW_COLOUR_JXBOR...
Qt 视图框架QGraphicsItem
m0_73443478的博客
11-19 1501
Qt 视图框架QGraphicsItem
QGraphicsItem【详细描述】
最新发布
floatBit的专栏
02-06 160
> ​QGraphicsItem是Graphics View Framework的一部分。
Qt Graphics系列之QGraphicsObject自定义图元
lw的博客
01-02 1701
自定义图元 需要自定义图元类且继承QGraphicsObject 自定义类中需要实现如下两个函数（由于） //绘制函数，在该函数中绘制自定义图元，该函数在窗口变化时调用（窗口大小改变、窗口最大化、最小化，还原时调用） void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget); //参数解释 //painter：画家对象，使用该对象绘制需要绘制的图形，当需要绘制多种图案时，直接在使用该变量绘
【QT学习】Graphics View框架（进阶篇）- 派生QGraphicsItem类创建自定义图元item
孤生i的博客
09-19 3067
Graphics View框架（进阶篇）：通过派生QGraphicsItem类，创建自定义图元item并显示。
QT下实现图片的自适应显示、缩放（以鼠标位置为中心进行缩放）、拖动、以及重置
热门推荐
weixin_43935474的博客
04-16 3万+
系统配置：ThinkPad T570、Windows10、QT5.12.2（Qt Creater 4.8.2） 我是通过qt中的Graphics View控件来实现上述功能的，具体步骤如下： 1.新建一个qt界面工程，将一个Graphics View控件拖动到主界面，如下图： 2.在mainwindow.h中添加如下代码： 在文件头包含自己写的类 #include "imagewidget.h"...
Qt OpenCV 在界面显示图片 通过Lable方式 和GraphicsView 方式
m0_60259116的博客
11-10 1197
Qt OpenCV 在界面显示图片 通过Lable方式 和GraphicsView 方式
Qt Graphics View教程
05-30
以下是关于Qt Graphics View的教程： 1. 官方文档：Qt Graphics View官方文档是使用该框架的最佳参考资料，其中详细介绍了该框架的所有功能和API。 2. 基本概念：在学习Qt Graphics View之前，需要先了解一些基本概念，如场景（Scene）、视图（View）、图元（Item）等。 3. 创建场景和视图：使用Qt Graphics View创建场景和视图非常简单。可以通过代码或Qt Designer创建一个新的Graphics View窗口。首先需要创建场景，然后将场景与视图关联。 4. 添加图元：可以使用Qt Graphics View中的图元（Item）来绘制2D图形。可以添加图元到场景中，然后它们就会显示在视图中。Qt Graphics View提供了一些内置的图元类，如矩形、椭圆、文字、线条等。 5. 图元转换和变换：使用Qt Graphics View可以对图元进行多种转换和变换操作，如平移、缩放、旋转、剪切、选择等。这些操作可以通过使用QTransform类来实现。 6. 事件处理和信号机制：Qt Graphics View提供了丰富的事件和信号机制，方便用户进行图形交互和动画效果的实现。可以通过重载事件处理函数和连接信号和槽函数来处理这些事件和信号。 7. 动画效果：使用Qt Graphics View可以实现各种动画效果，如平移、旋转、缩放等。可以使用QPropertyAnimation类来实现这些效果。 8. 场景和视图的组合：使用Qt Graphics View可以将多个场景和视图组合在一起，创建复杂的图形场景。可以使用QGraphicsProxyWidget类将QWidget转换为图元，然后将它们添加到场景中。 希望以上教程能帮助你了解Qt Graphics View。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

mahuifa

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值