流程图拖拽视觉编程-流程编辑器

目录

一、简介

二、流程编辑器-视图实现

三、参考资料


一、简介

前期文章:

流程图拖拽视觉编程--概述_Jason~shen的博客-CSDN博客

本期内容:

本期将介绍流程编辑器模块的实现方法,效果图如下所示。该模块基于QT Graphics/View实现,由视图、自定义图元、图元管理器组成。

二、流程编辑器-视图实现

视图的功能是提供一个节点显示窗口,支持缩放、平移和网格线背景。

该部分继承QGraphicsView实现,定义接口如下:

class GRAPHICSLIBSHARED_EXPORT BaseGraphicsView: public QGraphicsView
{
    Q_OBJECT
public:
    explicit BaseGraphicsView(QWidget *parent = nullptr);
    ~BaseGraphicsView();
    void setFactorMax(double val);     //最大缩放因子
    void setFactorMin(double val);     //最小缩放因子
    void setShowGrid(bool b);          //是否显示网格线
    void setMoveSceneEnabled(bool b);  //是否平移使能

public slots:
    void zoomIn();
    void zoomOut();

protected:
    void wheelEvent(QWheelEvent *event) Q_DECL_OVERRIDE;
    void drawBackground(QPainter *painter, const QRectF &rect) Q_DECL_OVERRIDE;
    void mousePressEvent(QMouseEvent *event) Q_DECL_OVERRIDE;
    void mouseMoveEvent(QMouseEvent *event) Q_DECL_OVERRIDE;
    void mouseReleaseEvent(QMouseEvent *event) Q_DECL_OVERRIDE;

private:
    void drawGrid(QPainter *painter, double gridStep);

private:
    double m_factorMax;
    double m_factorMin;
    QPointF m_scenePos;
    QPointF m_pressPos;
    bool m_moveScene;
    bool m_showGrid;
    bool m_moveSceneEnabled;
};

缩放的实现:核心函数scale(), 配合鼠标事件操作,重写鼠标滚动事件函数wheelEvent,限制视图过大或者过小。

void BaseGraphicsView::zoomIn()
{
    setTransformationAnchor(QGraphicsView::AnchorUnderMouse);
    scale(1.2, 1.2);
}

void BaseGraphicsView::zoomOut()
{
    setTransformationAnchor(QGraphicsView::AnchorUnderMouse);
    scale(1 / 1.2, 1 / 1.2);
}

void BaseGraphicsView::wheelEvent(QWheelEvent *event)
{
    qreal factor_out = transform().scale(1.2, 1.2).mapRect(QRectF(0, 0, 1, 1)).width();
    qreal factor_in = transform().scale(1 / 1.2, 1 / 1.2).mapRect(QRectF(0, 0, 1, 1)).width();

    if (event->delta() > 0)
    {
        if(factor_out > m_factorMax)
        {
            return;    /* 防止视图过大 */
        }
        zoomIn();
    }
    else
    {
        if(factor_in < m_factorMin)
        {
            return;    /* 防止视图过小 */
        }
        zoomOut();
    }
    update();
}

平移的实现: 核心函数setSceneRect(),配合鼠标事件操作,重写鼠标按下mousePressEvent、移动mouseMoveEvent、释放mouseReleaseEvent事件函数。

void BaseGraphicsView::mousePressEvent(QMouseEvent *event)
{
    if(m_moveSceneEnabled)
    {
        QMouseEvent fake(event->type(), event->pos(), Qt::LeftButton, Qt::LeftButton, event->modifiers());
        m_scenePos = mapToScene(event->pos());
        m_pressPos = m_scenePos;

        setDragMode(QGraphicsView::NoDrag);

        if (QApplication::keyboardModifiers() == Qt::ControlModifier &&
                event->button() == Qt::LeftButton)
        {
            setDragMode(QGraphicsView::RubberBandDrag);
        }

        if (event->button() == Qt::MiddleButton)
        {
            setDragMode(QGraphicsView::ScrollHandDrag);
            setInteractive(false);

            event = &fake;

            m_moveScene = true;
        }
        update();
    }
    QGraphicsView::mousePressEvent(event);
}

