CN110704769A - 流程图生成方法、装置、设备及计算机存储介质 - Google Patents

流程图生成方法、装置、设备及计算机存储介质 Download PDF

Info

Publication number
CN110704769A
CN110704769A CN201910965732.7A CN201910965732A CN110704769A CN 110704769 A CN110704769 A CN 110704769A CN 201910965732 A CN201910965732 A CN 201910965732A CN 110704769 A CN110704769 A CN 110704769A
Authority
CN
China
Prior art keywords
data
flow chart
flowchart
node coordinates
cache data
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201910965732.7A
Other languages
English (en)
Inventor
雷其榕
卢道和
林挺
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
WeBank Co Ltd
Original Assignee
WeBank Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by WeBank Co Ltd filed Critical WeBank Co Ltd
Priority to CN201910965732.7A priority Critical patent/CN110704769A/zh
Publication of CN110704769A publication Critical patent/CN110704769A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/20—Drawing from basic elements, e.g. lines or circles

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Human Computer Interaction (AREA)
  • Data Mining & Analysis (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明涉及金融科技(Fintech)技术领域，并公开了一种流程图生成方法，该方法包括：在浏览器中获取输入的配置参数，基于所述配置参数计算当前画布中所有节点之间连接线的数据集合，并对所述数据集合进行缓存，以获取缓存数据；基于所述缓存数据在所述当前画布上进行绘制，以获取初始流程图；接收用户输入的操作指令，基于所述操作指令对所述缓存数据进行更新，以获取更新后的缓存数据；获取所述当前画布对应的绘制频率，并基于所述更新后的缓存数据和所述绘制频率对所述初始流程图进行修改，以获取目标流程图。本发明还公开了一种流程图生成装置、设备和一种计算机存储介质。本发明提高了浏览器绘制流程图的效率。

Description

流程图生成方法、装置、设备及计算机存储介质
技术领域
本发明涉及金融科技(Fintech)技术领域，尤其涉及流程图生成方法、装置、设备及计算机存储介质。
背景技术
随着计算机技术的发展，越来越多的技术(大数据、分布式、区块链Blockchain、人工智能等)应用在金融领域，传统金融业正在逐步向金融科技(Fintech)转变，但由于金融行业的安全性、实时性要求，也对技术提出了更高的要求。例如，在金融行业中，由于用户需求经常需要进行流程图绘制，但现有的流程图绘制方案存在各种缺陷，如通过SVG(Scalable Vector Graphics，可缩放矢量图)绘制连接线的方式进行绘制流程图，但是在复杂数据结构情况下需要大量操作DOM(文档对象模型)元素，每个对象的属性值更改时都要进行更新，这样当绘制数据变化较大或者对实时性要求较高时，就会出现卡顿现象，从而影响到绘制流程图的效率，因此，如何提高浏览器绘制流程图的效率成为了目前亟待解决的技术问题。
发明内容
本发明的主要目的在于提出一种流程图生成方法、装置、设备及计算机存储介质，旨在提高浏览器绘制流程图的效率。
为实现上述目的，本发明提供一种流程图生成方法，所述流程图生成方法包括如下步骤：
在浏览器中获取输入的配置参数，基于所述配置参数计算当前画布中所有节点之间连接线的数据集合，并对所述数据集合进行缓存，以获取缓存数据；
基于所述缓存数据在所述当前画布上进行绘制，以获取初始流程图；
接收用户输入的操作指令，基于所述操作指令对所述缓存数据进行更新，以获取更新后的缓存数据；
获取所述当前画布对应的绘制频率，并基于所述更新后的缓存数据和所述绘制频率对所述初始流程图进行修改，以获取目标流程图。
可选地，所述基于所述配置参数计算当前画布中所有节点之间连接线的数据集合的步骤，包括：
获取当前画布中所有节点之间连接线形成的各边数据，并根据所述配置参数依次对各所述边数据进行配置，基于所述配置结果创建集合对象，并将所述集合对象作为所述数据集合。
可选地，所述获取当前画布中所有节点之间连接线形成的多个边数据的步骤，包括：
在当前画布中获取各所述节点对应的节点坐标，基于各所述节点坐标确定多个直线路径，并依次检测各所述直线路径中的节点坐标的数量是否大于预设数量；
若在各所述直线路径中不存在节点坐标的数量大于预设数量的目标直线路径，则将各所述直线路径作为边数据。
可选地，所述基于各所述节点坐标确定多个直线路径的步骤，包括：
基于所述配置参数在各所述节点坐标中确定多个开始节点坐标，和各所述开始节点坐标对应的结束节点坐标；
根据各所述开始节点坐标和各所述结束节点坐标确定多个直线路径。
可选地，所述依次检测各所述直线路径中的节点坐标的数量是否大于预设数量的步骤之后，包括：
若在各所述直线路径中存在节点坐标的数量大于预设数量的目标直线路径，则通过对比各所述节点坐标建立所述目标直线路径的关键点坐标；
根据所述目标直线路径对应的开始节点坐标、所述目标直线路径对应的结束节点坐标和所述关键点坐标建立折线，将所述折线作为边数据，其中，所述折线中的节点坐标的数量小于或等于预设数量。
可选地，所述基于所述操作指令对所述缓存数据进行更新的步骤，包括：
获取所述操作指令对应的当前点击位置，计算当前点击位置和各所述连接线之间的最小距离；
在各所述最小距离中确定距离最小的目标最小距离，对所述缓存数据中目标最小距离对应的连接线进行更新。
可选地，所述获取所述当前画布对应的绘制频率，并基于所述更新后的缓存数据和所述绘制频率对所述初始流程图进行修改，以获取目标流程图的步骤，包括：
获取预设的绘制时间，并基于所述绘制时间确定所述当前画布对应的绘制频率；
将所述当前画布中的绘制方法作为会调函数，通过预设控制方法控制所述绘制频率调用所述会调函数，以便所述会调函数根据所述更新后的缓存数据对所述初始流程图进行修改，以获取目标流程图。
此外，为实现上述目的，本发明还提供一种流程图生成装置，所述流程图生成装置包括：
第一获取模块，用于在浏览器中获取输入的配置参数，基于所述配置参数计算当前画布中所有节点之间连接线的数据集合，并对所述数据集合进行缓存，以获取缓存数据；
第二获取模块，用于基于所述缓存数据在所述当前画布上进行绘制，以获取初始流程图；
接收模块，用于接收用户输入的操作指令，基于所述操作指令对所述缓存数据进行更新，以获取更新后的缓存数据；
确定模块，用于获取所述当前画布对应的绘制频率，并基于所述更新后的缓存数据和所述绘制频率对所述初始流程图进行修改，以获取目标流程图。
此外，为实现上述目的，本发明还提供一种流程图生成设备，所述流程图生成设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的流程图生成程序，所述流程图生成程序被所述处理器执行时实现如上所述的流程图生成方法的步骤。
此外，为实现上述目的，本发明还提供一种计算机存储介质，所述计算机存储介质上存储有流程图生成程序，所述流程图生成程序被处理器执行时实现如上所述的流程图生成方法的步骤。
本发明通过在浏览器中获取输入的配置参数，基于所述配置参数计算当前画布中所有节点之间连接线的数据集合，并对所述数据集合进行缓存，以获取缓存数据；基于所述缓存数据在所述当前画布上进行绘制，以获取初始流程图；接收用户输入的操作指令，基于所述操作指令对所述缓存数据进行更新，以获取更新后的缓存数据；获取所述当前画布对应的绘制频率，并基于所述更新后的缓存数据和所述绘制频率对所述初始流程图进行修改，以获取目标流程图。通过根据输入的配置参数获取所有连接线的缓存数据，并基于缓存数据在当前画布上进行绘制以获取初始流程图，从而保障了所有连接线的路径信息最终一次性绘制在同一张画布上，并在需要对初始流程图进行更新时，根据绘制频率对初始流程图进行修改，以获取目标流程图，也就是通过控制绘制频率来防止重复绘制，避免浏览器执行大量无效代码调用画布绘制中间数据状态导致性能消耗，引起浏览器卡顿丢帧现象的发生，提高了浏览器绘制流程图的效率。
附图说明
图1是本发明实施例方案涉及的硬件运行环境的设备结构示意图；
图2为本发明流程图生成方法第一实施例的流程示意图；
图3为本发明流程图生成装置的装置模块示意图。
本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
如图1所示，图1是本发明实施例方案涉及的硬件运行环境的设备结构示意图。
本发明实施例流程图生成设备可以是PC机或服务器设备。
如图1所示，该流程图生成设备可以包括：处理器1001，例如CPU，网络接口1004，用户接口1003，存储器1005，通信总线1002。其中，通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示屏(Display)、输入单元比如键盘(Keyboard)，可选用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口(如WI-FI接口)。存储器1005可以是高速RAM存储器，也可以是稳定的存储器(non-volatile memory)，例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储装置。
本领域技术人员可以理解，图1中示出的设备结构并不构成对设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。
如图1所示，作为一种计算机存储介质的存储器1005中可以包括操作***、网络通信模块、用户接口模块以及流程图生成程序。
在图1所示的设备中，网络接口1004主要用于连接后台服务器，与后台服务器进行数据通信；用户接口1003主要用于连接客户端(用户端)，与客户端进行数据通信；而处理器1001可以用于调用存储器1005中存储的流程图生成程序，并执行下述流程图生成方法中的操作。
基于上述硬件结构，提出本发明流程图生成方法实施例。
参照图2，图2为本发明流程图生成方法第一实施例的流程示意图，所述方法包括：
步骤S10，在浏览器中获取输入的配置参数，基于所述配置参数计算当前画布中所有节点之间连接线的数据集合，并对所述数据集合进行缓存，以获取缓存数据；
目前，在进行流程图的连线绘制时，常用的方案有：1、通过控制DIV(图层)，SPAN(范围)等HTML(Hyper Text Markup Language，超文本标记语言)元素宽度高度，或者边框等样式来连接指定的流程图节点，但是这种方案适合简单的少量数据的流程展示，通过css(Cascading Style Sheets，层叠样式表)定位方式来控制位置，但是在面对大量流程图节点的时候，通过控制DIV，SPAN等元素的样式来绘制连线，必须每条连线使用一个元素，并且斜线控制相对复杂，需要通过旋转等方式来控制，这个过程需要大量操作DOM元素，显然，比较多流程节点情况下很容易遇到性能问题。2、通过绘制SVG画出连接线，但通过SVG绘制连接线主要是基于SVG Path提供的路径来进行，在复杂数据结构情况下同样存在大量DOM元素，每个对象的属性值更改时都要进行更新，这样当绘制数据变化比较大或者对实时性要求较高时，就会出现卡顿的现象，并且若所有路径在一个SVG元素上绘制，则路径计算转化成SVG支持的Path路径很复杂。3、通过使用canvas API(画布API)在canvas(画布)元素上绘制连接线，每条连接线通过canvas提供的API(Application Programming Interface，应用程序编程接口)绘制，但是如果所有连接线分开绘制，需要每条线应用一个canvas元素，性能开销大，并且浏览器对canvas有绘制宽高，面积限制，多个canvas无法重复利用画布空间，如果所有连接线绘制在一个canvas元素上，则每次绘制需要所有连接线路径信息，计算及绘制时间长，且多个canvas元素在点击选中连线的时候不容易识别点击的是哪条连接线。
而在本实施例中，通过遍历浏览器中节点数据，获取到所有连接线路径数据，并缓存此数据。若流程图中某个或多个节点位置发生改变，或者删减时重新计算受影响的连接线，更新缓存数据。之后定义绘制连接线方法drawLinkers，以完成批量绘制连接线。具体实现为：循环遍历所有连接线的缓存数据，单次处理过程是取一条边的路径信息依次调用moveTo(移至)，lineTo(画线)，fill(填满)，stroke(外观属性)方法绘制，其中lineTo方法会多次调用。所有边循环处理结束后即可完成所有节点之间连接线在画布中的绘制。需要说明的是，本实施例中绘制方法drawLinkers作为会调函数传递给window.requestAnimationFrame(告诉浏览器)，浏览器将会在下次重绘制之前调用该函数，而本次浏览器绘制时间内的多次频繁调用不会触发drawLinkers，避免canvas频繁绘制对应用性能的影响。并且在本实施例中由于是将所有路径信息最终一次性绘制在同一个canvas元素上的，而且是通过控制绘制频率来绘制路径信息(即连接线)的，从而使得当前画布上的连接线的绘制频率减少，避免了现有技术中由于没有控制绘制频率导致绘制出来的路径很复杂的现象发生。
在浏览器中获取输入的配置参数，由于本实施例中节点之间连接线不限在结合点位置，方向，只需开始节点和结束节点分别连接即可，因此配置参数可以包括每条连接线的连接线宽度，颜色，以及开始节点，结束节点，中间关键节点坐标等数据。并在获取到配置参数后，可以计算出当前画布中所有节点之间连接线的数据集合，并对该数据集合进行缓存，以获取缓存数据，数据集合的计算过程在下文中描述。
步骤S20，基于所述缓存数据在所述当前画布上进行绘制，以获取初始流程图；
当获取到缓存数据后，可以根据此缓存数据在当前画布中对各个节点进行绘制，并将绘制完成的图形作为初始流程图，并向用户展示此初始流程图，以便用户确定是否需要对该初始流程图进行修改。
步骤S30，接收用户输入的操作指令，基于所述操作指令对所述缓存数据进行更新，以获取更新后的缓存数据；
当在浏览器中接收到用户输入的操作指令时，根据此操作指令的类型确定是否对初始流程图进行修改，若需要修改时，则根据操作指令确定用户在当前画布中进行点击的点击位置，并通过遍历缓存数据中所有的连接线，再计算点击位置到各个连接线的最近距离，基于计算结果在各个连接线中选择一个距离最近的连接线，并进行相应修改(如删除连接线、更新连接线的位置等的修改操作)。但是若不需要对初始流程图进行修改，则可以直接将初始流程图作为目标流程图进行输出。
步骤S40，获取所述当前画布对应的绘制频率，并基于所述更新后的缓存数据和所述绘制频率对所述初始流程图进行修改，以获取目标流程图。
当经过判断发现需要对初始流程图进行修改时，则需要先对缓存数据进行更新，由于初始流程图的数据变更，包括节点增加、删除、移动位置，节点连接线增加、删减等需要修改数据，因此对缓存数据的更新可以存在以下情况：1、增加节点：即在当前画布中再次增加一个新的节点，而这并不会影响到当前画布中已有的连接线数据。2、删减节点：若此节点是某条连线的起点或终点，则删除calcLinks里对应key(关键)值的数据。3、移动节点：若此节点是某条线的起点或终点，则更新calcLinks里对应key值的数据，若无连线则不影响连接线数据。4、增加连接线：增加连接线，新生成一个key值，calcLinks里增加一条连接线数据。5、删除连接线：删除calcLinks里对应key值数据。6、重新改变初始流程图数据，清除所有calcLinks数据。并在对缓存数据进行更新后，可以通过预设控制方法确定当前画布对应的绘制频率，并基于此绘制频率对初始流程图进行修改，以获取目标流程图。即所有连接线数据最终通过调用canvas API绘制到同一个canvas元素上，每次绘制之前先清空画布，然后绘制最新连接线数据。为了避免缓存数据频繁更新导致频繁绘制，减少不必要的中间状态绘制，通过使用预设控制方法(可选为window.requestAnimationFrame方法)来控制绘制的绘制频率，也就是将绘制方法drawLinkers作为会调函数传递给浏览器window.requestAnimationFrame，浏览器将会在下次重绘之前调用该函数，而本次浏览器绘制时间内的多次频繁调用不会触发drawLinkers。不同浏览器的APIrequestAnimationFrame(定时循环操作接口)需要兼容处理，如判断标准方法window.requestAnimationFrame是否支持，其中，标准方法window.requestAnimationFrame是将某些代码(如会调函数对应的代码)放置在下一次重新绘制时执行。但标准方法window.requestAnimationFrame方法会在短时间内触发大量的重新绘制，因此需要确定当前画布对应的***是否支持。如不支持则根据平台使用支持的window.webkitRequestAnimationFrame和window.mozRequestAnimationFrame方法进行，也就是通过告知当前画布所在***哪些哪些动画将会发生，以得到正确的绘制频率，并通过接收到的会调函数和绘制频率进行绘制。此外，在本实施例中控制绘制频率的预设控制方法除了使用window.requestAnimationFrame方法，还可以通过seTimeout(超时调用)，setInterval(定时调用)定时器，lodash(工具库)提供的debounce(消抖)等函数来实现类似的控制函数的调用频率，也就是绘制频率，此类方法本质是提供一个定时器，定时器里的会调函数可以在自定义时间过后执行，比如100毫秒之后执行，并且可以通过clearTimeout(实例名)或者clearInterval(取消计时器)清空定时器，清空定时器则回调函数不会执行，通过设置定时器控制在指定时间间隔之内的特定方法执行次数可以实现本案前述步骤中的连线数据绘制频率的控制。
在本实施例中，通过在浏览器中获取输入的配置参数，基于所述配置参数计算当前画布中所有节点之间连接线的数据集合，并对所述数据集合进行缓存，以获取缓存数据；基于所述缓存数据在所述当前画布上进行绘制，以获取初始流程图；接收用户输入的操作指令，基于所述操作指令对所述缓存数据进行更新，以获取更新后的缓存数据；获取所述当前画布对应的绘制频率，并基于所述更新后的缓存数据和所述绘制频率对所述初始流程图进行修改，以获取目标流程图。通过根据输入的配置参数获取所有连接线的缓存数据，并基于缓存数据在当前画布上进行绘制以获取初始流程图，从而保障了所有连接线的路径信息最终一次性绘制在同一张画布上，并在需要对初始流程图进行更新时，根据绘制频率对初始流程图进行修改，以获取目标流程图，也就是通过控制绘制频率来防止重复绘制，避免浏览器执行大量无效代码调用画布绘制中间数据状态导致性能消耗，引起浏览器卡顿丢帧现象的发生，提高了浏览器绘制流程图的效率。
进一步地，基于本发明流程图生成方法第一实施例，提出本发明流程图生成方法第二实施例。本实施例是本发明第一实施例的步骤S10，获取当前画布中所有节点之间连接线形成的各边数据的步骤的细化，包括：
步骤a，获取当前画布中所有节点之间连接线形成的多个边数据，并根据所述配置参数依次对各所述边数据进行配置，基于所述配置结果创建集合对象，并将所述集合对象作为所述数据集合。
通过获取当前画布中所有节点的节点坐标，并根据节点坐标建立各个节点之间连接线，以形成各个边数据(边数据包括连接线的起始坐标，连接线路径等)，在获取到各个边数据后，需要定以各个边数据中的颜色宽度等，此时可以根据获取到的配置参数依次对各个边数据进行配置，并在根据配置完成后的结果来创建集合对象，并将此集合对象作为数据集合，以便后续进行保存。
在本实施例中，通过获取各个节点对应的边数据，并根据配置参数对各个边数据进行配置，以得到数据集合，从而保障了获取到的数据聚合具有当前画布中所有边数据，使得数据集合的数据较为全面，为后续进行流程图绘制提供了基础。
具体地，获取当前画布中所有节点之间连接线形成的各边数据的步骤，包括：
步骤b，在当前画布中获取各所述节点对应的节点坐标，基于各所述节点坐标确定多个直线路径，并依次检测各所述直线路径中的节点坐标的数量是否大于预设数量；
在当前画布中创建坐标系后，基于此坐标系获取各个节点在当前画布中的节点坐标，并根据提前获取到的配置参数在各个节点坐标中确定所有的开始节点坐标和开始节点坐标对应的结束节点坐标，并根据两点形成直线的原理，在开始节点坐标和该开始节点坐标对应的结束节点坐标获取直线路径，并采用同样的方式在当前画布中获取所有的直线路径，由于每个直线路径中最少包含有两个节点坐标(即该直线的开始节点坐标和结束节点坐标)，因此还需要检测各个直线路径中的节点坐标的数量，确定该数量是否大于预设数量(预设数量可以是用户提前设置的任意数量，在本实施例中仅将预设数量设置为两个进行举例说明)，并根据不同的判断结果执行不同的操作。
即，在获取到各个直线路径后，需要依次判断判断各个直线路径是否有经过三个及三个以上的节点，并基于判断结果执行不同的操作。
步骤c，若在各所述直线路径中不存在节点坐标的数量大于预设数量的目标直线路径。
当经过判断发现各个直线路径的节点坐标的数量均不大于预设数量，也就是不存在节点坐标的数量大于预设数量的目标直线路径，此时就可以直接将直线路径作为边数据。目标直线路径是节点坐标的数量大于预设数量的直线路径。
在本实施例中，通过获取各个节点对应的直线路径，并依次检测各所述直线路径中的节点坐标的数量是否大于预设数量，若不存在目标直线路径，则直接将直线路径作为边数据，从而保障了获取到边数据的准确性。
具体地，基于各所述节点坐标确定多个直线路径的步骤，包括：
步骤d，基于所述配置参数在各所述节点坐标中确定多个开始节点坐标，和各所述开始节点坐标对应的结束节点坐标；
在准备获取各个节点对应的直线路径时，需要根据配置参数在各个节点坐标中获取各个开始节点坐标和各个开始节点坐标对应的结束节点坐标，从而可以根据开始节点坐标的数量确定存在多少个直线路径。
步骤e，根据各所述开始节点坐标和各所述结束节点坐标确定多个直线路径。
当获取到各个开始节点坐标和各个开始节点坐标对应的结束节点坐标后，可以直接根据两点形成直线的原理，在开始节点坐标和结束节点坐标确定所有的直线路径。
在本实施例中，通过根据配置参数确定各个节点中的开始节点坐标和开始节点坐标对应的结束节点坐标，从而确定各个节点对应的直线路径，从而保障了获取到的直线路径的准确性。
进一步地，依次检测各所述直线路径中的节点坐标的数量是否大于预设数量的步骤之后，包括：
步骤f，若在各所述直线路径中存在节点坐标的数量大于预设数量的目标直线路径，则通过对比各所述节点坐标建立所述目标直线路径的关键点坐标；
若在各个直线路径中存在节点坐标的数量大于预设数量的目标直线路径，则可以创建一个或多个关键点，并通过对比各个节点坐标来确定关键点坐标，以保障开始节点到结束节点之间的连线不会和各个节点中的其它节点交叉。其中关键点和各个节点的位置不重合。
步骤g，根据所述目标直线路径对应的开始节点坐标、所述目标直线路径对应的结束节点坐标和所述关键点坐标建立折线，将所述折线作为边数据，其中，所述折线中的节点坐标的数量小于或等于预设数量。
在获取到关键点坐标后，获取目标直线路径对应的开始节点坐标和结束节点坐标(即确定目标直线路径需要绘制在当前画布里面的位置)，再根据该目标直线路径对应的开始节点坐标、结束节点坐标和关键点坐标建立折线，其中，该折线中的节点坐标的数量小于或等于预设数量，若存在有折线中的节点坐标的数量大于预设数量，则需要再次新建关键点，并形成新的折线，直至新的折线中的节点坐标的数量小于或等于预设数量，再将新的折线作为边数据，以便根据配置参数对此边数据进行匹配。
在本实施例中，通过在各直线路径中存在节点坐标的数量大于预设数量的目标直线路径时，建立关键点坐标，并根据目标直线路径对应的开始节点坐标、结束节点坐标和关键点坐标建立和折线，将此折线作为边数据，从而保障了获取到边数据的准确性。
进一步地，在本实施例第一至第二任意一个实施例的基础上，提出本发明流程图生成方法第三实施例。本实施例是本发明第一实施例的步骤S10，基于所述操作指令对所述缓存数据进行更新的步骤的细化，包括：
步骤h，获取所述操作指令对应的当前点击位置，计算当前点击位置和各所述连接线之间的最小距离；
若经过确定需要对初始流程图进行修改时，则需要获取操作指令对应的当前点击位置(即用户在当前画布中点击的位置)，并获取当前点击位置在当前画布中的坐标，再获取各个连接线在当前画布中的起始坐标(即开始节点坐标和结束节点坐标)，并根据起始坐标和当前点击位置对应的坐标计算当前点击位置和各个连接线之间的最小距离，也就是通过各个起始坐标确定各个连接线在当前画布中的具***置，再根据当前点击位置对应的坐标来计算当前点击位置和各个连接线之间的最小距离。
步骤k，在各所述最小距离中确定距离最小的目标最小距离，对所述缓存数据中目标最小距离对应的连接线进行更新。
在获取到各个最小距离后，需要从中选择一个距离最小的目标最小距离，以便确定当前点击位置距离哪条连接线最接近，从而预测用户需要修改哪条连接线对应的参数(如起始节点、连接线、颜色等)，再对缓存数据中目标最小距离对应的连接线进行更新，再根据更新后的缓存数据和预设控制方法来确定当前画布对应的绘制频率。
在本实施例中，通过在确定需要对初始流程图进行修改时，根据操作指令对应的当前点击位置确定需要更新的连接线，并对缓存数据中的连接线进行更新，从而可以让浏览器通过更新后的缓存数据对初始流程图进行修改。
进一步地，获取所述当前画布对应的绘制频率，并基于所述更新后的缓存数据和所述绘制频率对所述初始流程图进行修改，以获取目标流程图的步骤，包括：
步骤x，获取预设的绘制时间，并基于所述绘制时间确定所述当前画布对应的绘制频率；
在确定绘制频率时，需要先根据预设控制方法获取预设的绘制时间，也就是浏览器每经过多长时间在当前画布中进行绘制，从而根据获取到的绘制时间来确定当前画布对应的绘制频率。
步骤y，将所述当前画布中的绘制方法作为会调函数，通过预设控制方法控制所述绘制频率调用所述会调函数，以便所述会调函数根据所述更新后的缓存数据对所述初始流程图进行修改，以获取目标流程图。
当确定绘制频率后，可以直接将当前画布中应用到的绘制方法作为会调函数(以便浏览器可以根据需求直接进行调用)，再根据绘制频率调用会调函数(也就是每隔一次绘制时间调用一次会调函数)，并根据更新后的缓存数据对初始流程图进行修改，并将修改完成后的初始流程图作为目标流程图。
在本实施例中，通过根据绘制时间确定绘制频率，并将绘制方法作为会调函数，再根据绘制频率、会调函数和更新后的缓存数据对初始流程图进行修改，以获取目标流程图，从而保障了获取到的目标流程图的准确性。
本发明还提供一种流程图生成装置，参照图3，所述流程图生成装置包括：
第一获取模块，用于在浏览器中获取输入的配置参数，基于所述配置参数计算当前画布中所有节点之间连接线的数据集合，并对所述数据集合进行缓存，以获取缓存数据；
第二获取模块，用于基于所述缓存数据在所述当前画布上进行绘制，以获取初始流程图；
接收模块，用于接收用户输入的操作指令，基于所述操作指令对所述缓存数据进行更新，以获取更新后的缓存数据；
确定模块，用于获取所述当前画布对应的绘制频率，并基于所述更新后的缓存数据和所述绘制频率对所述初始流程图进行修改，以获取目标流程图。
可选地，所述第一获取模块，还用于：
获取当前画布中所有节点之间连接线形成的多个边数据，并根据所述配置参数依次对各所述边数据进行配置，基于所述配置结果创建集合对象，并将所述集合对象作为所述数据集合。
可选地，所述第一获取模块，还用于：
在当前画布中获取各所述节点对应的节点坐标，基于各所述节点坐标确定多个直线路径，并依次检测各所述直线路径中的节点坐标的数量是否大于预设数量；
若在各所述直线路径中不存在节点坐标的数量大于预设数量的目标直线路径，则将各所述直线路径作为边数据。
可选地，所述第一获取模块，还用于：
基于所述配置参数在各所述节点坐标中确定多个开始节点坐标，和各所述开始节点坐标对应的结束节点坐标；
根据各所述开始节点坐标和各所述结束节点坐标确定多个直线路径。
可选地，所述第一获取模块，还用于：
若在各所述直线路径中存在节点坐标的数量大于预设数量的目标直线路径，则通过对比各所述节点坐标建立所述目标直线路径的关键点坐标；
根据所述目标直线路径对应的开始节点坐标、所述目标直线路径对应的结束节点坐标和所述关键点坐标建立折线，将所述折线作为边数据，其中，所述折线中的节点坐标的数量小于或等于预设数量。
可选地，所述确定模块，还用于：
获取所述操作指令对应的当前点击位置，计算当前点击位置和各所述连接线之间的最小距离；
在各所述最小距离中确定距离最小的目标最小距离，对所述缓存数据中目标最小距离对应的连接线进行更新。
可选地，所述确定模块，还用于：
获取预设的绘制时间，并基于所述绘制时间确定所述当前画布对应的绘制频率；
将所述当前画布中的绘制方法作为会调函数，通过预设控制方法控制所述绘制频率调用所述会调函数，以便所述会调函数根据所述更新后的缓存数据对所述初始流程图进行修改，以获取目标流程图。
上述各程序模块所执行的方法可参照本发明流程图生成方法各个实施例，此处不再赘述。
本发明还提供一种计算机存储介质。
本发明计算机存储介质上存储有流程图生成程序，所述流程图生成程序被处理器执行时实现如上所述的流程图生成方法的步骤。
其中，在所述处理器上运行的流程图生成程序被执行时所实现的方法可参照本发明流程图生成方法各个实施例，此处不再赘述。
需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者***不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者***所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者***中还存在另外的相同要素。
上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在如上所述的一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法。
以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.一种流程图生成方法，其特征在于，所述流程图生成方法包括如下步骤：
在浏览器中获取输入的配置参数，基于所述配置参数计算当前画布中所有节点之间连接线的数据集合，并对所述数据集合进行缓存，以获取缓存数据；
基于所述缓存数据在所述当前画布上进行绘制，以获取初始流程图；
接收用户输入的操作指令，基于所述操作指令对所述缓存数据进行更新，以获取更新后的缓存数据；
获取所述当前画布对应的绘制频率，并基于所述更新后的缓存数据和所述绘制频率对所述初始流程图进行修改，以获取目标流程图。
2.如权利要求1所述的流程图生成方法，其特征在于，所述基于所述配置参数计算当前画布中所有节点之间连接线的数据集合的步骤，包括：
获取当前画布中所有节点之间连接线形成的多个边数据，并根据所述配置参数依次对各所述边数据进行配置，基于所述配置结果创建集合对象，并将所述集合对象作为所述数据集合。
3.如权利要求2所述的流程图生成方法，其特征在于，所述获取当前画布中所有节点之间连接线形成的各边数据的步骤，包括：
在当前画布中获取各所述节点对应的节点坐标，基于各所述节点坐标确定多个直线路径，并依次检测各所述直线路径中的节点坐标的数量是否大于预设数量；
若在各所述直线路径中不存在节点坐标的数量大于预设数量的目标直线路径，则将各所述直线路径作为边数据。
4.如权利要求3所述的流程图生成方法，其特征在于，所述基于各所述节点坐标确定多个直线路径的步骤，包括：
基于所述配置参数在各所述节点坐标中确定多个开始节点坐标，和各所述开始节点坐标对应的结束节点坐标；
根据各所述开始节点坐标和各所述结束节点坐标确定多个直线路径。
5.如权利要求3所述的流程图生成方法，其特征在于，所述依次检测各所述直线路径中的节点坐标的数量是否大于预设数量的步骤之后，包括：
若在各所述直线路径中存在节点坐标的数量大于预设数量的目标直线路径，则通过对比各所述节点坐标建立所述目标直线路径的关键点坐标；
根据所述目标直线路径对应的开始节点坐标、所述目标直线路径对应的结束节点坐标和所述关键点坐标建立折线，将所述折线作为边数据，其中，所述折线中的节点坐标的数量小于或等于预设数量。
6.如权利要求1所述的流程图生成方法，其特征在于，所述基于所述操作指令对所述缓存数据进行更新的步骤，包括：
获取所述操作指令对应的当前点击位置，计算当前点击位置和各所述连接线之间的最小距离；
在各所述最小距离中确定距离最小的目标最小距离，对所述缓存数据中目标最小距离对应的连接线进行更新。
7.如权利要求1-6任一项所述的流程图生成方法，其特征在于，所述获取所述当前画布对应的绘制频率，并基于所述更新后的缓存数据和所述绘制频率对所述初始流程图进行修改，以获取目标流程图的步骤，包括：
获取预设的绘制时间，并基于所述绘制时间确定所述当前画布对应的绘制频率；
将所述当前画布中的绘制方法作为会调函数，通过预设控制方法根据所述绘制频率调用所述会调函数，以便所述会调函数根据所述更新后的缓存数据对所述初始流程图进行修改，以获取目标流程图。
8.一种流程图生成装置，其特征在于，所述流程图生成装置包括：
第一获取模块，用于在浏览器中获取输入的配置参数，基于所述配置参数计算当前画布中所有节点之间连接线的数据集合，并对所述数据集合进行缓存，以获取缓存数据；
第二获取模块，用于基于所述缓存数据在所述当前画布上进行绘制，以获取初始流程图；
接收模块，用于接收用户输入的操作指令，基于所述操作指令对所述缓存数据进行更新，以获取更新后的缓存数据；
确定模块，用于获取所述当前画布对应的绘制频率，并基于所述更新后的缓存数据和所述绘制频率对所述初始流程图进行修改，以获取目标流程图。
9.一种流程图生成设备，其特征在于，所述流程图生成设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的流程图生成程序，所述流程图生成程序被所述处理器执行时实现如权利要求1至7中任一项所述的流程图生成方法的步骤。
10.一种计算机存储介质，其特征在于，所述计算机存储介质上存储有流程图生成程序，所述流程图生成程序被处理器执行时实现如权利要求1至7中任一项所述的流程图生成方法的步骤。
CN201910965732.7A 2019-10-10 2019-10-10 流程图生成方法、装置、设备及计算机存储介质 Pending CN110704769A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910965732.7A CN110704769A (zh) 2019-10-10 2019-10-10 流程图生成方法、装置、设备及计算机存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910965732.7A CN110704769A (zh) 2019-10-10 2019-10-10 流程图生成方法、装置、设备及计算机存储介质

Publications (1)

Publication Number Publication Date
CN110704769A true CN110704769A (zh) 2020-01-17

Family

ID=69199424

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910965732.7A Pending CN110704769A (zh) 2019-10-10 2019-10-10 流程图生成方法、装置、设备及计算机存储介质

Country Status (1)

Country Link
CN (1) CN110704769A (zh)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112184860A (zh) * 2020-09-25 2021-01-05 浪潮云信息技术股份公司 一种粒子动画实现方法
CN112381909A (zh) * 2020-12-07 2021-02-19 四川长虹电器股份有限公司 一种基于Canvas的轻量级流程图绘制***
CN112767513A (zh) * 2020-12-31 2021-05-07 浙江中控技术股份有限公司 一种可视化流程图和事件同步组态工具及流程图绘制方法
CN113779462A (zh) * 2021-09-09 2021-12-10 金蝶软件（中国）有限公司 一种图像联动方法、装置、设备及存储介质

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112184860A (zh) * 2020-09-25 2021-01-05 浪潮云信息技术股份公司 一种粒子动画实现方法
CN112381909A (zh) * 2020-12-07 2021-02-19 四川长虹电器股份有限公司 一种基于Canvas的轻量级流程图绘制***
CN112767513A (zh) * 2020-12-31 2021-05-07 浙江中控技术股份有限公司 一种可视化流程图和事件同步组态工具及流程图绘制方法
CN113779462A (zh) * 2021-09-09 2021-12-10 金蝶软件（中国）有限公司 一种图像联动方法、装置、设备及存储介质

Similar Documents

Publication Publication Date Title
CN110704769A (zh) 流程图生成方法、装置、设备及计算机存储介质
CN110096277B (zh) 一种动态页面展示方法、装置、电子设备及存储介质
US8711147B2 (en) Method and system for generating and displaying an interactive dynamic graph view of multiply connected objects
CN110221889B (zh) 一种页面展示方法、装置、电子设备及存储介质
CN107229790B (zh) 生成三维、二维图形的桥梁结构信息模型***及使用方法
CN108156510B (zh) 页面焦点处理的方法、装置及计算机可读存储介质
KR20160003683A (ko) 시각화된 데이터를 상호작용에 기초하여 자동으로 조작하는 기법
CN103577030A (zh) 浏览器窗口界面展现方法及***
CN110990431A (zh) 一种实现中国地图和折线图数据同步联动轮播的方法
US20070198922A1 (en) Dynamically placing resources within a graphical user interface
WO2024056100A1 (zh) 页面渲染方法、装置、设备、存储介质及计算机程序产品
CN109598672B (zh) 一种地图道路渲染方法及装置
US9342510B1 (en) State handles
EP2754040B1 (en) Visualization and editing of composite layouts
US20180143747A1 (en) User interface device and method for displaying screen of user interface device
CN116956375A (zh) Eda在线工具画布中元件自定义居中方法及装置
CN109800039B (zh) 一种用户界面展示方法、装置、电子设备及存储介质
US20190317764A1 (en) Non-transitory recording medium having computer-readable program recorded thereon, server apparatus, function graph display control apparatus, and function graph display control method
CN107038176B (zh) 网络图页面渲染方法、装置及设备
CN113419806B (zh) 图像处理方法、装置、计算机设备和存储介质
CN115249303A (zh) 基于图纸分割的布点绘制方法、装置、设备及存储介质
CN114564268A (zh) 一种设备管理方法、装置、电子设备和存储介质
CN114327395A (zh) 网页设计方法、装置、计算机设备、存储介质和产品
CN102681755A (zh) 一种用于对显示对象进行显示变换的方法、装置和设备
CN114692240A (zh) Cad图纸绘制方法、装置、存储介质及计算机设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination