首页 > 其他分享 >Canvas好难,如何让研发低成本实现Web端流程图设计功能

Canvas好难,如何让研发低成本实现Web端流程图设计功能

时间:2023-08-03 09:02:50浏览次数:47  
标签:Web Canvas 位置 SpreadJS 流程图 流程 好难 形状 节点

摘要:本文由葡萄城技术团队于博客园原创并首发。转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。

前言

相信大家在职场中经常会用到流程图,在互联网行业,绘制流程图不论在产品的设计阶段,还是后期优化业务流程的阶段,都有着巨大的价值。事实上,不仅是互联网行业,流程图其实广泛应用于各行各业。

比如说,银行在办理开户业务时,会有一套较为复杂的流程,中间不仅有固定的步骤,如审核材料、打印凭证等,还会有一些判断条件,如金额是否超过20万、是否需凭密码支取等,这个时候可以通过一张流程图来清晰明了地展现整个业务流:

再例如在进行新员工培训时,可能有多个部门之间的协作,那么用流程图也可以很好地帮助员工了解后续的培训步骤:

再举个例子,在互联网行业中,一个项目上线前需要进行完整的测试,测试分为很多类型,如黑盒、白盒、冒烟测试等,按照步骤进行,还要生成对应的测试报告。如果其中某一步测试不通过,需要通知研发修改bug,并重新测试,下面的流程图就可以非常清晰地展现研发、产品和测试相互合作的过程:

之所以有这么多的行业都在使用流程图,是因为它具备以下几点好处:

1. 让复杂的过程易于理解。

2. 方便识别业务瓶颈,改进现有流程。

3. 容易向其他人解释业务。

而SreadJS(本公司产品,一款前端在线Excel表格)也支持插入流程图,但是有时候我们并不想自己去绘制流程图,而是希望根据某种数据结构自动生成一个流程图,而这个数据可以在服务端自动拼接好,也可以直接是其他三方服务的数据。将数据发送到前端后,自动生成一个流程图,如果对流程图做出一定的修改,数据也跟着变动,这样流程图的数据也可以保存下来,方便下次使用。

假定我们目前有一个这样的数据结构(省略部分数据)。

其中elements数组保存了所有的流程,id为流程的唯一id值;text代表流程框中的文本;type代表是普通流程的矩形框还是决策型的菱形框;process代表当前流程的进展,分为未开始、进行中和已完成,默认为未开始;width和height代表形状的宽高,可以不写。

edge数组则包含了各个流程中间的连接关系,表现在流程图中就是箭头从source指向target,其中flag代表在决策型流程中的结果。

最终想要在SpreadJS中生成这样一个流程图:

那么如何才能实现这样的效果呢?我认为大致需要做以下几个工作:

1. 根据elements的信息,向SpreadJS插入所有流程图形状

2. 根据edge的连线关系,将各个形状摆放到正确的位置

3. 创建形状之间的连线

4. 添加监听,当流程发生变化时,动态地改变数据

实现步骤

接下来就讲一下以上四个步骤具体如何实现。

1. 根据elements的信息,向SpreadJS插入所有流程图形状

这一步比较简单,无非就是遍历elements,并向当前的sheet插入形状:

我们通过数据中的信息来修改shape的样式,包括宽高以及背景色。

这里我们可以将id挂在shape上,后续方便通过id找到对应的形状或者数据model。

另外,读者可以注意到我在数据model上挂载了两个函数,分别为next和prev,这是为了方便寻找流程的下一级或者上一级,后续会经常用到这两个函数。

这样处理后,SpreadJS中的形状就已经生成好了:

2. 根据edge的连线关系,将各个形状摆放到正确的位置

这一步是比较困难的,假设我们的流程图是由左向右扩展的,那么横坐标(x方向)的位置是很好确定的,每深入一级,横坐标向右移动即可,困难的在于纵坐标(y方向)的位置计算,我这里抛砖引玉,如果大家有更好的算法,可以在评论区分享~

大致思路如下:请看下图的结构,左右两图中,B、C两节点距离A的纵向位置是不同的,这是因为左图的B节点拥有更多的子节点,而右图则较少,所以左侧在纵向需要拉开更多的距离,以摆放后续的节点。

当然,这里并不是单指子节点数量的多少,而是要看他们所占据的高度,也就是兄弟节点的数量。所以在代码中,我们需要递归计算一个节点后续的高度值:

其中hasCountMax值是为了预防节点循环的情况,比如A→B→A,代码中还有类似的处理。

得到节点的高度值后,就可以计算位置了,这个高度值越大,它离父级节点的纵向距离就越远,当然这里还要考虑当前节点占据兄弟节点的第几个,以及父级、兄弟节点的高度情况:

最后的代码可以看到这里也是一个递归计算,需要计算每一个节点下一级的位置。

3. 创建形状之间的连线

这一步的思路有一点小复杂,但是实现起来比较简单。

难点主要在于确定连接点的位置。矩形和菱形都有4个连接点,在下图中,左2连接右2并不是最好的连接方式,我们希望是以下三种方式:左2右1、左3右1、左3右0 ,所以我们就需要根据两个形状的位置关系来确定连接点。

这里要用到一点初高中的数学知识,我们要计算从起始形状到目标形状中心位置的连线,与横轴夹角的正弦值来确定连接点:

这里一共有12种情况,不做一一赘述。

决策图的连线还要标明“是”和“否”两种不同的情况,计算连线的中心点并插入形状即可:

4. 添加监听,当流程图发生变化时,动态地改变数据

因为用户可以随时拖动流程图,而流程图的变化属性大致有以下几种:位置、长宽、文字属性,我们要将他们最新的值记录下来,方便下次还原。另外,当位置和长宽变化时,连线也会自动更新,我们需要更新上文提到的“是”和“否”的文字的位置,这里用到了防抖模式以提升性能。

