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

news2024/11/18 15:23:40

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

  • 使用图形视图框架(Graphics View Framework)在QML中创建交互式图形界面
    • 使用图形视图框架(Graphics View Framework)在QML中创建交互式图形界面
    • 什么是图形视图框架(Graphics View Framework)？
    • 在QML中使用图形视图框架
      • 步骤1：项目配置
      • 步骤2：创建QmlGraphicsView类
      • 步骤3：注册自定义类型
      • 步骤4：创建QML界面
      • 步骤5：运行应用程序
      • 完整代码
    • 总结

Graphics View Framework

使用图形视图框架(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中显示图形内容。这个类将充当图形视图的容器。

// QmlGraphicsView.h
#pragma once

// Include necessary Qt headers

class QmlGraphicsView : public QQuickPaintedItem
{
    Q_OBJECT

public:
    QmlGraphicsView(QQuickItem* parent = nullptr)
      : QQuickPaintedItem(parent) {
        // 初始化图形场景并添加图形元素
        // 设置交互选项
    }

    // 实现绘制函数
    void paint(QPainter* painter) override {
        // 绘制图形内容
    }

signals:
    // 自定义信号

private slots:
    // 自定义槽函数

protected:
    // 处理鼠标和交互事件的函数
};
步骤3：注册自定义类型

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

qmlRegisterType<QmlGraphicsView>("QmlWidgets", 1, 0, "QmlGraphicsView");
步骤4：创建QML界面

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

import QtQuick 2.15
import QtQuick.Window 2.15
import QmlWidgets 1.0

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("QmlWidgets")

    QmlGraphicsView {
        anchors.fill: parent
    }
}
步骤5：运行应用程序

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

完整代码
#pragma once

#include <QApplication>
#include <QDebug>
#include <QEvent>
#include <QGraphicsScene>
#include <QGraphicsView>
#include <QQuickPaintedItem>
#include <QQuickWindow>
#include <QPainter>
#include <QGraphicsSceneMouseEvent>

/*#
ref https://het.as.utexas.edu/HET/Software/html/qtdeclarative.html
ref https://doc.qt.io/qt-5/qtquick-porting-qt5.html
ref https://github.com/KDABLabs/DeclarativeWidgets
ref https://www.qt.io/blog/2017/01/19/should-you-be-using-qgraphicsview

https://qmlbook.github.io/#
https://github.com/machinekit/QtQuickVcp
https://github.com/FabriceSalvaire/qt5-vector-graphic-shaders
https://box2d.org/

https://www.learnqt.guide/working-with-events

# 可参考 qtcharts QML 组件,它使用图形视图框架移植到QML图表。
https://github.com/qt/qtcharts/tree/dev

*/
class QmlGraphicsView : public QQuickPaintedItem
{
    Q_OBJECT

public:
    QmlGraphicsView(QQuickItem* parent = nullptr)
      : QQuickPaintedItem(parent) {
        // Set item flags
        setFlag(ItemHasContents, true);

        // Initialize the GraphicsScene
        m_scene = new QGraphicsScene(this);
        setAntialiasing(QQuickItem::antialiasing());
        connect(m_scene, &QGraphicsScene::changed, this, &QmlGraphicsView::sceneChanged);
        connect(this, &QmlGraphicsView::needRender, this, &QmlGraphicsView::renderScene, Qt::QueuedConnection);
        connect(this, SIGNAL(antialiasingChanged(bool)), this, SLOT(handleAntialiasingChanged(bool)));

        // add Text
        m_scene->addText("Hello, world!\ncheungxiongwei");
        m_scene->addRect(1, 1, 85, 32);

        setAcceptedMouseButtons(Qt::AllButtons);
        setAcceptHoverEvents(true);
    }

    ~QmlGraphicsView() { delete m_sceneImage; }

signals:

public:
    void paint(QPainter* painter) override {
        if(m_sceneImage && painter) {
            auto pos = boundingRect().center() - m_scene->sceneRect().center();
            painter->drawImage(pos, *m_sceneImage);
        }
    }

Q_SIGNALS:
    void needRender();
private Q_SLOTS:

    void handleAntialiasingChanged(bool enable) {
        setAntialiasing(enable);
        emit needRender();
    }

