CN110363828A - 一种绘制流程图的方法及绘制流程图的设备 - Google Patents

一种绘制流程图的方法及绘制流程图的设备 Download PDF

Info

Publication number
CN110363828A
CN110363828A CN201910525635.6A CN201910525635A CN110363828A CN 110363828 A CN110363828 A CN 110363828A CN 201910525635 A CN201910525635 A CN 201910525635A CN 110363828 A CN110363828 A CN 110363828A
Authority
CN
China
Prior art keywords
node
flow chart
bezier
path
information
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
CN201910525635.6A
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.)
OneConnect Smart Technology Co Ltd
Original Assignee
OneConnect Smart Technology 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 OneConnect Smart Technology Co Ltd filed Critical OneConnect Smart Technology Co Ltd
Priority to CN201910525635.6A priority Critical patent/CN110363828A/zh
Publication of CN110363828A publication Critical patent/CN110363828A/zh
Pending legal-status Critical Current

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/002D [Two Dimensional] image generation
    • G06T11/20Drawing from basic elements, e.g. lines or circles
    • G06T11/203Drawing of straight lines or curves
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/002D [Two Dimensional] image generation
    • G06T11/20Drawing from basic elements, e.g. lines or circles
    • G06T11/206Drawing of charts or graphs

Landscapes

  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Image Generation (AREA)

Abstract

本发明适用于计算机技术领域,提供了一种绘制流程图的方法及设备,该方法包括:获取待绘制的流程图的节点信息;节点信息包括待绘制的流程图的所有节点的节点标识、节点位置信息以及节点属性信息;基于节点的标识以及节点属性信息,确定所有节点之间的连接关系;基于每个节点的节点标识、节点位置信息以及所有节点之间的连接关系,确定所有节点对应的多个路径参数;调用用于绘制贝塞尔曲线的目标组件,基于路径参数绘制贝塞尔曲线,得到流程图。上述方案,通过基于用于生成流程图的路径参数绘制贝塞尔曲线生成流程图,不需要频繁地获取两个节点之间的坐标绘制贝塞尔曲线,提高了绘制流程图的效率,减少出错概率,提高绘制的流程图的准确度。

Description

