devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

使用图形视图框架(Graphics View Framework)在QML中创建交互式图形界面_qml graphicsview

作者：你好赵伟 | 2024-07-08 06:52:55

赞

踩

qml graphicsview

使用图形视图框架(Graphics View Framework)在QML中创建交互式图形界面

在现代应用程序开发中，图形界面是用户体验的关键。Qt框架为我们提供了一种强大而灵活的方式来创建各种图形界面，而QML（Qt Meta-Object Language）是Qt的一部分，用于设计和构建现代、响应式的用户界面。本文将介绍如何在QML中使用图形视图框架，以创建交互式的图形界面。

什么是图形视图框架(Graphics View Framework)？

图形视图框架是Qt中的一个核心组件，它允许开发者创建和管理2D图形场景。这个框架提供了一个强大的工具集，用于在应用程序中显示和处理图形元素，例如矩形、文本、线条等。它不仅支持静态图形展示，还支持交互和动画效果。

在QML中使用图形视图框架

在QML中使用图形视图框架需要进行一些设置和配置。下面是一些步骤，帮助您在项目中集成图形视图框架：

步骤1：项目配置

首先，确保您的Qt项目已正确配置。在项目的.pro文件中，确保已添加QT += quick widgets，并且设置了正确的Qt版本。还要配置文件的字符集，确保使用UTF-8编码。

步骤2：创建QmlGraphicsView类

在项目中，您需要创建一个自定义的QmlGraphicsView类，该类继承自QQuickPaintedItem，用于在QML中显示图形内容。这个类将充当图形视图的容器。

  1. // QmlGraphicsView.h
  2. #pragma once
  3.  
  4. // Include necessary Qt headers
  5.  
  6. class QmlGraphicsView : public QQuickPaintedItem
  7. {
  8.     Q_OBJECT
  9.  
  10. public:
  11.     QmlGraphicsView(QQuickItem* parent = nullptr)
  12.       : QQuickPaintedItem(parent) {
  13.         // 初始化图形场景并添加图形元素
  14.         // 设置交互选项
  15.     }
  16.  
  17.     // 实现绘制函数
  18.     void paint(QPainter* painter) override {
  19.         // 绘制图形内容
  20.     }
  21.  
  22. signals:
  23.     // 自定义信号
  24.  
  25. private slots:
  26.     // 自定义槽函数
  27.  
  28. protected:
  29.     // 处理鼠标和交互事件的函数
  30. };

步骤3：注册自定义类型

在main.cpp中，使用qmlRegisterType函数将自定义的QmlGraphicsView类注册为QML类型，以便在QML文件中使用。

qmlRegisterType<QmlGraphicsView>("QmlWidgets", 1, 0, "QmlGraphicsView");

步骤4：创建QML界面

在QML文件（例如main.qml）中，导入所需的Qt Quick模块和自定义类型，然后创建界面并将自定义的QmlGraphicsView作为子项嵌套在其中。

  1. import QtQuick 2.15
  2. import QtQuick.Window 2.15
  3. import QmlWidgets 1.0
  4.  
  5. Window {
  6.     width: 640
  7.     height: 480
  8.     visible: true
  9.     title: qsTr("QmlWidgets")
  10.  
  11.     QmlGraphicsView {
  12.         anchors.fill: parent
  13.     }
  14. }

步骤5：运行应用程序

最后，在main.cpp中启动应用程序，加载QML界面，并在需要时添加国际化支持。

