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

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

说明:

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

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

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

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

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

二:

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

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

三:

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是为了冒泡触发画布的点击事件(后续会讲为什么要允许事件冒泡)

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

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏iKcamp

微信小程序基于最新版1.0开发者工具分享-小试牛刀(视频)+发布流程

第一章:小程序初级入门教程 小试牛刀【含视频】 视频地址:https://v.qq.com/x/page/i0554akzobq.html 这一章节中,我们尝...

2819
来自专栏IMWeb前端团队

也谈 setTimeout

也谈 setTimeout setTimeout ,延迟一段事件执行代码,当然这是最基本的用法,这里不说基本用法。 jQuery 中的轮询 轮询,可能是 set...

21810
来自专栏狂码一生

html常用实体字符,转义字符,特殊符号

HTML 原代码显示结果描述&lt;<小于号或显示标记&gt;>大于号或显示标记&amp;&可用于显示其它特殊字符&quot;“引号&reg;®已注册&copy...

73513
来自专栏web前端-

JQuery事件

       focus()                 ------获得焦点事件

1674
来自专栏进击的君君的前端之路

Vue成神之路之全局API

vue.js——开发版本:包含完整的警告和调试模式 vue.min.js——生产版本:删除了警告,进行了压缩

1343
来自专栏hbbliyong

RadioButtonList数据项不改变依然执行改变事件

问题:使用RadioButtonList导航到其他页面,当点击一数据项出现新页时候,关闭新页,再点击此数据项,由于数据项没有改变,所以不能触发他的Selecte...

2853
来自专栏互联网杂技

JavaScript面试问题:事件委托和this

JavaScript不仅门槛低,而且是一门有趣、功能强大和非常重要的语言。各行各业的人发现自己最混乱的选择是JavaSscript编程语言。由于有着各种各样的背...

3365
来自专栏郭少华

(Vue全家桶)Vue-router

如果你在使用vue-cli中已经选择安装了vue-router,那这里不需要重复安装了。

1241
来自专栏PHP在线

书写高质量jQuery代码的6条经验

一、正确引用jQuery 尽量在body结束前才引入jQuery,而不是在head中。 借助第三方提供的CDN来引入jQuery,同时注意当使用第三方CDN出现...

3819
来自专栏杂七杂八

selenium使用

pip insatll selenium 由于如果需要使用selenium的话,需要为本机配置对应浏览器的驱动,下面以chomedriver为例,首先安装ch...

1743

扫码关注云+社区

领取腾讯云代金券