void BaseGraphicsView::mouseMoveEvent(QMouseEvent *event)
{
    if(m_moveSceneEnabled)
    {
        m_scenePos = mapToScene(event->pos());
        if (m_moveScene)
        {
            QPointF difference = m_pressPos - m_scenePos;
            setSceneRect(sceneRect().translated(difference.x(), difference.y()));
        }
        update();
    }
    QGraphicsView::mouseMoveEvent(event);
}

void BaseGraphicsView::mouseReleaseEvent(QMouseEvent *event)
{
    if(m_moveSceneEnabled)
    {
        QMouseEvent fake(event->type(), event->pos(), Qt::LeftButton, Qt::LeftButton, event->modifiers());
        if (event->button() == Qt::MiddleButton)
        {
            setDragMode(QGraphicsView::NoDrag);
            setInteractive(true);

            event = &fake;
        }

        m_moveScene = false;
        update();
    }
    QGraphicsView::mouseReleaseEvent(event);
}

网格线背景,通过绘图类QPainter画线,重写绘制背景函数drawBackground

void BaseGraphicsView::drawBackground(QPainter *painter, const QRectF &rect)
{
    QGraphicsView::drawBackground(painter, rect);
    if(m_showGrid)
    {
        QPen pfine(QColor::fromRgb(50, 50, 50), 0.6);

        painter->setPen(pfine);
        drawGrid(painter, 15);

        QPen p(QColor::fromRgb(50, 50, 50), 2.0);

        painter->setPen(p);
        drawGrid(painter, 150);
    }
}

void BaseGraphicsView::drawGrid(QPainter *painter, double gridStep)
{
    QRect   windowRect = rect();
    QPointF tl = mapToScene(windowRect.topLeft());
    QPointF br = mapToScene(windowRect.bottomRight());

    double left   = qFloor(tl.x() / gridStep - 0.5);
    double right  = qFloor(br.x() / gridStep + 1.0);
    double bottom = qFloor(tl.y() / gridStep - 0.5);
    double top    = qFloor(br.y() / gridStep + 1.0);

    for (int xi = int(left); xi <= int(right); ++xi)
    {
        QLineF line(xi * gridStep, bottom * gridStep,
                    xi * gridStep, top * gridStep );

        painter->drawLine(line);
    }

    for (int yi = int(bottom); yi <= int(top); ++yi)
    {
        QLineF line(left * gridStep, yi * gridStep,
                    right * gridStep, yi * gridStep );
        painter->drawLine(line);
    }
}

三、参考资料

文章

GitHub开源推荐 | 节点编辑器-技术圈

python版本

Pavel Křupala / pyqt-node-editor · GitLab

https://blog.csdn.net/mahuatengmmp/category_9948511.html

Release v0.3.1 · beyse/NodeEditor · GitHub

qt4/qt5版本

GitHub - Buanderie/qnodeseditor: Originally from http://algoholic.eu/qnodeseditor-qt-nodesports-based-data-processing-flow-editor/

GitHub - hzt1234hf/FlowChartTools: 使用QT开发的跨平台(Windows、Linux)流程图绘制工具

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

使用FFMPEG库封装264视频和acc音频数据到MP4文件中

准备 ffmepeg 4.4 一段H264的视频文件 一段acc格式的音频文件 封装流程 1.使用avformat_open_input分别打开视频和音频文件&#xff0c;初始化其AVFormatContext&#xff0c;使用avformat_find_stream_info获取编码器基本信息 2.使用avformat_alloc_output_context2初始化…

solidity 安全 如何阻止重入攻击

什么是可重入攻击&#xff1f; 我们使用合约的过程中&#xff0c;经常会遇到这种情况&#xff0c;智能合约能够调用外部的合约&#xff1b;这些外部合约又可以回调到调用他们的智能合约&#xff1b;在这种情况下&#xff0c;我们说智能合约被重新输入&#xff0c;这种情况被称为…