    void sceneChanged(QList<QRectF> region) {
        const int count       = region.size();
        const qreal limitSize = 0.01;
        if(count && !m_updatePending) {
            qreal totalSize = 0.0;
            for(int i = 0; i < count; i++) {
                const QRectF& reg = region.at(i);
                totalSize += (reg.height() * reg.width());
                if(totalSize >= limitSize) break;
            }
            // Ignore region updates that change less than small fraction of a pixel,
            // as there is little point regenerating the image in these cases. These
            // are typically cases where OpenGL series are drawn to otherwise static
            // view.
            if(totalSize >= limitSize) {
                m_updatePending = true;
                // Do async render to avoid some unnecessary renders.
                emit needRender();
            } else {
                // We do want to call update to trigger possible gl series updates.
                update();
            }
        }
    }

    void renderScene() {
        m_updatePending = false;

        QSize viewSize = size().toSize();
        if(!m_sceneImage || viewSize != m_sceneImage->size()) {
            delete m_sceneImage;
            qreal dpr    = window() ? window()->devicePixelRatio() : 1.0;
            m_sceneImage = new QImage(viewSize * dpr, QImage::Format_ARGB32);
            m_sceneImage->setDevicePixelRatio(dpr);
            m_sceneImageNeedsClear = true;
        }

        if(m_sceneImageNeedsClear) {
            m_sceneImage->fill(Qt::transparent);
        }

        QPainter painter(m_sceneImage);
        if(antialiasing()) {
            painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing | QPainter::SmoothPixmapTransform);
        }
        QRect renderRect(QPoint(0, 0), viewSize);
        m_scene->render(&painter, renderRect, renderRect);
        update();
    }