另外,我还在设计器中添加了一些新菜单,可以对流程的状态进行修改,也可以将流程图导出为图片,或打印流程图的数据model等,感兴趣的读者可以在源码中自行查看实现方式。

这里展示一下修改流程图后,数据同步修改的功能,我们以“换货”举例,默认状态下,换货的数据是这样的:

我们通过上方的按钮调整换货为已完成,修改文本,并且移动它的位置,改变其宽高后:

可以看到,表示其状态的process已经从1(进行中)变成了2(已完成),宽高、位置、文本也有相应的变化。

结语:

流程图是一种非常有用,也很常用的工具,结合SpreadJS,你可以比较方便的实现动态生成流程图的功能,在这个demo的基础上,你还可以添加右键新增子级、新增兄弟级元素等功能,借助SpreadJS丰富、开放的Api,你可以非常灵活地实现你要的功能。

最后,希望这篇文章能对你有帮助~

源码地址:

https://gcdn.grapecity.com.cn/forum.php?mod=attachment&aid=Mjg0MjY2fDg4YjJmMDRlfDE2OTA4NzU1NTN8ODE2MDZ8MTc5NzE0

扩展链接:

Spring Boot框架下实现Excel服务端导入导出

项目实战:在线报价采购系统(React +SpreadJS+Echarts)

Svelte 框架结合 SpreadJS 实现纯前端类 Excel 在线报表设计

标签:Web,Canvas,位置,SpreadJS,流程图,流程,好难,形状,节点
From: https://www.cnblogs.com/powertoolsteam/p/17599717.html

相关文章

  • .NET Core WebAPI中使用Swagger(完整教程)
    一、Swagger简介1.1-什么是Swagger?Swagger是一个规范且完整的框架,用于生成、描述、调试和可视化Restfull风格的Web服务。Swagger的目标是对RestAPI定义一个标准且和语言无关的接口,可以让人和计算机拥有无需访问源码、文档或网络流量监控就可以发现和连接服务的能力。当通过S......
  • canvas实现视频播放并支持自动播放
    背景:在工作中很多时候会遇到大屏首页需要酷炫的动态背景,很多时候酷炫的动效用css和js比较难于实现。此时就会产生两种方案,第一种是采用gif,第二种会采用video方案。但是第一种方案有时候导出的gif图片往往会比较大,在首屏加载有时候会不太理想,资源比较大在加载时会出现一卡一卡......
  • (转)WEB页面导出为Word文档后分页&横向打印的方法
    项目中用到了横向打印,今天重新更新了这个脚本.<html><HEAD><title>WEB页面导出为Word文档后分页&横向打印的方法</title></HEAD><SCRIPTLANGUAGE="javascript">......
  • WEB 2.0是什么(转)
    【导语】BloggerDon在他的“WEB2.0概念诠释”一文中提到“Web2.0是以Flickr、Craigslist、Linkedin、Tribes、Ryze、Friendster、Del.icio.us、43Things.com等网站为代表,以Blog、TAG、SNS、RSS、wiki等社会软件的应用为核心,依据六度分隔、xml、ajax等新理论......
  • WEB服务器
    1.web服务器也成为网页服务器或HTTP服务器2.web服务器协议是HTTP协议或https协议3.HTTP协议端口号:TCP80,HTTPS端口号:TCP443,FTP端口号:TCP234.web服务器发布软件:微软:IIS(可以发布web网站和FTP站点)Linux:Apache/LAMP/Tomacat/nginx........ 第三方:phpstudy,XAMPP(测试) FTP......
  • 利用ZoomEye探索互联网hikvision摄像头——直接htp://www.zoomeye.org/search?q=DVRDV
    实践了下,zoomeye或者shodan都可以!还是很吓人的...         然后随便点击一个就进去了。。。 利用ZoomEye探索互联网hikvision摄像头2021年4月2日某天使用IISPUTSCANNER扫描C段观察HTTPBANNER为DVRDVS-Webs点开后发现为hikvision摄像头的WEB端于是乎想到了知道创宇......
  • 老杜 JavaWeb 讲解(十七) ——JSP补充
    (十六)JSP补充相关视频:49-JSP的page指令以及九大内置对象和EL表达式指令指令的作用:指导JSP的翻译引擎如何工作(指导当前的JSP翻译引擎如何翻译JSP文件。)指令包括哪些呢?include指令:包含指令,在JSP中完成静态包含,很少用了。(这里不讲)taglib指令:引入标签库的指令。这个到JS......
  • CTFer成长记录——CTF之Web专题·极客大挑战—Upload
    一、题目链接https://buuoj.cn/challenges#[%E6%9E%81%E5%AE%A2%E5%A4%A7%E6%8C%91%E6%88%98%202019]Upload二、解法步骤  本题是一个文件上传题目,先测试是黑名单还是白名单:随便上传一个文件,提示:  看来只能上传图片类型,这个时候我们bp抓包并且修改包中的content字段,将其改......
  • 记录--canvas 复刻锤子时钟
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助介绍canvas:使用脚本(通常为JavaScript)来绘制图形的HTML元素。本人遍历了以下两份文档,学习完就相当于有了笔和纸,至于最后能画出什么,则需要在canvas应用方面进一步学习。MDN的Canvas教程1张鑫旭的Ca......
  • 软件测试|web自动化测试神器playwright教程(十二)
    前言在日常工作中,我们经常是基于某个测试环境地址去测试某个项目,所以应该把它单独拿出来做为一个全局的配置。其他网址可以使用不同的后缀,只使用相对地址。常见情景比如我们的社区,不同的类别只需要改变我们的后缀即可,如下图:首页地址为:https://ceshiren.com/,我们选择查看热门......