Hive ---- Hive 安装

Hive ---- Hive 安装 1. Hive安装地址2. Hive安装部署1. 安装Hive2. 启动并使用Hive 3. MySQL安装1. 安装MySQL2. 配置MySQL3. 卸载MySQL说明 4. 配置Hive元数据存储到MySQL1. 配置元数据到MySQL2. 验证元数据是否配置成功3. 查看MySQL中的元数据 5. Hive服务部署1. hiveserver…

图像处理:均值滤波算法

目录 前言 概念介绍 基本原理 Opencv实现中值滤波 Python手写实现均值滤波 参考文章 前言 在此之前&#xff0c;我曾在此篇中推导过图像处理&#xff1a;推导五种滤波算法&#xff08;均值、中值、高斯、双边、引导&#xff09;。这在此基础上&#xff0c;我想更深入地研…

wvp开发环境搭建

代码下载地址 代码下载地址 https://gitee.com/pan648540858/wvp-GB28181-pro.git 开发工具 采用jetbrain idea 利用开发工具下载代码 文件-新建-来自版本控制的项目 url是上面的代码下载链接&#xff0c;点击克隆即可 下图是已经克隆并打开的代码 安装依赖环境 安装redi…

d2l Transformer

终于到变形金刚了&#xff0c;他的主要特征在于多头自注意力的使用&#xff0c;以及摒弃了rnn的操作。 目录 1.原理 2.多头注意力 3.逐位前馈网络FFN 4.层归一化 5.残差连接 6.Encoder 7.Decoder 8.训练 9.预测 1.原理 主要贡献&#xff1a;1.纯使用attention的Enco…

计算机网络学习03(OSI、TCP/IP网络分层模型详解))

1、OSI 七层模型 OSI 七层模型 是国际标准化组织提出一个网络分层模型&#xff0c;其大体结构以及每一层提供的功能如下图所示&#xff1a; 每一层都专注做一件事情&#xff0c;并且每一层都需要使用下一层提供的功能比如传输层需要使用网络层提供的路由和寻址功能&#xff0…

创建NAT模式KVM虚拟机

创建NAT模式KVM虚拟机 1 添加脚本执行权限&#xff08;上传脚本文件至root目录&#xff09;。 首先需要给脚本赋予执行权限。 # chmod x qemu-ifup-NAT 2 启动虚拟机。 通过命令启动虚拟机。(记得安装net-tools) # yum install net-tools -y # qemu-kvm -m 1024 -drive fi…

WSL怎么使用本机进行代理联网

文章目录 WSL怎么使用本机代理进行联网问题来源设置v2rayN设置wsl总结参考 WSL怎么使用本机代理进行联网 问题来源 使用WSL克隆github的代码网速很慢&#xff0c;无响应&#xff0c;导致项目无法下载&#xff0c;真的愁人。就想到为WSL设置xx上网&#xff0c;是否就会好很多。…

超级详细的华为OSPF实验及配置

什么是OSPF&#xff1f; 开放式最短路径优先OSPF&#xff08;Open Shortest Path First&#xff09;是IETF组织开发的一个基于链路状态的内部网关协议&#xff08;Interior Gateway Protocol&#xff09;。 目前针对IPv4协议使用的是OSPF Version 2&#xff08;RFC2328&#x…

网络安全:通过445端口暴力破解植入木马。

网络安全&#xff1a;通过445端口暴力破解植入木马。 木马制作工具&#xff0c;如&#xff1a;灰鸽子等等 445端口是文件共享端口。可以进入对方文件硬盘进行植入木马&#xff1a; 使用文件共享进入对方磁盘&#xff1a; 在cmd输入net use \\x.x.x.x\ipc$ 之后会让你输入账号…

“数字中国·福启海丝”多屏互动光影艺术秀27日在福州举办