protected:
    void mousePressEvent(QMouseEvent* event) override {
        m_mousePressScenePoint     = event->pos();
        m_mousePressScreenPoint    = event->globalPos();
        m_lastMouseMoveScenePoint  = m_mousePressScenePoint;
        m_lastMouseMoveScreenPoint = m_mousePressScreenPoint;
        m_mousePressButton         = event->button();
        m_mousePressButtons        = event->buttons();

        QGraphicsSceneMouseEvent mouseEvent(QEvent::GraphicsSceneMousePress);
        mouseEvent.setWidget(0);
        mouseEvent.setButtonDownScenePos(m_mousePressButton, m_mousePressScenePoint);
        mouseEvent.setButtonDownScreenPos(m_mousePressButton, m_mousePressScreenPoint);
        mouseEvent.setScenePos(m_mousePressScenePoint);
        mouseEvent.setScreenPos(m_mousePressScreenPoint);
        mouseEvent.setLastScenePos(m_lastMouseMoveScenePoint);
        mouseEvent.setLastScreenPos(m_lastMouseMoveScreenPoint);
        mouseEvent.setButtons(m_mousePressButtons);
        mouseEvent.setButton(m_mousePressButton);
        mouseEvent.setModifiers(event->modifiers());
        mouseEvent.setAccepted(false);

        QApplication::sendEvent(m_scene, &mouseEvent);

        update();
    }

    void mouseReleaseEvent(QMouseEvent* event) override {
        QGraphicsSceneMouseEvent mouseEvent(QEvent::GraphicsSceneMouseRelease);
        mouseEvent.setWidget(0);
        mouseEvent.setButtonDownScenePos(m_mousePressButton, m_mousePressScenePoint);
        mouseEvent.setButtonDownScreenPos(m_mousePressButton, m_mousePressScreenPoint);
        mouseEvent.setScenePos(event->pos());
        mouseEvent.setScreenPos(event->globalPos());
        mouseEvent.setLastScenePos(m_lastMouseMoveScenePoint);
        mouseEvent.setLastScreenPos(m_lastMouseMoveScreenPoint);
        mouseEvent.setButtons(event->buttons());
        mouseEvent.setButton(event->button());
        mouseEvent.setModifiers(event->modifiers());
        mouseEvent.setAccepted(false);

        QApplication::sendEvent(m_scene, &mouseEvent);

        m_mousePressButtons = event->buttons();
        m_mousePressButton  = Qt::NoButton;

        update();
    }

    void hoverMoveEvent(QHoverEvent* event) override {
        QPointF previousLastScenePoint = m_lastMouseMoveScenePoint;

        // Convert hover move to mouse move, since we don't seem to get actual mouse move events.
        // QGraphicsScene generates hover events from mouse move events, so we don't need
        // to pass hover events there.
        QGraphicsSceneMouseEvent mouseEvent(QEvent::GraphicsSceneMouseMove);
        mouseEvent.setWidget(0);
        mouseEvent.setButtonDownScenePos(m_mousePressButton, m_mousePressScenePoint);
        mouseEvent.setButtonDownScreenPos(m_mousePressButton, m_mousePressScreenPoint);
        mouseEvent.setScenePos(event->pos());
        // Hover events do not have global pos in them, and the screen position doesn't seem to
        // matter anyway in this use case, so just pass event pos instead of trying to
        // calculate the real screen position.
        mouseEvent.setScreenPos(event->pos());
        mouseEvent.setLastScenePos(m_lastMouseMoveScenePoint);
        mouseEvent.setLastScreenPos(m_lastMouseMoveScreenPoint);
        mouseEvent.setButtons(m_mousePressButtons);
        mouseEvent.setButton(m_mousePressButton);
        mouseEvent.setModifiers(event->modifiers());
        m_lastMouseMoveScenePoint  = mouseEvent.scenePos();
        m_lastMouseMoveScreenPoint = mouseEvent.screenPos();
        mouseEvent.setAccepted(false);

        QApplication::sendEvent(m_scene, &mouseEvent);

        // Update triggers another hover event, so let's not handle successive hovers at same
        // position to avoid infinite loop.
        if(previousLastScenePoint != m_lastMouseMoveScenePoint) {
            update();
        }
    }

    void mouseDoubleClickEvent(QMouseEvent* event) override {
        m_mousePressScenePoint     = event->pos();
        m_mousePressScreenPoint    = event->globalPos();
        m_lastMouseMoveScenePoint  = m_mousePressScenePoint;
        m_lastMouseMoveScreenPoint = m_mousePressScreenPoint;
        m_mousePressButton         = event->button();
        m_mousePressButtons        = event->buttons();

        QGraphicsSceneMouseEvent mouseEvent(QEvent::GraphicsSceneMouseDoubleClick);
        mouseEvent.setWidget(0);
        mouseEvent.setButtonDownScenePos(m_mousePressButton, m_mousePressScenePoint);
        mouseEvent.setButtonDownScreenPos(m_mousePressButton, m_mousePressScreenPoint);
        mouseEvent.setScenePos(m_mousePressScenePoint);
        mouseEvent.setScreenPos(m_mousePressScreenPoint);
        mouseEvent.setLastScenePos(m_lastMouseMoveScenePoint);
        mouseEvent.setLastScreenPos(m_lastMouseMoveScreenPoint);
        mouseEvent.setButtons(m_mousePressButtons);
        mouseEvent.setButton(m_mousePressButton);
        mouseEvent.setModifiers(event->modifiers());
        mouseEvent.setAccepted(false);

        QApplication::sendEvent(m_scene, &mouseEvent);

        update();
    }

private:
    QGraphicsScene* m_scene {nullptr};

    QPointF m_mousePressScenePoint;
    QPoint m_mousePressScreenPoint;
    QPointF m_lastMouseMoveScenePoint;
    QPoint m_lastMouseMoveScreenPoint;
    Qt::MouseButton m_mousePressButton;
    Qt::MouseButtons m_mousePressButtons;

    QImage* m_sceneImage {nullptr};
    bool m_updatePending {false};
    bool m_sceneImageNeedsClear {false};
};

代码仓库
https://gitcode.net/cheungxiongwei/qmlwidgets

总结

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

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1062831.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

MATLAB算法实战应用案例精讲-【优化算法】沙丁鱼优化算法（SOA）（附MATLAB代码实现）

MATLAB算法实战应用案例精讲-【优化算法】沙丁鱼优化算法（SOA）（附MATLAB代码实现）

前言 沙丁鱼优化算法(Sardine optimization algorithm,SOA)由Zhang HongGuang等人于2023年提出，该算法模拟沙丁鱼的生存策略，具有搜索能力强，求解精度高等特点。 沙丁鱼主要以浮游生物为食，这些生物包括细菌、腔肠动物、软体动物、原生动物、十足目、幼小藤壶、鱼卵、甲藻…
阅读更多...
cartographer-(0)-ubuntu(20.04)-环境安装

cartographer-(0)-ubuntu(20.04)-环境安装