一种绘制流程图的方法及绘制流程图的设备
技术领域
本发明属于计算机技术领域,尤其涉及一种绘制流程图的方法及设备。
背景技术
一个节点会有一个或多个连接点,各个节点就是靠连接点之间的连线联系起来的,从而形成一个流程。流程图是一种节点的逻辑结构拓扑图,其基本单位是节点,流程图以特效节点为单元,素材数据在一个个节点中流动,特效节点接受数据输入,经过特效算法处理后,输出到下一个节点。在流程图中,各个节点需要连接起来从而形成一个完整的特效处理流程,各个节点之间的连接方便快捷与否在很大程度上影响了流程图操作的效率。
在现有的流程图节点之间的连接方法中,一般都是采用直接连接的方法进行连接。所谓直接连接,即从某一个节点的连接点直接拖拽出一根连线连接到另一个节点的连接点,这是最直接的一种连接方式。
目前业内通常基于两个连接点的坐标生成贝塞尔曲线,实现两个节点之间的连接。然而,当需要绘制网状的流程图时,由于节点较多,直接连接需要频繁地获取两个节点之间的坐标绘制贝塞尔曲线,操作较繁琐,而且容易出错。
发明内容
有鉴于此,本发明实施例提供了一种绘制流程图的方法及绘制流程图的设备,以解决现有技术中,当需要绘制网状的流程图时,由于节点较多,直接连接需要频繁地获取两个节点之间的坐标绘制贝塞尔曲线,操作较繁琐,而且容易出错的问题。
本发明实施例的第一方面提供了一种绘制流程图的方法,包括:
获取待绘制的流程图的节点信息;其中,所述节点信息包括所述待绘制的流程图的所有节点的节点标识、节点位置信息以及节点属性信息;所述节点属性信息用于描述当前节点的父节点的信息及其子节点的信息;
基于所述节点的标识以及节点属性信息,确定所有所述节点之间的连接关系;
基于每个所述节点的所述节点标识、所述节点位置信息以及所有所述节点之间的连接关系,确定所有所述节点对应的多个路径参数;其中,所述路径参数用于绘制贝塞尔曲线;
调用用于绘制贝塞尔曲线的目标组件,基于所述路径参数绘制贝塞尔曲线,得到流程图。
本发明实施例的第二方面提供了一种绘制流程图的设备,包括:
获取单元,用于获取待绘制的流程图的节点信息;其中,所述节点信息包括所述待绘制的流程图的所有节点的节点标识、节点位置信息以及节点属性信息;所述节点属性信息用于描述当前节点的父节点的信息及其子节点的信息;
第一确定单元,用于基于所述节点的标识以及节点属性信息,确定所有所述节点之间的连接关系;
第二确定单元,用于基于每个所述节点的所述节点标识、所述节点位置信息以及所有所述节点之间的连接关系,确定所有所述节点对应的多个路径参数;其中,所述路径参数用于绘制贝塞尔曲线;
绘制单元,用于调用用于绘制贝塞尔曲线的目标组件,基于所述路径参数绘制贝塞尔曲线,得到流程图。
本发明实施例的第三方面提供了一种绘制流程图的设备,包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序,所述处理器执行所述计算机程序时实现以下步骤:
获取待绘制的流程图的节点信息;其中,所述节点信息包括所述待绘制的流程图的所有节点的节点标识、节点位置信息以及节点属性信息;所述节点属性信息用于描述当前节点的父节点的信息及其子节点的信息;;
基于所述节点的标识以及节点属性信息,确定所有所述节点之间的连接关系;
基于每个所述节点的所述节点标识、所述节点位置信息以及所有所述节点之间的连接关系,确定所有所述节点对应的多个路径参数;其中,所述路径参数用于绘制贝塞尔曲线;
调用用于绘制贝塞尔曲线的目标组件,基于所述路径参数绘制贝塞尔曲线,得到流程图。
本发明实施例的第三方面提供了一种计算机可读存储介质,所述计算机可读存储介质存储有计算机程序,所述计算机程序被处理器执行时实现以下步骤:
获取待绘制的流程图的节点信息;其中,所述节点信息包括所述待绘制的流程图的所有节点的节点标识、节点位置信息以及节点属性信息;所述节点属性信息用于描述当前节点的父节点的信息及其子节点的信息;
基于所述节点的标识以及节点属性信息,确定所有所述节点之间的连接关系;
基于每个所述节点的所述节点标识、所述节点位置信息以及所有所述节点之间的连接关系,确定所有所述节点对应的多个路径参数;其中,所述路径参数用于绘制贝塞尔曲线;
调用用于绘制贝塞尔曲线的目标组件,基于所述路径参数绘制贝塞尔曲线,得到流程图。
实施本发明实施例提供的一种绘制流程图的方法及绘制流程图的设备具有以下有益效果:
本发明实施例,基于待绘制的流程图的节点信息确定所述节点信息对应的路径参数;调用用于绘制贝塞尔曲线的目标组件,基于所述路径参数绘制贝塞尔曲线,得到流程图。通过基于用于生成流程图的路径参数绘制贝塞尔曲线生成流程图,不需要频繁地获取两个节点之间的坐标绘制贝塞尔曲线,提高了绘制流程图的效率,减少出错概率,提高绘制的流程图的准确度。
附图说明
为了更清楚地说明本发明实施例中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动性的前提下,还可以根据这些附图获得其他的附图。
图1是本发明一实施例提供的一种绘制流程图的方法的实现流程图;
图2是本发明另一实施例提供的一种绘制流程图的方法的实现流程图;
图3是本发明一实施例提供的一种绘制流程图的设备的示意图;
图4是本发明另一实施例提供的一种绘制流程图的设备的示意图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白,以下结合附图及实施例,对本发明进行进一步详细说明。应当理解,此处所描述的具体实施例仅仅用以解释本发明,并不用于限定本发明。
请参见图1,图1是本发明实施例提供的一种绘制流程图的方法的实现流程图。本实施例中绘制流程图的方法的执行主体为绘制流程图的设备。绘制流程图的设备包括但不限于智能手机、平板电脑、可穿戴设备等终端,还可以是台式电脑等。如图所示的绘制流程图的方法可包括:
S101:获取待绘制的流程图的节点信息;其中,所述节点信息包括所述待绘制的流程图的所有节点的节点标识、节点位置信息以及节点属性信息;所述节点属性信息用于描述当前节点的父节点的信息及其子节点的信息。
当用户需要绘制流程图时,可以通过交互界面输入待绘制的流程图的节点信息,也可以上传包含待绘制的流程图的节点信息的文件,并触发用于请求绘制网络流程图的请求信息。节点信息包括所有节点的节点标识、节点位置信息以及节点属性信息。其中,待绘制的流程图可以是连接关系较简单的流程图(例如,直连型的流程图),也可以是连接关系较复杂的网状流程图。
节点标识可以包括以下任意一种或多种的组合:节点名称、待处理事项的标识、待处理事项的处理人的标识、待处理事项的处理节点的标识等。
节点位置信息可以是节点的坐标。节点属性信息用于描述当前节点的父节点的信息及其子节点的信息。父节点信息至少包括父节点的标识、子节点信息至少包括子节点标识。节点属性信息还可以包括当前节点与父节点之间的连接线的所属类型、当前节点与子节点之间的连接线的所属类型。
绘制流程图的设备在接收到该请求信息时,获取待绘制的流程图的节点信息。
进一步地,S101具体包括:获取项目信息,并基于所述项目信息获取待绘制的网状流程图。
当用户需要绘制流程图时,可以通过交互界面选择或上传项目信息,并触发用于请求绘制流程图的请求信息。
绘制流程图的设备在接收到该请求信息时,获取用户选择或上传的项目信息,项目信息可以包括:待处理事项、每个待处理事项的处理人以及每个待处理事项的时间节点,还可以包括每个待处理事项的流转信息、每个待处理事项所属的事项类型等。时间节点可以是每个待处理事项的完成时间节点、或者处理时限。待处理事项的流转信息用于标识负责处理该待处理事项的处理节点、处理节点之间的先后顺序等。处理节点用于标识该处理事项的处理流程节点或处理逻辑节点。
可以理解的是,项目信息可以包括多个执行条件、执行条件之间的耦合关系。
绘制流程图的设备可以基于获取到的项目信息确定待绘制的流程图的节点信息。
例如,绘制流程图的设备可以基于项目信息中的所有待处理事项以及每个待处理事项的处理人,确定待绘制的流程图的节点信息;或者基于项目信息中的所有待处理事项、每个待处理事项的处理人以及每个待处理事项的流转信息,确定待绘制的流程图的节点信息。
S102:基于所述节点的标识以及节点属性信息,确定所有所述节点之间的连接关系。
绘制流程图的设备基于所有节点的节点标识、节点属性信息中描述的当前节点的父节点的信息及其子节点的信息,确定与当前节点连接的父节点以及子节点,按照此方法确定每个当前节点的父节点及子节点,并基于每个当前节点的父节点以及子节点确定所有节点之间的连接关系。节点之间的连接关系用于标识节点之间的信号流向,还可以标识节点之间的连线的所属类型。
其中,当前节点可以是待绘制的流程图的所有节点中的任意节点。
S103:基于每个所述节点的所述节点标识、所述节点位置信息以及所有所述节点之间的连接关系,确定所有所述节点对应的多个路径参数;其中,所述路径参数用于绘制贝塞尔曲线。
绘制流程图的设备基于每个节点的节点标识、所有节点之间的连接关系,确定待绘制的流程图所包含的所有路径,并基于每条路径的起始节点的节点标识以及终点的节点标识、每条路径包含的起始节点与终点之间的连线的所属类型、所有节点的节点位置,确定每条路径对应的路径参数。其中,一条路径包括2个节点。
例如,绘制流程图的设备基于节点信息包含的所有节点标识以及所有节点之间的连接关系,确定每条路径的起点和终点,并基于每条路径的起点的坐标和终点的坐标、每条路径包含的起始节点与终点之间的连线的所属类型,确定路径参数。路径参数主要是要明确路径的起点的坐标和终点的坐标。
比如,某条路径的起点的坐标是(startX,startY),终点的坐标是(endX,endY),那么想要绘制出我们项目中的曲线,他们路径参数应该是["M"+(startX+left)+","+(startY+top)+"C"+(startX+left)+","+(endY+top)+","+(startX+left)+","+(endY+top)+","+(endX)+","+(endY+top)];其中left指水平方向的位移,top指垂直方向的位移,M表示移动到某点的意思,C表示画曲线的意思。
由于流程图中,连接同一个中间节点的其他节点可能有多个,当绘制网状流程图时,通过路径参数绘制贝塞尔曲线,得到网状流程图,不需要频繁获取起点坐标和终点坐标进行绘制。
进一步地,S103可以包括S1031~S1032。具体如下:
S1031:基于每个所述节点的所述节点位置信息以及所有所述节点之间的连接关系,确定每条路径的起点的位置信息、终点的位置信息以及所述起点和所述终点之间的连接线的所属类型。
绘制流程图的设备基于所有节点之间的连接关系,确定待绘制的流程图的结构(例如,网状流程图的网状树形结构),并基于流程图的结构确定流程图中包含的每条路径的起点及终点、每条路径的起点和终点之间的连接线的所属类型;基于所有节点的节点位置、每条路径的起点的节点标识及终点的节点标识,确定每条路径的起点的位置信息以及终点的位置信息。
其中,由于节点之间的连接关系可以标识节点之间的信号流向,还可以标识节点之间的连接线的所属类型,因此,可以基于节点之间的连接关系确定每条路径的起点和终点之间的连接线的所属类型。连接线的所属类型包括但不限于曲线类型。
S1032:基于每条所述路径的起点的位置信息、终点的位置信息以及所述连接线的所属类型,确定每条所述路径的所述路径参数。
例如,绘制流程图的设备基于每条路径的起点的坐标信息、终点的坐标信息、每条路径包含的起始节点与终点之间的连线的所属类型,确定用于绘制贝塞尔曲线的路径参数。路径参数用于指示如何绘制赛贝尔曲线。可以理解的是,绘制流程图的设备可以基于每条路径各自对应的路径参数,生成路径参数数组。路径参数数组为所有的路径参数的集合。每条路径的路径参数作为路径参数数组中的一个子元素。
S104:调用用于绘制贝塞尔曲线的目标组件,基于所述路径参数绘制贝塞尔曲线,得到流程图。
绘制流程图的设备调用预先创建好的用于绘制贝塞尔曲线的目标组件,通过该目标组件基于所有路径参数绘制每个路径参数对应的贝塞尔曲线,得到流程图。
可以理解的是,在S104之前还可以包括:在前端框架中创建用于绘制贝塞尔曲线的目标组件;其中,所述目标组件包括画布组件、曲线组件以及路径组件;所述画布组件用于设置绘制贝塞尔曲线的画布;所述曲线组件中包含所有贝塞尔曲线的集合;所述路径组件用于基于路径参数绘制贝塞尔曲线。
例如,绘制流程图的设备在race前端框架中创建用于绘制贝塞尔曲线的目标组件,该目标组件为一连接线组件,通过const{Paper,Set,Path}=require('react-raphael'),在连接线组件中集成了react-raphael模块和画布组件Paper、曲线组件Set、路径组件Path三大组件模块。其中,react-raphael模块用于在网页中绘制矢量图形的JavaScript库。
Paper组件用于设置绘制贝塞尔曲线的画布,Paper组件相当于绘制所有贝塞尔曲线canvas环境,可以设置用于绘制流程图的整个画布的宽和高;set组件相当于所有贝塞尔曲线的一个集合;Path组件只需要传入路径参数和线的颜色属性即可绘制出曲线。
此时,S1043可以包括S1041~S1043,具体如下:
S1041:调用所述目标组件,通过所述目标组件中的所述画布组件基于所述路径参数设置用于绘制流程图的画布。
绘制流程图的设备调用用于绘制流程图的目标组件,将所有路径参数传入该目标组件,基于所有路径参数确定每个路径参数的起点坐标以及终点坐标,基于所有路径参数的地点坐标以及终点坐标,确定水平方向的最小坐标值以及水平方向的最大坐标值、竖直方向的最小坐标值以及最大坐标值,从而进一步确定水平方向的长度值以及竖直方向的长度值,以得到用于绘制流程图的画布的最小宽度和最小高度。基于水平方向的长度值以及竖直方向的长度值确定最终传入目标组件的Paper组件的赋值,将确定的赋值传入Paper组件,通过目标组件中的Paper组件基于该赋值设置用于绘制流程图的整个画布的宽和高。
进一步地,可以基于所有所述路径参数生成路径参数数组;其中,每个所述路径参数作为路径参数数组的一个子元素,一个所述路径参数用于绘制一条贝塞尔曲线。
绘制流程图的设备可以将所有绘制贝塞尔曲线的路径参数作为一个对象放在一个数组中,所有的路径参数即路径参数数组的子元素。
绘制流程图的设备将路径参数传入目标组件,在渲染页面时,遍历路径参数数组中的每个子元素,并基于路径参数的起点的坐标以及终点的坐标,确定水平方向的最小坐标值以及水平方向的最大坐标值、竖直方向的最小坐标值以及最大坐标值,从而进一步确定水平方向的长度值以及竖直方向的长度值,基于水平方向的长度值以及竖直方向的长度值确定最终传入目标组件的Paper组件的赋值,将确定的赋值传入Paper组件,通过目标组件中的Paper组件基于该赋值设置整个画布的宽高,以能够在该画布中绘制每个路径参数对应的贝塞尔曲线。
S1042:基于每个所述路径参数中标识的待绘制的贝塞尔曲线所属的类型,从所述目标组件中选择与所述曲线类型匹配的目标贝塞尔曲线。
绘制流程图的设备从每个路径参数中获取用于标识待绘制的贝塞尔曲线所属的类型,从该目标组件中选择与该类型匹配的目标贝塞尔曲线。
例如,假设路径参数为:["M"+(startX+left)+","+(startY+top)+"C"+(startX+left)+","+(endY+top)+","+(startX+left)+","+(endY+top)+","+(endX)+","+(endY+top)],此时“C”标识画曲线,那么绘制流程图的设备从每个路径参数中获取“C”,从而确定该路径参数对应的待绘制的贝塞尔曲线所属的类型为曲线。
S1043:基于每个所述路径参数标识的起点的坐标以及终点的坐标、每个所述路径参数对应的目标贝塞尔曲线,通过所述目标组件中所述路径组件,在所述设置的画布上绘制每个所述路径参数对应的目标赛贝尔曲线,得到所述流程图。
绘制流程图的设备调用目标组件中路径组件,基于路径参数标识的起点的坐标信息以及终点的坐标信息,每个路径参数对应的目标贝塞尔曲线,在设置好的画布上绘制每个路径参数对应的目标赛贝尔曲线,得到流程图。
可以理解的是,当基于所有路径参数生成路径参数数组时,绘制流程图的设备基于路径参数数组中的每个子元素,在设置好的画布上,采用与每个子元素匹配的曲线,绘制贝塞尔曲线,得到流程图。每个子元素匹配的曲线是指子元素中标识的待会制的贝塞尔曲线所属的类型相匹配的曲线。
可以理解的是,当用户未设置或未选择线条颜色时,绘制流程图的设备采用默认的线条颜色绘制贝塞尔曲线;当获取到用户指定的线条颜色时,采用用户指定的线条颜色绘制贝塞尔曲线,生成流程图。
本发明实施例,基于待绘制的流程图的节点信息确定所述节点信息对应的路径参数;调用用于绘制贝塞尔曲线的目标组件,基于所述路径参数绘制贝塞尔曲线,得到流程图。通过基于用于生成流程图的路径参数绘制贝塞尔曲线生成流程图,不需要频繁地获取两个节点之间的坐标绘制贝塞尔曲线,提高了绘制流程图的效率,减少出错概率,提高绘制的流程图的准确度。
请参见图2,图2是本发明另一实施例提供的一种绘制流程图的方法的实现流程图。本实施例与上一实施例的不同之处在于S205~S206,S201~S204与上一实施例中S101~S104相同,具体请参阅上一实施例中S101~S104的相关描述,此处不赘述。S205~S206具体如下:
S205:获取曲线修改请求信息;其中,所述曲线修改请求包含待更新的变更节点的节点标识以及所述变更节点对应的更新的路径参数。
当用户想要修改流程图中的某条贝塞尔曲线或增加赛贝尔曲线时,通过交互界面触发曲线修改请求信息。曲线修改请求信息用于请求在流程图中新增或删减贝塞尔曲线。曲线修改请求包含待更新的变更节点的节点标识以及所述变更节点对应的更新的路径参数。待更新的变更节点的节点标识用于确定待更新的路径。
当路径参数存于路径参数数组中时,曲线修改请求包含路径参数数组,路径参数数组包括至少一个更新的路径参数。
S206:基于所述曲线修改请求信息更新所述流程图。
绘制流程图的设备从曲线修改请求信息中提取待更新的变更节点的节点标识,确定待更新的路径,并从曲线修改请求信息中提取变更节点对应的更新的路径参数,并在绘制好的流程图对应的画布上,基于确定的待更新的路径以及更新的路径参数,增加新的贝塞尔曲线或删减绘制好的流程图中的贝塞尔曲线,得到更新后的流程图。
本发明实施例,通过修改路径参数来增加或删减流程图中的贝塞尔曲线,从而能够动态调整流程图。只需要修改路径参数即可实现实时更新流程图,省时省力,能够提高修改流程图的效率。
应理解,上述实施例中各步骤的序号的大小并不意味着执行顺序的先后,各过程的执行顺序应以其功能和内在逻辑确定,而不应对本发明实施例的实施过程构成任何限定。
请参阅图3,图3是本发明一实施例提供的一种绘制流程图的设备的示意图。绘制流程图的设备包括的各单元用于执行图1~图2对应的实施例中的各步骤。具体请参阅图1~图2各自对应的实施例中的相关描述。为了便于说明,仅示出了与本实施例相关的部分。参见图3,绘制流程图的设备3包括:
获取单元310,用于获取待绘制的流程图的节点信息;其中,所述节点信息包括所述待绘制的流程图的所有节点的节点标识、节点位置信息以及节点属性信息;所述节点属性信息用于描述当前节点的父节点的信息及其子节点的信息;
第一确定单元320,用于基于所述节点的标识以及节点属性信息,确定所有所述节点之间的连接关系;
第二确定单元330,用于基于每个所述节点的所述节点位置信息以及所有所述节点之间的连接关系,确定所有所述节点对应的多个路径参数;其中,所述路径参数用于绘制贝塞尔曲线;
绘制单元340,用于调用用于绘制贝塞尔曲线的目标组件,基于所述路径参数绘制贝塞尔曲线,得到流程图。
进一步地,所述第二确定单元具体用于:
基于每个所述节点的所述节点标识、所述节点位置信息以及所有所述节点之间的连接关系,确定每条路径的起点的位置信息、终点的位置信息以及所述起点和所述终点之间的连接线的所属类型;
基于每条所述路径的起点的位置信息、终点的位置信息以及所述连接线的所属类型,确定每条所述路径的所述路径参数。
进一步地,绘制流程图的设备还可以包括:
请求信息获取单元,用于获取曲线修改请求信息;其中,所述曲线修改请求包含待更新的变更节点的节点标识以及所述变更节点对应的更新的路径参数;
更新单元,用于基于所述曲线修改请求信息更新所述流程图。
进一步地,绘制流程图的设备还可以包括:
创建单元,用于在前端框架中创建用于绘制贝塞尔曲线的目标组件;其中,所述目标组件包括画布组件、曲线组件以及路径组件;
所述画布组件用于设置绘制贝塞尔曲线的画布;
所述曲线组件中包含所有贝塞尔曲线的集合;
所述路径组件用于基于路径参数绘制贝塞尔曲线。
进一步地,所述节点之间的连接关系标识节点之间的信号流向、节点之间的连接线的所属类型,绘制单元330具体用于:
调用所述目标组件,通过所述目标组件中的所述画布组件基于所述路径参数设置用于绘制流程图的画布;
基于每个所述路径参数中标识的待绘制的贝塞尔曲线所属的类型,从所述目标组件中选择与所述类型匹配的目标贝塞尔曲线;
基于每个所述路径参数标识的起点的坐标以及终点的坐标、每个所述路径参数对应的目标贝塞尔曲线,通过所述目标组件中所述路径组件,在所述设置的画布上绘制每个所述路径参数对应的目标赛贝尔曲线,得到所述流程图。
进一步地,获取单元310具体用于:获取项目信息,并基于所述项目信息获取待绘制的网状流程图。
图4是本发明另一实施例提供的一种绘制流程图的设备的示意图。如图4所示,该实施例的绘制流程图的设备4包括:处理器40、存储器41以及存储在所述存储器41中并可在所述处理器40上运行的计算机程序42。所述处理器40执行所述计算机程序42时实现上述各个绘制流程图的设备的绘制流程图的方法实施例中的步骤,例如图1所示的S101至S104。或者,所述处理器40执行所述计算机程序42时实现上述各装置实施例中各单元的功能,例如图3所示单元310至340功能。
示例性的,所述计算机程序42可以被分割成一个或多个单元,所述一个或者多个单元被存储在所述存储器41中,并由所述处理器40执行,以完成本发明。所述一个或多个单元可以是能够完成特定功能的一系列计算机程序指令段,该指令段用于描述所述计算机程序42在所述绘制流程图的设备4中的执行过程。例如,所述计算机程序42可以被分割成获取单元、第一确定单元、第二确定单元以及绘制单元,各单元具体功能如上所述。
所述绘制流程图的设备可包括,但不仅限于,处理器40、存储器41。本领域技术人员可以理解,图4仅仅是绘制流程图的设备4的示例,并不构成对绘制流程图的设备4的限定,可以包括比图示更多或更少的部件,或者组合某些部件,或者不同的部件,例如所述绘制流程图的设备还可以包括输入输出设备、网络接入设备、总线等。
所称处理器40可以是中央处理单元(Central Processing Unit,CPU),还可以是其他通用处理器、数字信号处理器(Digital Signal Processor,DSP)、专用集成电路(Application Specific Integrated Circuit,ASIC)、现成可编程门阵列(Field-Programmable Gate Array,FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
所述存储器41可以是所述绘制流程图的设备4的内部存储单元,例如绘制流程图的设备4的硬盘或内存。所述存储器41也可以是所述绘制流程图的设备4的外部存储设备,例如所述绘制流程图的设备4上配备的插接式硬盘,智能存储卡(Smart Media Card,SMC),安全数字(Secure Digital,SD)卡,闪存卡(Flash Card)等。进一步地,所述存储器41还可以既包括所述绘制流程图的设备4的内部存储单元也包括外部存储设备。所述存储器41用于存储所述计算机程序以及所述绘制流程图的设备所需的其他程序和数据。所述存储器41还可以用于暂时地存储已经输出或者将要输出的数据。
以上所述实施例仅用以说明本发明的技术方案,而非对其限制;尽管参照前述实施例对本发明进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围,均应包含在本发明的保护范围之内。

Claims (10)

1.一种绘制流程图的方法,其特征在于,包括:
获取待绘制的流程图的节点信息;其中,所述节点信息包括所述待绘制的流程图的所有节点的节点标识、节点位置信息以及节点属性信息;所述节点属性信息用于描述当前节点的父节点的信息及其子节点的信息;
基于所述节点的标识以及节点属性信息,确定所有所述节点之间的连接关系;
基于每个所述节点的所述节点标识、所述节点位置信息以及所有所述节点之间的连接关系,确定所有所述节点对应的多个路径参数;其中,所述路径参数用于绘制贝塞尔曲线;
调用用于绘制贝塞尔曲线的目标组件,基于所述路径参数绘制贝塞尔曲线,得到流程图。
2.根据权利要求1所述的方法,其特征在于,所述基于每个所述节点的所述节点的标识、所述节点位置信息以及所有所述节点之间的连接关系,确定所述节点对应的多个路径参数,包括:
基于每个所述节点的所述节点位置信息以及所有所述节点之间的连接关系,确定每条路径的起点的位置信息、终点的位置信息以及所述起点和所述终点之间的连接线的所属类型;
基于每条所述路径的起点的位置信息、终点的位置信息以及所述连接线的所属类型,确定每条所述路径的所述路径参数。
3.根据权利要求1所述的方法,其特征在于,所述调用用于绘制贝塞尔曲线的目标组件,基于所述路径参数绘制贝塞尔曲线,得到流程图之后,还包括:
获取曲线修改请求信息;其中,所述曲线修改请求包含待更新的变更节点的节点标识以及所述变更节点对应的更新的路径参数;
基于所述曲线修改请求信息更新所述流程图。
4.根据权利要求2所述的方法,其特征在于,所述调用用于绘制贝塞尔曲线的目标组件,基于所述路径参数绘制贝塞尔曲线,得到流程图之前,还包括:
在前端框架中创建用于绘制贝塞尔曲线的目标组件;其中,所述目标组件包括画布组件、曲线组件以及路径组件;
所述画布组件用于设置绘制贝塞尔曲线的画布;
所述曲线组件中包含所有贝塞尔曲线的集合;
所述路径组件用于基于路径参数绘制贝塞尔曲线。
5.根据权利要求4所述的方法,其特征在于,所述调用用于绘制贝塞尔曲线的目标组件,基于所述路径参数绘制贝塞尔曲线,得到流程图,包括:
调用所述目标组件,通过所述目标组件中的所述画布组件基于所述路径参数设置用于绘制流程图的画布;
基于每个所述路径参数中标识的待绘制的贝塞尔曲线所属的类型,从所述目标组件中选择与所述类型匹配的目标贝塞尔曲线;
基于每个所述路径参数标识的起点的坐标以及终点的坐标、每个所述路径参数对应的目标贝塞尔曲线,通过所述目标组件中所述路径组件,在所述设置的画布上绘制每个所述路径参数对应的目标赛贝尔曲线,得到所述流程图。
6.一种绘制流程图的设备,其特征在于,包括:
获取单元,用于获取待绘制的流程图的节点信息;其中,所述节点信息包括所述待绘制的流程图的所有节点的节点标识、节点位置信息以及节点属性信息;所述节点属性信息用于描述当前节点的父节点的信息及其子节点的信息;
第一确定单元,用于基于所述节点的标识以及节点属性信息,确定所有所述节点之间的连接关系;
第二确定单元,用于基于每个所述节点的所述节点位置信息以及所有所述节点之间的连接关系,确定所有所述节点对应的多个路径参数;其中,所述路径参数用于绘制贝塞尔曲线;
绘制单元,用于调用用于绘制贝塞尔曲线的目标组件,基于所述路径参数绘制贝塞尔曲线,得到流程图。
7.根据权利要求6所述的绘制流程图的设备,其特征在于,所述第二确定单元具体用于:
基于每个所述节点的所述节点标识、所述节点位置信息以及所有所述节点之间的连接关系,确定每条路径的起点的位置信息、终点的位置信息以及所述起点和所述终点之间的连接线的所属类型;
基于每条所述路径的起点的位置信息、终点的位置信息以及所述连接线的所属类型,确定每条所述路径的所述路径参数。
8.根据权利要求6或7所述的绘制流程图的设备,其特征在于,还包括:
创建单元,用于在前端框架中创建用于绘制贝塞尔曲线的目标组件;其中,所述目标组件包括画布组件、曲线组件以及路径组件;
所述画布组件用于设置绘制贝塞尔曲线的画布;
所述曲线组件中包含所有贝塞尔曲线的集合;
所述路径组件用于基于路径参数绘制贝塞尔曲线。
9.一种绘制流程图的设备,其特征在于,包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序,所述处理器执行所述计算机程序时实现如权利要求1至5任一项所述方法的步骤。
10.一种计算机可读存储介质,所述计算机可读存储介质存储有计算机程序,其特征在于,所述计算机程序被处理器执行时实现如权利要求1至5任一项所述方法的步骤。
CN201910525635.6A 2019-06-18 2019-06-18 一种绘制流程图的方法及绘制流程图的设备 Pending CN110363828A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910525635.6A CN110363828A (zh) 2019-06-18 2019-06-18 一种绘制流程图的方法及绘制流程图的设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910525635.6A CN110363828A (zh) 2019-06-18 2019-06-18 一种绘制流程图的方法及绘制流程图的设备

Publications (1)

Publication Number Publication Date
CN110363828A true CN110363828A (zh) 2019-10-22

Family

ID=68216685

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910525635.6A Pending CN110363828A (zh) 2019-06-18 2019-06-18 一种绘制流程图的方法及绘制流程图的设备

Country Status (1)

Country Link
CN (1) CN110363828A (zh)

Cited By (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111158681A (zh) * 2019-12-27 2020-05-15 航天壹进制(南京)数据科技有限公司 一种Web前端拓扑图插件实现方法及系统
CN111260752A (zh) * 2020-01-14 2020-06-09 北京明略软件系统有限公司 一种流程图绘制方法、装置及设备、存储介质
CN111814439A (zh) * 2020-08-21 2020-10-23 中国工商银行股份有限公司 流程图自动化描述方法和装置
CN112767513A (zh) * 2020-12-31 2021-05-07 浙江中控技术股份有限公司 一种可视化流程图和事件同步组态工具及流程图绘制方法
CN112950744A (zh) * 2021-01-28 2021-06-11 平安普惠企业管理有限公司 可视化拖拽绘制流程图方法、装置、设备及存储介质
CN113485610A (zh) * 2021-05-08 2021-10-08 北京易成时代科技有限公司 一种基于位置计算的甘特图依赖关系技术方法
CN115079918A (zh) * 2022-08-19 2022-09-20 中化现代农业有限公司 项目研究建模方法、装置、电子设备和存储介质
CN115562192A (zh) * 2022-09-27 2023-01-03 北京虎蜥信息技术有限公司 一种装配工艺图形化管理方法、系统、终端及存储介质

Citations (14)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20100265255A1 (en) * 2009-04-21 2010-10-21 Sony Computer Entertainment Inc. Generation of cubic bezier control points in computer graphics systems
CN102004974A (zh) * 2010-12-30 2011-04-06 用友软件股份有限公司 流程展现方法和装置
CN102694984A (zh) * 2011-03-21 2012-09-26 新奥特(北京)视频技术有限公司 流程图节点的碰撞连接方法
CN102737108A (zh) * 2012-04-05 2012-10-17 李姮乐 处理流程图的方法及装置
CN103577164A (zh) * 2012-07-20 2014-02-12 腾讯科技(深圳)有限公司 流程图的生成方法和装置
US20140230030A1 (en) * 2006-11-22 2014-08-14 Raj Abhyanker Method and apparatus for geo-spatial and social relationship analysis
US20150121201A1 (en) * 2012-07-20 2015-04-30 Microsoft Corporation Color Coding of Layout Structure Elements in a Flow Format Document
CN105243521A (zh) * 2015-11-20 2016-01-13 华润电力投资有限公司河南分公司 一种工作流管理方法及系统
JP2016115017A (ja) * 2014-12-12 2016-06-23 日本電信電話株式会社 フローチャート作成方法及びプログラム
CN106023279A (zh) * 2016-05-09 2016-10-12 广州视睿电子科技有限公司 曲线绘制方法和系统
CN106202006A (zh) * 2016-06-27 2016-12-07 北京百度网讯科技有限公司 文件生成方法和装置
CN106649231A (zh) * 2016-10-27 2017-05-10 深圳市元征科技股份有限公司 流程图的生成方法及装置
US20170201457A1 (en) * 2016-01-07 2017-07-13 Hanwha Techwin Co., Ltd. Method and apparatus for optimal path generation
CN109032446A (zh) * 2018-07-23 2018-12-18 广州视源电子科技股份有限公司 思维导图的节点联系生成方法、装置、设备及存储介质

Patent Citations (14)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20140230030A1 (en) * 2006-11-22 2014-08-14 Raj Abhyanker Method and apparatus for geo-spatial and social relationship analysis
US20100265255A1 (en) * 2009-04-21 2010-10-21 Sony Computer Entertainment Inc. Generation of cubic bezier control points in computer graphics systems
CN102004974A (zh) * 2010-12-30 2011-04-06 用友软件股份有限公司 流程展现方法和装置
CN102694984A (zh) * 2011-03-21 2012-09-26 新奥特(北京)视频技术有限公司 流程图节点的碰撞连接方法
CN102737108A (zh) * 2012-04-05 2012-10-17 李姮乐 处理流程图的方法及装置
US20150121201A1 (en) * 2012-07-20 2015-04-30 Microsoft Corporation Color Coding of Layout Structure Elements in a Flow Format Document
CN103577164A (zh) * 2012-07-20 2014-02-12 腾讯科技(深圳)有限公司 流程图的生成方法和装置
JP2016115017A (ja) * 2014-12-12 2016-06-23 日本電信電話株式会社 フローチャート作成方法及びプログラム
CN105243521A (zh) * 2015-11-20 2016-01-13 华润电力投资有限公司河南分公司 一种工作流管理方法及系统
US20170201457A1 (en) * 2016-01-07 2017-07-13 Hanwha Techwin Co., Ltd. Method and apparatus for optimal path generation
CN106023279A (zh) * 2016-05-09 2016-10-12 广州视睿电子科技有限公司 曲线绘制方法和系统
CN106202006A (zh) * 2016-06-27 2016-12-07 北京百度网讯科技有限公司 文件生成方法和装置
CN106649231A (zh) * 2016-10-27 2017-05-10 深圳市元征科技股份有限公司 流程图的生成方法及装置
CN109032446A (zh) * 2018-07-23 2018-12-18 广州视源电子科技股份有限公司 思维导图的节点联系生成方法、装置、设备及存储介质

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
任志豪 等: "基于SVG的思维导图的系统实现", 《现代计算机(专业版)》, no. 9, pages 70 - 75 *
王小丽: "三维图像绘制过程优化处理方法研究与仿真", 《计算机仿真》, vol. 34, no. 4, pages 327 - 330 *

Cited By (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111158681A (zh) * 2019-12-27 2020-05-15 航天壹进制(南京)数据科技有限公司 一种Web前端拓扑图插件实现方法及系统
CN111158681B (zh) * 2019-12-27 2022-09-06 南京壹进制信息科技有限公司 一种Web前端拓扑图插件实现方法及系统
CN111260752A (zh) * 2020-01-14 2020-06-09 北京明略软件系统有限公司 一种流程图绘制方法、装置及设备、存储介质
CN111814439A (zh) * 2020-08-21 2020-10-23 中国工商银行股份有限公司 流程图自动化描述方法和装置
CN111814439B (zh) * 2020-08-21 2024-02-02 中国工商银行股份有限公司 流程图自动化描述方法和装置
CN112767513A (zh) * 2020-12-31 2021-05-07 浙江中控技术股份有限公司 一种可视化流程图和事件同步组态工具及流程图绘制方法
CN112950744A (zh) * 2021-01-28 2021-06-11 平安普惠企业管理有限公司 可视化拖拽绘制流程图方法、装置、设备及存储介质
CN112950744B (zh) * 2021-01-28 2024-02-27 深圳市兴海物联科技有限公司 可视化拖拽绘制流程图方法、装置、设备及存储介质
CN113485610A (zh) * 2021-05-08 2021-10-08 北京易成时代科技有限公司 一种基于位置计算的甘特图依赖关系技术方法
CN115079918A (zh) * 2022-08-19 2022-09-20 中化现代农业有限公司 项目研究建模方法、装置、电子设备和存储介质
CN115079918B (zh) * 2022-08-19 2022-11-18 中化现代农业有限公司 项目研究建模方法、装置、电子设备和存储介质
CN115562192A (zh) * 2022-09-27 2023-01-03 北京虎蜥信息技术有限公司 一种装配工艺图形化管理方法、系统、终端及存储介质

Similar Documents

Publication Publication Date Title
CN110363828A (zh) 一种绘制流程图的方法及绘制流程图的设备
CN107679276B (zh) 电力系统潮流接线图的生成方法、装置及电子设备
CN111428457B (zh) 数据表的自动格式化
CN110688104A (zh) 可视化流程处理方法、装置、电子设备及可读存储介质
CN111240669B (zh) 界面生成方法、装置、电子设备及计算机存储介质
CN110377209B (zh) 一种通过拖拽实现可视化流程配置的方法及装置
CN109190326A (zh) 生成工艺流程图的方法及装置
CN109324796A (zh) 界面布局方法及装置
CN113031938A (zh) 一种可视化界面图像转化为编程语言数据的方法及装置
CN112562032A (zh) 一种高效绘制工控网络拓扑图的方法、装置
CN111814283B (zh) 喷淋管线工程量的计算方法、装置、存储介质和计算机设备
CN110727969A (zh) 工作流自动调整方法、装置、设备及存储介质
CN105808682A (zh) 一种关系图展示的方法和装置
CN107438194A (zh) 一种智能电视ui对象绘制方法及智能电视
CN110909888A (zh) 泛型决策树构建方法、装置、设备及可读存储介质
CN114265941A (zh) 一种处理关系图转为类树形血缘图关系的方法及系统
CN112148276A (zh) 用于深度学习的可视化编程
CN113850884A (zh) 桑基图的生成方法、装置、电子设备和存储介质
CN109783097A (zh) 绘制web频率图插件的实现方法
CN102938157A (zh) 一种基于圆域b样条曲线的风格化手绘生成方法与系统
CN112003729A (zh) 异构云平台资源拓扑展示方法、系统、终端及存储介质
CN109739859B (zh) 一种关系图谱绘制方法、系统及相关装置
CN111273980A (zh) 界面线程可视化方法、装置、计算机设备及存储介质
CN109684024A (zh) 多窗口的显示方法、智能终端及计算机可读存储介质
WO2023045412A1 (zh) 页面创建方法、装置和系统、计算机装置和存储介质

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