作为深化“数字海丝”的核心区、海上丝绸之路的枢纽城市&#xff0c;为喜迎第六届数字中国建设峰会盛大召开之际&#xff0c;福州市人民政府特此举办“数字中国福启海丝”多屏互动光影秀活动。本次光影秀活动是由福建省文化和旅游厅指导&#xff0c;福州市人民政府主办&#xf…

AutoGPT、AgentGPT、BabyAGI、HuggingGPT、CAMEL:各种基于GPT-4自治系统总结

ChatGPT和LLM技术的出现使得这些最先进的语言模型席卷了世界&#xff0c;不仅是AI的开发人员&#xff0c;爱好者和一些组织也在研究探索集成和构建这些模型的创新方法。各种平台如雨后春笋般涌现&#xff0c;集成并促进新应用程序的开发。 AutoGPT的火爆让我们看到越来越多的自…

机器学习实战:Python基于SVD奇异值分解进行矩阵分解(八)

文章目录 1 前言1.1 奇异值分解1.2 奇异值分解的应用 2 简单计算SVD2.1 NumPy 计算 SVD2.2 scikit-learn 计算截断 SVD2.3 scikit-learn 计算随机 SVD 3 demo数据演示3.1 导入函数3.2 导入数据3.3 计算SVD 4 讨论 1 前言 1.1 奇异值分解 奇异值分解&#xff08;Singular Valu…

【Python | 基础语法篇】02、标识符、运算符、字符串扩展及数据输入

目录 一、标识符 1.1 什么是标识符 1.2 标识符命名规则 1.2.1 标识符命名规则 - 内容限定 1.2.2 标识符命名规则 - 大小写敏感 1.2.3 标识符命名规则 - 不可使用关键字 1.3 案例演示 1.4 变量命名规范 1.4.1 变量命名规范 - 见名知意 ​1.4.2 变量命名规范 - 下划线…

MySQL——存储过程和函数从零基础到入门必学教程(涵盖基础实战)

文章目录 目录 文章目录 前言 一、创建存储过程 二、在存储过程中使用变量 1.定义变量 2.为变量赋值 三、光标的使用 1.打开光标 2.打开光标 3.使用光标 4.关闭光标 四、流程控制的作用 1.IF语句 2.CASE语句 3.LOOP语句 4.LEAVE语句 5.ITERATE语句 6.REPEAT语…

浅述 国产仪器 1761程控模块电源

1761程控模块电源是在自动测试环境中提供偏置功率和对部件或最终产品提供激励的理想设备&#xff0c;是测试系统必备的测试仪器。适用于研发、设计、生产制造等自动测试领域。 1761程控模块电源为用户选配电源提供了灵活性&#xff0c;根据需要可选购1&#xff5e;8种&#xff…

五一堵车 | AI“高速”车辆检测轻而易举监测大家安全

点击蓝字关注我们 关注并星标 从此不迷路 计算机视觉研究院 学习群&#xff5c;扫码在主页获取加入方式 计算机视觉研究院专栏 作者&#xff1a;Edison_G 五一节不管是离开小城镇还是进入大城市&#xff0c;每个高速路口都是堵车&#xff0c;现在人工智能愈来愈发达&#xff0c…

linux常用命令大全

作为开发者&#xff0c;Linux是我们必须掌握的操作系统之一。因此&#xff0c;在编写代码和部署应用程序时&#xff0c;熟练使用Linux命令非常重要。这些常用命令不得不会&#xff0c;掌握这些命令&#xff0c;工作上会事半功倍&#xff0c;大大提高工作效率。 一. 文件和目录…

OJ刷题 第十三篇

22102 - 将字符串反序 时间限制 : 1 秒 内存限制 : 128 MB 请将一个给定的字符串反序(字符长度为1到10000&#xff0c;且有可能包含空格)。 输入 反序前的字符串 输出 反序后的字符串 样例 输入 abcd 输出 dcba 答案&#xff1a; C版本1&#xff1a;&#xff08;掌握&…