前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >基于Qt的流程设计器(一)

基于Qt的流程设计器(一)

作者头像
liulun
发布于 2018-01-12 07:21:36
发布于 2018-01-12 07:21:36
1.9K0
举报
文章被收录于专栏:liulunliulun

一:先来看一下界面的截图:

说明:

拖动节点的时候,与该节点相关的箭头连线也会跟着调整;

用户可以使用鼠标从一个节点拖出一个箭头到另一个节点(鼠标在空白区域点击一下,拖出的箭头消失)

这三个图标,手型图标处于选中状态的时候,节点可以拖动,

箭头图标处于选中状态的时候,可以使用鼠标绘制连线箭头

最后一个图标,用于在画布上创建一个节点方框

二:

关键代码文件如下图(用红框框住的为关键代码文件)

其他文件均为辅助代码文件(有些文件中的代码没有用到)

三:

CustomView类是我们的绘图面板,这个类继承自QGraphicsView

在这个类的构造函数中,我们创建了他的QGraphicsScene

并设置了它的大小(这也是为什么我们的绘图板有滚动条的原因)

另外需要注意的是QGraphicsScene的坐标原点在中心位置,如下图所示

四:

CustomArrow是描述箭头连线的类:

这个类继承自QGraphicsItem

boundingRect是QGraphicsItem的虚函数,必须要实现,

其中1.5是箭头连线的线宽,8是箭头张开后所占的区域宽度

p1是箭头的起始点,p2是箭头结束点(也就是带箭头的那一端)

最终返回的一个Rect结构如下图所示:(注意箭头的起点,在上一个方框的中心点上)

五:

我给CustomArrow类公开了一个adjust函数,旨在当方框节点移动的时候,重新计算箭头的起始位置、结束位置、箭头的角度

代码如下:

其中:itemA是起始处的方框节点,itemB是结束处的方框节点

注意mapFromItem是把方框节点中心点映射到scene坐标系中

紧接着的if,else是为了判断起始方框是否位于结束方框的下方,如果是,那么箭头的终点应该在结束方框的下边框上

接下来是计算出箭头的两个点arrowP1和arrowP2

六:

绘制箭头的工作是在CustomArrow的paint函数中完成的,代码如下所示

箭头只不过是一个多边形,用drawPolygon画出来的

七:

CustomRect继承自QGraphicsRectItem

在这个类型中,我们重载了itemChange函数,代码如下

当当前方框节点移动后,与这个节点相关的箭头都要跟着移动

Arrows就是与当前方框节点有关的箭头

八:

在来看一下CustomRect的MousePressEvent的代码

在这个代码中,

我们先为全局标志ScenClickFlag赋值,

这个标志着当前点击的是一个方框节点,还是点击在画布的空白处了

接下来判断箭头按钮是不是处于选中状态

再往下判断是不是已经记录了起始方框,如果没记录,那么就记录并返回

再接下来,就意味着用户是点击的结束方框,这时要绘制一个箭头了,

当然首先要判断是不是已经存在了同样的箭头,如果存在了,就没必要再绘制了,

ScenClickFlag置成true是为了冒泡触发画布的点击事件(后续会讲为什么要允许事件冒泡)

接下来执行了绘制箭头的逻辑,并在起始节点和结束节点分别记录了箭头的指针

以后这两个节点移动的时候,箭头也会跟着移动了。

未完待续,喜欢的话请点推荐(您的支持,是我的动力)--------------------->

