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

这篇具有很好参考价值的文章主要介绍了流程图拖拽视觉编程-流程编辑器。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一、简介

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

三、参考资料


一、简介

前期文章:

流程图拖拽视觉编程--概述_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)流程图绘制工具文章来源地址https://www.toymoban.com/news/detail-447157.html

到了这里,关于流程图拖拽视觉编程-流程编辑器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Svg Flow Editor 原生svg流程图编辑器(五)

    Svg Flow Editor 原生svg流程图编辑器(一) Svg Flow Editor 原生svg流程图编辑器(二) Svg Flow Editor 原生svg流程图编辑器(三) Svg Flow Editor 原生svg流程图编辑器(四) Svg Flow Editor 原生svg流程图编辑器(五)         对协同这块已经写了很多篇文章了,如果还是不了解,可以看看之

    2024年04月12日
    浏览(66)
  • vue + gojs 实现拖拽流程图(实战项目)

    最近一段时间在研究go.js,它是一款前端开发画流程图的一个插件,也是一个难点,要说为什么是难点,首先,它是依赖画布canvas知识开发。其次,要依赖于内部API开发需求,开发项目实战需求的时候就要花费大量的时间去熟悉go.js的API,然后才能进行开发。话不多说,我就先

    2023年04月24日
    浏览(45)
  • 非常详细HDFS读写流程+完美视觉的HDFS读写流程图

    一、写数据流程: 客户端(Client通过java虚拟机)向NameNode请求上传文件(内部过程:客户端通过对 DistributedFileSystem 对象调用create()函数来创建文件),参数:路径/a.txt,块规格,副本数。 NameNode检查目标文件是否已存在,父目录是否存在。做出响应返回是否可以上传。 过程

    2024年02月04日
    浏览(64)
  • 详解《基于 javascript 的流程图编辑框架LogicFlow》

    1、LogicFlow 是什么 LogicFlow 是一款流程图编辑框架,提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。LogicFlow 支持前端研发自定义开发各种逻辑编排场景,如流程图、ER 图、BPMN 流程等。在工作审批配置、机器人逻辑编排、无代码平台流程配

    2024年02月05日
    浏览(52)
  • 强大易于编辑的流程图组织图绘制工具draw.io Mac苹果中文版

    draw.io可以绘制多种类型的图表,包括但不限于流程图、组织结构图、网络图、UML图、电气工程图等。draw.io提供了丰富的图形元素和编辑功能,使用户能够轻松地创建和编辑各种复杂的图表。同时,该软件还支持多种导出格式,方便用户在不同平台和设备上共享和展示他们的

    2024年02月07日
    浏览(40)
  • MODBUS-TCP协议简介与编程流程图

      本文主要目的是为了写一个简单的MODBUS-TCP服务器-客户端程序而记录的知识点,里面包含了编程所需要的必要背景知识和协议解析流程图。   MODBUS有四种基本数据类型:    离散量输入 :客户端只能读取它,由服务器提供,占1个比特位,可以传输现实中的开关量输入

    2023年04月08日
    浏览(42)
  • 流程图实现,基于vue2实现的流程图

    flex布局 + 伪元素实现竖直的连接线+组件递归 2.1基础的(未截全,大致长这样)  2.2带有收缩功能的,可以展开和收缩并显示数量     4.项目源码地址 GitHub - yft-code/flow: 流程图 纯css实现流程图

    2024年02月16日
    浏览(48)
  • 流程图如何制作?5步快速画出好看的流程图!

    流程图是一种图形化工具,描述某个过程或者操作的步骤,以及某种业务系统的具体流程。流程图通常由各种图形符号、形状、箭头组成,可以清晰的表示出流程或系统中各种步骤、每个环节之间的关系、条件判断、数据的流动和处理过程等。           对于负责策划的职场

    2024年02月14日
    浏览(48)
  • Qt (高仿Visio)流程图组件开发(七) 流程图 简单操作界面搭建

    Qt (高仿Visio)流程图组件开发(一) 效果展示及基本开发框架构思 Qt (高仿Visio)流程图组件开发(二) 基本图元绘制 图元间连线绘制 Qt (高仿Visio)流程图组件开发(三) 图元基类如何定义,流程图多种图元类型实现 Qt (高仿Visio)流程图组件开发(四) 流程图 图元

    2023年04月25日
    浏览(54)
  • Python 代码一键转流程图---python=>flowchart-dsl=>流程图

    这个项目是基于大名鼎鼎的 flowchart.js。 下面贴几张运行图片:  如果直接输入dsl代码,再进行转化就可以很好的画出流程图       如果你使用 Typora,可能知道在 Typora 中用 flow 可以用一种简单的文本语言来写流程图,根据 Typora 的文档,这个功能来自开源的 flowchart.js。

    2024年02月08日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包