1.安装 ROS wiki.ros.org 1.1修改镜像源&#xff1a; 到网站上找与操作系统相匹配的镜像源 ubuntu | 镜像站使用帮助 | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror # 默认注释了源码镜像以提高 apt update 速度&#xff0c;如有需要可自行取消注释 deb htt…
阅读更多...
MySQL基础-事务

MySQL基础-事务

目录 1.事务简介 2.事务的操作 2.1 实验需要用到的数据 2.2 完成转账操作 修改事务执行方式 手动开启事务的方式 3.事务的四大特性 4.并发事务问题 1.事务简介 事务是一组操作的集合&#xff0c;它是一个不可分割的工作单位&#xff0c;事务会把所有的操作作为一个整体一…
阅读更多...
【开发篇】十五、Spring Task实现定时任务

【开发篇】十五、Spring Task实现定时任务

文章目录 1、使用示例2、相关配置3、Scheduled注解4、Spring Task单线程下的阻塞坑5、Spring Task阻塞问题的处理思路6、Spring Task在分布式环境中 上一篇用Quartz来实现了定时任务&#xff0c;但相对来说&#xff0c;这个框架还是比较繁琐。Spring Boot默认在无任何第三方依赖…
阅读更多...
一天销量200万，国产5G手机20天才200万，挑战iPhone也就想想罢了

一天销量200万，国产5G手机20天才200万，挑战iPhone也就想想罢了

国产5G手机频频放话要挑战iPhone&#xff0c;不过现实却相当打脸&#xff0c;果粉对苹果的忠诚丝毫没有受到影响&#xff0c;销量是最直接的表现&#xff0c;那就是国产5G手机20天才卖出200万部&#xff0c;而这仅仅是iPhone15一天的销量。 iPhone15在发布前曾拉高了消费者的期…
阅读更多...
【应用层协议】初始Http，fiddler的使用

【应用层协议】初始Http，fiddler的使用

文章目录 1. HTTP概念2. 下载fiddler及使用获得HTTP协议格式2.1 fiddler的下载2.2 fiddler使用 3. HTTP请求&#xff08;Request&#xff09;3.1 请求行3.1.1 URL3.1.2 方法3.1.2.1 GET3.1.2.2 POST3.1.2.3 其他方法 3.2 报头&#xff08;header&#xff09;3.3 空白行3.4 正文…
阅读更多...
Django 模型层的操作（Django-05 ）

Django 模型层的操作（Django-05 ）

一 模型层的解读 Django中内嵌了ORM框架&#xff0c;不需要直接编写SQL语句进行数据库操作&#xff0c;而是通过定义模型类&#xff0c;操作模型类来完成对数据库中表的增删改查和创建等操作。 O 是object&#xff0c;也就类对象的意思。R 是relation&#xff0c;翻译成中文是…
阅读更多...
Python综合案例：学生管理系统

Python综合案例：学生管理系统

目录 需求说明&#xff1a; 功能&#xff1a; 创建入口函数&#xff1a; 实现菜单函数&#xff1a; 实现增删查操作&#xff1a; 1. 新增学生 2. 展示学生 3. 查找学生 4. 删除学生 加入存档读档&#xff1a; 1. 约定存档格式 2. 实现存档函数 3. 实现读档函数 打…
阅读更多...
C#中的数组探究与学习

C#中的数组探究与学习

目录 C#中的数组一般分为：一.数组定义：为什么要使用数组？什么是数组？C#一维数组for和foreach的区别C#多维数组C#锯齿数组初始化的意义：适用场景：C#中的数组一般分为： ​①.一维数组。 ②.多维数组，也叫矩形数组。 ③.锯齿数组，也叫交错数组。 一.数组定义： 数组…
阅读更多...
013-第二代上位机开发环境搭建

013-第二代上位机开发环境搭建

第二代上位机开发环境搭建 文章目录 第二代上位机开发环境搭建项目介绍虚拟机安装Debian 10文件传输远程调试VNCrsync下载安装验证 配置远程调试环境配置远程设备配置 kitsCompilers配置Qtversions配置kits 测试 总结一下 关键字&#xff1a; Qt、 Qml、 关键字3、 关键字4…
阅读更多...
GitHub爬虫项目详解

GitHub爬虫项目详解