完整代码

  1. #pragma once
  2.  
  3. #include <QApplication>
  4. #include <QDebug>
  5. #include <QEvent>
  6. #include <QGraphicsScene>
  7. #include <QGraphicsView>
  8. #include <QQuickPaintedItem>
  9. #include <QQuickWindow>
  10. #include <QPainter>
  11. #include <QGraphicsSceneMouseEvent>
  12.  
  13. /*#
  14. ref https://het.as.utexas.edu/HET/Software/html/qtdeclarative.html
  15. ref https://doc.qt.io/qt-5/qtquick-porting-qt5.html
  16. ref https://github.com/KDABLabs/DeclarativeWidgets
  17. ref https://www.qt.io/blog/2017/01/19/should-you-be-using-qgraphicsview
  19. https://qmlbook.github.io/#
  20. https://github.com/machinekit/QtQuickVcp
  21. https://github.com/FabriceSalvaire/qt5-vector-graphic-shaders
  22. https://box2d.org/
  24. https://www.learnqt.guide/working-with-events
  26. # 可参考 qtcharts QML 组件,它使用图形视图框架移植到QML图表。
  27. https://github.com/qt/qtcharts/tree/dev
  29. */
  30. class QmlGraphicsView : public QQuickPaintedItem
  31. {
  32.     Q_OBJECT
  33.  
  34. public:
  35.     QmlGraphicsView(QQuickItem* parent = nullptr)
  36.       : QQuickPaintedItem(parent) {
  37.         // Set item flags
  38.         setFlag(ItemHasContents, true);
  39.  
  40.         // Initialize the GraphicsScene
  41.         m_scene = new QGraphicsScene(this);
  42.         setAntialiasing(QQuickItem::antialiasing());
  43.         connect(m_scene, &QGraphicsScene::changed, this, &QmlGraphicsView::sceneChanged);
  44.         connect(this, &QmlGraphicsView::needRender, this, &QmlGraphicsView::renderScene, Qt::QueuedConnection);
  45.         connect(this, SIGNAL(antialiasingChanged(bool)), this, SLOT(handleAntialiasingChanged(bool)));
  46.  
  47.         // add Text
  48.         m_scene->addText("Hello, world!\ncheungxiongwei");
  49.         m_scene->addRect(1, 1, 85, 32);
  50.  
  51.         setAcceptedMouseButtons(Qt::AllButtons);
  52.         setAcceptHoverEvents(true);
  53.     }
  54.  
  55.     ~QmlGraphicsView() { delete m_sceneImage; }
  56.  
  57. signals:
  58.  
  59. public:
  60.     void paint(QPainter* painter) override {
  61.         if(m_sceneImage && painter) {
  62.             auto pos = boundingRect().center() - m_scene->sceneRect().center();
  63.             painter->drawImage(pos, *m_sceneImage);
  64.         }
  65.     }
  66.  
  67. Q_SIGNALS:
  68.     void needRender();
  69. private Q_SLOTS:
  70.  
  71.     void handleAntialiasingChanged(bool enable) {
  72.         setAntialiasing(enable);
  73.         emit needRender();
  74.     }
  75.  
  76.     void sceneChanged(QList<QRectF> region) {
  77.         const int count       = region.size();
  78.         const qreal limitSize = 0.01;
  79.         if(count && !m_updatePending) {
  80.             qreal totalSize = 0.0;
  81.             for(int i = 0; i < count; i++) {
  82.                 const QRectF& reg = region.at(i);
  83.                 totalSize += (reg.height() * reg.width());
  84.                 if(totalSize >= limitSize) break;
  85.             }
  86.             // Ignore region updates that change less than small fraction of a pixel,
  87.             // as there is little point regenerating the image in these cases. These
  88.             // are typically cases where OpenGL series are drawn to otherwise static
  89.             // view.
  90.             if(totalSize >= limitSize) {
  91.                 m_updatePending = true;
  92.                 // Do async render to avoid some unnecessary renders.
  93.                 emit needRender();
  94.             } else {
  95.                 // We do want to call update to trigger possible gl series updates.
  96.                 update();
  97.             }
  98.         }
  99.     }
  100.  
  101.     void renderScene() {
  102.         m_updatePending = false;
  103.  
  104.         QSize viewSize = size().toSize();
  105.         if(!m_sceneImage || viewSize != m_sceneImage->size()) {
  106.             delete m_sceneImage;
  107.             qreal dpr    = window() ? window()->devicePixelRatio() : 1.0;
  108.             m_sceneImage = new QImage(viewSize * dpr, QImage::Format_ARGB32);
  109.             m_sceneImage->setDevicePixelRatio(dpr);
  110.             m_sceneImageNeedsClear = true;
  111.         }
  112.  
  113.         if(m_sceneImageNeedsClear) {
  114.             m_sceneImage->fill(Qt::transparent);
  115.         }
  116.  
  117.         QPainter painter(m_sceneImage);
  118.         if(antialiasing()) {
  119.             painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing | QPainter::SmoothPixmapTransform);
  120.         }
  121.         QRect renderRect(QPoint(0, 0), viewSize);
  122.         m_scene->render(&painter, renderRect, renderRect);
  123.         update();
  124.     }
  125.  
  126. protected:
  127.     void mousePressEvent(QMouseEvent* event) override {
  128.         m_mousePressScenePoint     = event->pos();
  129.         m_mousePressScreenPoint    = event->globalPos();
  130.         m_lastMouseMoveScenePoint  = m_mousePressScenePoint;
  131.         m_lastMouseMoveScreenPoint = m_mousePressScreenPoint;
  132.         m_mousePressButton         = event->button();
  133.         m_mousePressButtons        = event->buttons();
  134.  
  135.         QGraphicsSceneMouseEvent mouseEvent(QEvent::GraphicsSceneMousePress);
  136.         mouseEvent.setWidget(0);
  137.         mouseEvent.setButtonDownScenePos(m_mousePressButton, m_mousePressScenePoint);
  138.         mouseEvent.setButtonDownScreenPos(m_mousePressButton, m_mousePressScreenPoint);
  139.         mouseEvent.setScenePos(m_mousePressScenePoint);
  140.         mouseEvent.setScreenPos(m_mousePressScreenPoint);
  141.         mouseEvent.setLastScenePos(m_lastMouseMoveScenePoint);
  142.         mouseEvent.setLastScreenPos(m_lastMouseMoveScreenPoint);
  143.         mouseEvent.setButtons(m_mousePressButtons);
  144.         mouseEvent.setButton(m_mousePressButton);
  145.         mouseEvent.setModifiers(event->modifiers());
  146.         mouseEvent.setAccepted(false);
  147.  
  148.         QApplication::sendEvent(m_scene, &mouseEvent);
  149.  
  150.         update();
  151.     }
  152.  
  153.     void mouseReleaseEvent(QMouseEvent* event) override {
  154.         QGraphicsSceneMouseEvent mouseEvent(QEvent::GraphicsSceneMouseRelease);
  155.         mouseEvent.setWidget(0);
  156.         mouseEvent.setButtonDownScenePos(m_mousePressButton, m_mousePressScenePoint);
  157.         mouseEvent.setButtonDownScreenPos(m_mousePressButton, m_mousePressScreenPoint);
  158.         mouseEvent.setScenePos(event->pos());
  159.         mouseEvent.setScreenPos(event->globalPos());
  160.         mouseEvent.setLastScenePos(m_lastMouseMoveScenePoint);
  161.         mouseEvent.setLastScreenPos(m_lastMouseMoveScreenPoint);
  162.         mouseEvent.setButtons(event->buttons());
  163.         mouseEvent.setButton(event->button());
  164.         mouseEvent.setModifiers(event->modifiers());
  165.         mouseEvent.setAccepted(false);
  166.  
  167.         QApplication::sendEvent(m_scene, &mouseEvent);
  168.  
  169.         m_mousePressButtons = event->buttons();
  170.         m_mousePressButton  = Qt::NoButton;
  171.  
  172.         update();
  173.     }
  174.  
  175.     void hoverMoveEvent(QHoverEvent* event) override {
  176.         QPointF previousLastScenePoint = m_lastMouseMoveScenePoint;
  177.  
  178.         // Convert hover move to mouse move, since we don't seem to get actual mouse move events.
  179.         // QGraphicsScene generates hover events from mouse move events, so we don't need
  180.         // to pass hover events there.
  181.         QGraphicsSceneMouseEvent mouseEvent(QEvent::GraphicsSceneMouseMove);
  182.         mouseEvent.setWidget(0);
  183.         mouseEvent.setButtonDownScenePos(m_mousePressButton, m_mousePressScenePoint);
  184.         mouseEvent.setButtonDownScreenPos(m_mousePressButton, m_mousePressScreenPoint);
  185.         mouseEvent.setScenePos(event->pos());
  186.         // Hover events do not have global pos in them, and the screen position doesn't seem to
  187.         // matter anyway in this use case, so just pass event pos instead of trying to
  188.         // calculate the real screen position.
  189.         mouseEvent.setScreenPos(event->pos());
  190.         mouseEvent.setLastScenePos(m_lastMouseMoveScenePoint);
  191.         mouseEvent.setLastScreenPos(m_lastMouseMoveScreenPoint);
  192.         mouseEvent.setButtons(m_mousePressButtons);
  193.         mouseEvent.setButton(m_mousePressButton);
  194.         mouseEvent.setModifiers(event->modifiers());
  195.         m_lastMouseMoveScenePoint  = mouseEvent.scenePos();
  196.         m_lastMouseMoveScreenPoint = mouseEvent.screenPos();
  197.         mouseEvent.setAccepted(false);
  198.  
  199.         QApplication::sendEvent(m_scene, &mouseEvent);
  200.  
  201.         // Update triggers another hover event, so let's not handle successive hovers at same
  202.         // position to avoid infinite loop.
  203.         if(previousLastScenePoint != m_lastMouseMoveScenePoint) {
  204.             update();
  205.         }
  206.     }
  207.  
  208.     void mouseDoubleClickEvent(QMouseEvent* event) override {
  209.         m_mousePressScenePoint     = event->pos();
  210.         m_mousePressScreenPoint    = event->globalPos();
  211.         m_lastMouseMoveScenePoint  = m_mousePressScenePoint;
  212.         m_lastMouseMoveScreenPoint = m_mousePressScreenPoint;
  213.         m_mousePressButton         = event->button();
  214.         m_mousePressButtons        = event->buttons();
  215.  
  216.         QGraphicsSceneMouseEvent mouseEvent(QEvent::GraphicsSceneMouseDoubleClick);
  217.         mouseEvent.setWidget(0);
  218.         mouseEvent.setButtonDownScenePos(m_mousePressButton, m_mousePressScenePoint);
  219.         mouseEvent.setButtonDownScreenPos(m_mousePressButton, m_mousePressScreenPoint);
  220.         mouseEvent.setScenePos(m_mousePressScenePoint);
  221.         mouseEvent.setScreenPos(m_mousePressScreenPoint);
  222.         mouseEvent.setLastScenePos(m_lastMouseMoveScenePoint);
  223.         mouseEvent.setLastScreenPos(m_lastMouseMoveScreenPoint);
  224.         mouseEvent.setButtons(m_mousePressButtons);
  225.         mouseEvent.setButton(m_mousePressButton);
  226.         mouseEvent.setModifiers(event->modifiers());
  227.         mouseEvent.setAccepted(false);
  228.  
  229.         QApplication::sendEvent(m_scene, &mouseEvent);
  230.  
  231.         update();
  232.     }
  233.  
  234. private:
  235.     QGraphicsScene* m_scene {nullptr};
  236.  
  237.     QPointF m_mousePressScenePoint;
  238.     QPoint m_mousePressScreenPoint;
  239.     QPointF m_lastMouseMoveScenePoint;
  240.     QPoint m_lastMouseMoveScreenPoint;
  241.     Qt::MouseButton m_mousePressButton;
  242.     Qt::MouseButtons m_mousePressButtons;
  243.  
  244.     QImage* m_sceneImage {nullptr};
  245.     bool m_updatePending {false};
  246.     bool m_sceneImageNeedsClear {false};
  247. };

代码仓库

https://gitcode.net/cheungxiongwei/qmlwidgets

总结

通过以上步骤，您可以在QML中成功集成图形视图框架，创建交互式的图形界面。这使您能够轻松地管理和展示2D图形元素，为用户提供出色的图形体验。

无论是游戏开发、数据可视化还是其他需要图形界面的应用程序，Qt的图形视图框架为开发者提供了一个强大的工具，使其能够以直观和交互式的方式与用户进行互动。

希望本文对您理解如何在QML中使用图形视图框架提供了一些帮助。如果您想深入学习和探索这个主题，可以查看Qt官方文档和示例代码。祝您在Qt开发中取得成功！

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号