代码会在下一篇文章中发布

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2014-07-09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
qt学习笔记(五) QGraphicsPixmapItem与QGraphicsScene的编程实例 图标拖动渐变效果
应大家的要求,还是把完整的project文件贴出来,大家省点事:http://www.kuaipan.cn/file/id_48923272389086450.htm
全栈程序员站长
2022/07/12
1.9K0
qt学习笔记(五) QGraphicsPixmapItem与QGraphicsScene的编程实例 图标拖动渐变效果
基于jsplumb构建的流程设计器
最近在准备开发工作流引擎相关模块,完成表结构设计后开始着手流程设计器的技术选型,调研了众多开源项目后决定基于jsplumb.js开源库进行自研开发,保证定制化的便捷性,相关效果图及项目地址如下
code2roc
2023/07/19
5270
基于jsplumb构建的流程设计器
我的截图插件被Gitee使用了
前言 上周六有个群友@我说Gitee的反馈模块新增了截图功能,我就去体验了下,发现他们用的就是我的插件😁,本文就跟大家分享下这个插件,欢迎各位感兴趣的开发者阅读本文。 插件地址与实现原理 本插件采用原生js实现,可以集成在任意一个web项目中,插件npm地址与GitHub地址请移步: js-screen-shot(npm)[1] js-screen-shot(GitHub)[2] 插件的实现原理请移步: 实现Web端自定义截屏[3] 实现Web端自定义截屏(JS版)[4] 在线体验本插件,可移步我的开源项目
神奇的程序员
2022/04/10
4.8K1
我的截图插件被Gitee使用了
C++ Qt开发:Charts绘图组件概述
Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍QCharts二维绘图组件的常用方法及灵活运用。
王瑞MVP
2023/12/23
1.8K0
C++ Qt开发:Charts绘图组件概述
基于 Canvas 实现的简历编辑器
大概一个月前,我发现掘金老是给我推荐Canvas相关的内容,比如很多 小游戏、流程图编辑器、图片编辑器 等等各种各样的项目,不知道是不是因为我某一天点击了相关内容触发了推荐机制,还是因为现在Canvas比较火大家都在卷,本着我可以用不上但是不能不会的原则,我也花了将近一个月的时间通过Canvas实现了简历编辑器。
五月君
2024/03/07
2770
基于 Canvas 实现的简历编辑器
Canvas好难,如何让研发低成本实现Web端流程图设计功能
相信大家在职场中经常会用到流程图,在互联网行业,绘制流程图不论在产品的设计阶段,还是后期优化业务流程的阶段,都有着巨大的价值。事实上,不仅是互联网行业,流程图其实广泛应用于各行各业。
葡萄城控件
2023/10/16
3430
Canvas好难,如何让研发低成本实现Web端流程图设计功能
Qt Designer基本控件介绍——Display Widgets(显示小部件)
Label : 标签 QLabel的作用: 占位符 显示文本 显示图片 放置gif动画 超链接 提示标记 常用方法: text():获得Qlabel的文本内容 setText():设置Qlabel的文本内容 selectedText():返回所选择的字符 信号: linkActiveted:当单击标签中的超链接,希望在新窗口打开这个超链接时,setOpenExternalLinks特性必须设置为True,即setOpenExternalLinks(True) linkHovered:当鼠标指针滑过标签中
Elsa_阿尼
2021/07/12
8.7K0
Qt Designer基本控件介绍——Display Widgets(显示小部件)
API设计原则 – QT官网的设计实践总结
原文链接:API Design Principles – Qt Wiki 链接:(http://wiki.qt.io/API_Design_Principles)基于Gary的影响力(链接:https://blog.csdn.net/gaoyingju)上 Gary Gao 的译文稿:C++的API设计指导(https://blog.csdn.net/gaoyingju/article/details/8245108)
范蠡
2018/08/17
2.8K0
API设计原则 – QT官网的设计实践总结
Qt官方示例-拖放机器人
  Graphics View提供了QGraphicsScene类,用于管理从QGraphicsItem类派生的大量定制2D图形项目,并与之交互;还提供了QGraphicsView小部件,用于可视化项目,并支持缩放和旋转。
Qt君
2020/02/24
4.9K1
基于 HTML5 Canvas 的简易 2D 3D 编辑器
不管在任何领域,只要能让非程序员能通过拖拽来实现 2D 和 3D 的设计图就是很牛的,今天我们不需要 3dMaxs 等设计软件,直接用 HT 就能自己写出一个 2D 3D 编辑器,实现这个功能我觉得成
HT for Web
2018/01/03
2.3K0
基于 HTML5 Canvas 的简易 2D 3D 编辑器
基于 HTML5 OpenLayers3 实现 GIS 电信资源管理系统
前言 通过结合 HTML5 和 OpenLayers 可以组合成非常棒的一个电信地图网络拓扑图的应用,形成的效果可以用来作为电信资源管理系统,美食定位分享软件,片区找房,绘制铁轨线路等等,各个领域都能
HT_hightopo
2018/06/04
3.9K0
实现Web端自定义截屏
当客户在使用我们的产品过程中,遇到问题需要向我们反馈时,如果用纯文字的形式描述,我们很难懂客户的意思,要是能配上问题截图,这样我们就能很清楚的知道客户的问题了。
神奇的程序员
2021/02/04
2.5K0
强大并且免费的流程图绘制软件-yEd推荐
如果想绘制流程图,我推荐yEd 软件。因为它功能强而且免费。yEd 是采用java语言开发的专门为流程图绘制的工具软件。
zinyan.com
2023/07/13
3.6K0
强大并且免费的流程图绘制软件-yEd推荐
带你实现一个简单的多边形编辑器
多边形编辑器少数见于一些图片标注需求,常见于地图应用,用来绘制区域,比如高德地图:
街角小林
2022/06/15
1.2K0
带你实现一个简单的多边形编辑器
我做了一个在线白板!!!
相信各位写文章的朋友平时肯定都有画图的需求,笔者平时用的是一个在线的手绘风格白板--excalidraw,使用体验上没的说,但是有一个问题,不能云端保存,不过好消息它是开源的,所以笔者就在想要不要基于它做一个支持云端保存的,于是三下两除二写了几个接口就完成了--小白板,虽然功能完成了,但是坏消息是excalidraw是基于React的,而且代码量很庞大,对于笔者这种常年写Vue的人来说不是很友好,另外也无法在Vue项目上使用,于是闲着也是闲着,笔者就花了差不多一个月的业余时间来做了一个草率版的,框架无关,先来一睹为快:
街角小林
2022/05/11
3.7K1
我做了一个在线白板!!!
「数据架构」什么是数据流程图(DFD)?如何绘制DFD?
一图胜千言。数据流图(DFD)是可视化系统中信息流的传统方法。一个整洁而清晰的DFD可以图形化地描述大量的系统需求。它可以是手动的,自动的,或者两者的结合。
架构师研究会
2019/12/24
4.1K0
精读《磁贴布局 - 功能实现》
实现磁贴布局前,先要实现最基础的组件拖拽流程,然后我们才好在拖拽的基础上增加磁贴效果。
黄子毅
2023/02/14
6020
精读《磁贴布局 - 功能实现》
QT实现机器视觉最常用的图像查看器(源码)
在机器视觉行业中最常见的控件就是图像查看器了,使用QT实现其实也非常简单,在我出的项目【降龙:算法软件框架】和【重明:工业相机二次开发】中都有用到。可以说只要你要开发一个和机器视觉相关的软件,就离不开图像查看器。
周旋
2024/03/04
7110
QT实现机器视觉最常用的图像查看器(源码)
用flex布局实现一个流程设计器
支持添加、编辑和删除节点,节点只有四种类型:开始节点、普通节点、分支节点、结束节点。
街角小林
2023/07/09
2900
用flex布局实现一个流程设计器
matlab之simulink仿真入门
Simulink是一个用来对动态系统进行建模、仿真和分析的软件包。使用Simulink来建模、分析和仿真各种动态系统(包括连续系统、离散系统和混合系统),将是一件非常轻松的事情。 它提供了一种图形化的交互环境,只需用鼠标拖动的方法便能迅速地建立起系统框图模型,甚至不需要编写一行代码。 由于Simulink具有强大的功能与友好的用户界面,因此它已经被广泛地应用到诸多领域之中,如: (1)通讯与卫星系统。 (2)航空航天系统。 (3)生物系统。 (4)物流系统。 (6)制造系统。 (7)金融系统。
全栈程序员站长
2022/09/05
1.9K0
相关推荐
qt学习笔记(五) QGraphicsPixmapItem与QGraphicsScene的编程实例 图标拖动渐变效果
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档