前言 闲来无事浏览GitHub的时候&#xff0c;看到一个仓库&#xff0c;里边列举了Java的优秀开源项目列表&#xff0c;包括说明、仓库地址等&#xff0c;还是很具有学习意义的。但是大家也知道&#xff0c;国内访问GitHub的时候&#xff0c;经常存在访问超时的问题&#xff0c;…
阅读更多...
云安全之等级保护解决方案及应用场景

云安全之等级保护解决方案及应用场景

等保2.0解决方案背景 适应云计算、移动互联网、大数据、物联网和工业控制等新技术发展&#xff0c;在新的技术场景能够顺利开展等级保护工作;《网络安全法》2016年已正式发布&#xff0c;等级保护2.0为了更好配合《网络安全法》的实施&#xff1b;等级保护1.0&#xff0c;在适…
阅读更多...
U盘支持启动区+文件存储区的分区方法

U盘支持启动区+文件存储区的分区方法

准备新U盘 启动diskgenius &#xff0c;先建立一个主分区&#xff08;7G&#xff09;&#xff0c;剩余空间建立为第二分区&#xff0c;然后设定第二分区激活。 diskgenius格式化 用diskgenius格式化&#xff0c;在格式化的过程中有一个 写入dos系统的选项&#xff0c;在格式…
阅读更多...
企业微信机器人对接GPT

企业微信机器人对接GPT

现在网上大部分微信机器人项目都是基于个人微信实现的&#xff0c;常见的类库都是模拟网页版微信接口。 个人微信作为我们自己日常使用的工具&#xff0c;也用于支付场景&#xff0c;很怕因为违规而被封。这时&#xff0c;可以使用我们的企业微信机器人&#xff0c;利用企业微信…
阅读更多...
抄写Linux源码(Day14：从 MBR 到 C main 函数 (3：研究 head.s) )

抄写Linux源码(Day14：从 MBR 到 C main 函数 (3：研究 head.s) )

回忆我们需要做的事情&#xff1a; 为了支持 shell 程序的执行&#xff0c;我们需要提供&#xff1a; 1.缺页中断(不理解为什么要这个东西&#xff0c;只是闪客说需要&#xff0c;后边再说) 2.硬盘驱动、文件系统 (shell程序一开始是存放在磁盘里的&#xff0c;所以需要这两个东…
阅读更多...
linux以太网（三）.之netstat命令

linux以太网（三）.之netstat命令

引言&#xff1a; netstat命令是一个监控TCP/IP网络的非常有用的工具&#xff0c;它可以显示路由表、实际的网络连接以及每一个网络接口设备的状态信息 语法选项&#xff1a; netstat [选项] -a或--all&#xff1a;显示所有连线中的Socket&#xff1b; -A<网络类型>或…
阅读更多...
JUC第十五讲：JUC集合-ConcurrentHashMap详解（面试的重点）

JUC第十五讲：JUC集合-ConcurrentHashMap详解（面试的重点）

JUC第十五讲&#xff1a;JUC集合-ConcurrentHashMap详解 本文是JUC第十五讲&#xff1a;JUC集合-ConcurrentHashMap详解。JDK1.7之前的ConcurrentHashMap使用分段锁机制实现&#xff0c;JDK1.8则使用数组链表红黑树数据结构和CAS原子操作实现ConcurrentHashMap&#xff1b;本文…
阅读更多...
跨站脚本攻击（XSS）以及如何防止它？

跨站脚本攻击（XSS）以及如何防止它？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 什么是跨站脚本攻击&#xff08;XSS&#xff09;&#xff1f;⭐ 如何防止XSS攻击&#xff1f;⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#…
阅读更多...
复习 --- 消息队列

复习 --- 消息队列

进程间通信机制(IPC) 简述 IPC&#xff1a;Inter Process Communication 进程和进程之间的用户空间相互独立&#xff0c;但是4G内核空间共享&#xff0c;进程间的通信就是通过这4G的内核空间 分类 传统的进程间通信机制 无名管道&#xff08;pipe&#xff09; 有名管道&…
阅读更多...
Linux Vi编辑器基础操作指南

Linux Vi编辑器基础操作指南

Linux Vi编辑器基础操作指南 Linux中的Vi是一个强大的文本编辑器&#xff0c;虽然它有一些陡峭的学习曲线&#xff0c;但一旦掌握了基本操作&#xff0c;它就变得非常高效。以下是Vi编辑器的一些基本用法&#xff1a; 打开Vi编辑器&#xff1a; vi 文件名退出Vi编辑器&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023