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

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

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

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

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

基于Qt的流程设计器(一),布布扣,bubuko.com

时间: 2024-12-18 19:50:26

基于Qt的流程设计器(一)的相关文章

基于SVG的票面设计器开发总结

今天周六,原则上要休息,但想到下周还有一堆任务,还是先做一部分工作吧,就把之前做的票面设计器改了改,增加了上传图片和更换背景底图的功能.现在打算整理下这个设计器,也算对齐一个总结.不过这属于我们部门的产品,代码我使用截图的方式多一些.首先来看一下我做的这个票面设计器的最终效果图: 从截图中可以看到在页面里,专业点叫我在画布里增加了很多的元素,这些元素都与剧院票务相关包括项目.场次.地点,二维码等信息.上面的word截图是我今天做的功能,背景图我也换成了自定义的图片.光看这个页面其实不难做,因为页

整合Acitiviti在线流程设计器(Activiti-Modeler 5.18.0)

整合Acitiviti在线流程设计器(Activiti-Modeler 5.18.0) 1.概述前言 一直以来都是从事大量的工作流相关的项目,用过很多商用的工作流产品,包括国内与国外的,尽管商用的工作产品在UI操作上比较人性化,但个人用户觉得,这东西只需要一些初级用户,对于我们一直在为一些高级的客户提供一些专业的数据整合.流程梳理.系统间的数据穿透时,这些系统因为不开源,给项目的实施带来巨大的风险,在一些项目栽过跟头后,我更偏向于使用开源的平台了.但开源平台最大的难点是在于你是否有足够的技术人员

activiti工作流的web流程设计器整合视频教程 SSM和独立部署

本视频为activiti工作流的web流程设计器整合视频教程 整合Acitiviti在线流程设计器(Activiti-Modeler 5.21.0 官方流程设计器) 本视频共讲了两种整合方式 1. 流程设计器和其它工作流项目分开部署的方式 2. 流程设计器和SSM框架项目整合在一起的方式 视频大小 1.13 GB ~[获取地址] QQ313596790 本视频均为本人亲自录的,另免费附加赠送Activiti工作流视频(企业开发实例讲解) (这个赠送的Activiti工作流视频里面的流程设计器用的

java activiti5 在线web流程设计器整合视频教程 SSM和独立部署

本视频为activiti工作流的web流程设计器整合视频教程 整合Acitiviti在线流程设计器(Activiti-Modeler 5.21.0 官方流程设计器) 本视频共讲了两种整合方式 1. 流程设计器和其它工作流项目分开部署的方式 2. 流程设计器和SSM框架项目整合在一起的方式 视频大小 1.13 GB ~[获取地址]   QQ313596790 官网 http://www.fhadmin.org/ 本视频均为本人亲自录的,另免费附加赠送Activiti工作流视频(企业开发实例讲解)

activiti,工作流,web流程设计器,SSM,activiti工作流

本视频为activiti工作流的web流程设计器整合视频教程 整合Acitiviti在线流程设计器(Activiti-Modeler 5.21.0 官方流程设计器) 本视频共讲了两种整合方式 1. 流程设计器和其它工作流项目分开部署的方式 2. 流程设计器和SSM框架项目整合在一起的方式 视频大小 1.13 GB [获取地址] QQ313596790 本视频均为本人亲自录的,另免费附加赠送Activiti工作流视频(企业开发实例讲解) (这个赠送的Activiti工作流视频里面的流程设计器用的e

activiti工作流的web流程设计器整合视频教程

本视频为activiti工作流的web流程设计器整合视频教程 整合Acitiviti在线流程设计器(Activiti-Modeler 5.21.0 官方流程设计器) 本视频共讲了两种整合方式 1. 流程设计器和其它工作流项目分开部署的方式 2. 流程设计器和SSM框架项目整合在一起的方式 视频大小 1.13 GB [获取地址] 本视频均为本人亲自录的,另免费附加赠送Activiti工作流视频(企业开发实例讲解) (这个赠送的Activiti工作流视频里面的流程设计器用的ecllipse的插件)

流程设计器jQuery + svg/vml(Demo7 - 设计器与引擎及表单一起应用例子)

去年就完成了流程设计器及流程引擎的开发,本想着把流程设计器好好整理一下,形成一个一步一步的开发案例,结果才整理了一点点,发现写文章比写代码还累,加上有事情要忙,结果就.. 明天要去外包驻场了,现把流程设计器最终实现的效果及应用案例放到网上(Demo),欢迎大家围观,欢迎园友们提出宝贵意见. 1.流程设计器整体外观 2.流程实例名称设置 3.活动审批人设置 4.条件公式设置 以上是流程设计器的实现效果. 接下来想向园友们推荐一下我这几年来用业余时间做的一个云考勤系统(大部分时间花在做流程设计器.流

JS流程设计器(二)

此代码接着JS流程设计器(一)续写,该代码主要是怎么将设计好的流程图用最基本字符串的方式传到后台,再由后台字符串的方式重新显示在页面上. 1 //转化成后端的方法 2 function changebe(firstbegin){ 3 for(var x=0;x<shapeobjjson.shapeobj.length;x++){ 4 if(shapeobjjson.shapeobj[x].id==firstbegin){ 5 if(firstbegin.indexOf("begin-cir

activiti工作流的web流程设计器整合视频教程 SSM 和 独立部署

本视频为activiti工作流的web流程设计器整合视频教程 整合Acitiviti在线流程设计器(Activiti-Modeler 5.21.0 官方流程设计器) 本视频共讲了两种整合方式 1. 流程设计器和其它工作流项目分开部署的方式 2. 流程设计器和SSM框架项目整合在一起的方式 视频大小 1.13 GB [获取地址] 本视频均为本人亲自录的,另免费附加赠送Activiti工作流视频(企业开发实例讲解) (这个赠送的Activiti工作流视频里面的流程设计器用的ecllipse的插件)