CN115079916A - 可视化集成编排画布绘制方法、系统、终端设备及介质 - Google Patents

可视化集成编排画布绘制方法、系统、终端设备及介质 Download PDF

Info

Publication number
CN115079916A
CN115079916A CN202210674220.7A CN202210674220A CN115079916A CN 115079916 A CN115079916 A CN 115079916A CN 202210674220 A CN202210674220 A CN 202210674220A CN 115079916 A CN115079916 A CN 115079916A
Authority
CN
China
Prior art keywords
node
canvas
edge
nodes
style
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.)
Granted
Application number
CN202210674220.7A
Other languages
English (en)
Other versions
CN115079916B (zh
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.)
Guangzhou Xuanwu Wireless Technology Co Ltd
Original Assignee
Guangzhou Xuanwu Wireless 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 Guangzhou Xuanwu Wireless Technology Co Ltd filed Critical Guangzhou Xuanwu Wireless Technology Co Ltd
Priority to CN202210674220.7A priority Critical patent/CN115079916B/zh
Publication of CN115079916A publication Critical patent/CN115079916A/zh
Application granted granted Critical
Publication of CN115079916B publication Critical patent/CN115079916B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486Drag-and-drop
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/34Graphical or visual programming

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • Human Computer Interaction (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本申请公开了一种可视化集成编排画布绘制方法、系统、终端设备及介质,该方法包括:配置需要绘制的节点、边线以及画布参数,生成配置信息;所述节点包括初始化节点、执行节点和终止节点;根据绘制任务,按照配置信息进行绘制,计算边线寻路路径,生成绘制样式;对所述绘制样式进行修正,生成绘制结果。本申请通过对API图形自动布局及对连线自动绘制,免除因手动摆放API图形及连线,造成位置不确定或图形、连线重叠的情况,避免用户重复操作,优化展示效果,降低开发人员编排API图形的开发难度;同时本申请可以提前发现逻辑错误,避免影响后续业务测试的正常运行。

Description

可视化集成编排画布绘制方法、系统、终端设备及介质
技术领域
本申请涉及全域集成可视化编排技术领域,尤其涉及一种可视化集成编排画布绘制方法、系统、终端设备及介质。
背景技术
在企业内部,通常会应用不同的系统进行日常管理。随着运用的系统越来越多,系统之间的数据流转难度将大大增加。为了避免数据孤岛、工作程序脱节等现象的出现,企业会应用全域集成系统,把其他业务系统进行串联,实现数据在各个系统中流转。为了直观、简便的实现对其他系统的串联,全域集成系统会提供各个常用系统的接口API,并把这些API以图形的形式,让用户通过可视化编辑界面,只需要进行简单的拖拉、选择操作和少量的文字操作,即可在画板上展现各个系统的数据流转,实现对各个系统的串联。即这些编辑界面多是通过自由拖动API图形,并在各个API图形之间用鼠标点选建立关系。然而,这类编排方式往往会存在以下缺点:
第一,用户从API面板中拖动出图形后,需要在画板中选择摆放位置,然后再拖出第二个图形进行排放,当画板上有两个以上的图形时,用户需要选择两个图形,进行拖动连线,如此重复操作,直到完成整个流程绘制完毕,耗费工作量较大、耗时较长。
第二,由于是任意两个图形之间连线,不同的图形又代表了不同的业务逻辑处理,故无法在编辑期间提前发现因连线引起的业务逻辑错误,这些错误将被带入运行期间,容易影响业务的正常运行。
第三,由于是任意两个图形之间连线,故在连线算法上需要边绘制边考虑如何避免连线之间的重叠以及连线与API图形重叠问题,这将大大增加开发人员的开发难度及后期维护的难度。
发明内容
本申请的目的在于提供一种可视化集成编排画布绘制方法、系统、终端设备及介质,以解决现有的编排方法中存在的工作量大、耗时长、开发难度大且无法提前排查错误逻辑进而影响业务正常运行的问题。
为实现上述目的,本申请提供一种可视化集成编排画布绘制方法,包括:
配置需要绘制的节点、边线以及画布参数,生成配置信息;所述节点包括初始化节点、执行节点和终止节点;
根据绘制任务,按照配置信息进行绘制,计算边线寻路路径,生成绘制样式;
对所述绘制样式进行修正,生成绘制结果。
进一步地,所述配置需要绘制的节点,包括:
进行节点样式配置,包括设置节点绘制元素样式、节点鼠标事件、描点坐标以及节点元素更新规则;
所述节点绘制元素包括背景元素、前景元素、头像元素、标题元素以及删除提示元素;所述背景元素包括鼠标进出动画及鼠标进出删除图标元素样式联动;
设置节点名称,在画布引擎中对节点名称和节点样式进行注册。
进一步地,配置需要绘制的所述边线,包括:
进行边线样式配置,包括设置边线绘制元素样式、边线鼠标事件及边线元素更新规则;所述边线绘制元素包括添加图示元素及鼠标经过边线元素样式联动;所述图示元素包括鼠标经过动画;
设置边线名称,在画布引擎中对边线名称和边线样式进行注册。
进一步地,配置所述画布参数,包括:
进行画布引擎配置,包括设置节点布局方式、边线布局方式和事件;
所述节点布局方式包括节点布局类型、节点水平间距以及节点垂直间距;
所述边线布局方式包括边线布局类型、弧度、弧度半径以及箭头方向;
所述事件包括滚动缩放事件和窗口事件;所述滚动缩放事件包括画布内容比例变化;所述窗口事件包括画布窗口大小变化;
将画布与父视图进行绑定。
进一步地,在所述生成配置信息之后,还包括:
确定绘制任务,包括确定节点数据和边线数据;所述节点数据包括节点名称和节点类型;所述边线数据包括边线类型和节点关系。
进一步地,所述按照配置信息进行绘制,包括:
读取节点数据和边线数据,分别构建节点模型和边线模型;
基于节点模型和边线模型,分别读取节点和边线的配置信息,绘制节点样式、边线样式;
基于边线样式,计算边线寻路路径,生成边线绘制样式;
根据绘制的节点样式和所述边线绘制样式生成节点边线模型;
循环执行读取节点数据和边线数据步骤。
进一步地,所述计算边线寻路路径,包括:
获取边线起点和边线终点;
获取边线起点到边线终点的连线坐标,根据连线坐标计算寻路路径面积;
从边线起点向下方边界寻找可用空间坐标,判断空间坐标是否处于寻路路径面积之内;
若否,则判断空间坐标是否处于下方边界以上;
若是,则完成路径空间坐标采集;
若否,则退出路径寻找。
进一步地,所述计算边线寻路路径,还包括:
若空间坐标处于寻路路径面积之内,则加入坐标缓存,并判断空间坐标是否处于向左或者向右寻找路径状态;
若是,则向左或者向右寻找可用空间,并在边线设置第一拐弯圆角;
若设置失败,则返回执行判断空间坐标是否处于寻路路径面积之内步骤。
进一步地,在所述在边线设置第一拐弯圆角之后,还包括:
若设置成功,则判断第一拐弯圆角半径是否超出路径面积范围;
若否,则判断第一拐弯圆角半径坐标与左边界或右边界的关系;
若是,则退出路径寻找。
进一步地,所述判断第一拐弯圆角半径坐标与左边界或右边界的关系,包括:
若第一拐弯圆角半径坐标不在左边界或右边界,则返回执行判断空间坐标是否处于寻路路径面积之内步骤;
若第一拐弯圆角半径坐标在左边界或右边界,则继续向下寻找可用空间,然后返回执行判断空间坐标是否处于寻路路径面积之内步骤。
进一步地,所述判断空间坐标是否处于向左或者向右寻找路径状态,还包括:
若否,则判断边线终点是否在边线起点的左边或者右边;
若否,则继续向下寻找可用空间,然后返回执行判断空间坐标是否处于寻路路径面积之内步骤;
若是,则为边线设置第二拐弯圆角。
进一步地,在所述为边线设置第二拐弯圆角之后,还包括:
若设置成功,则判断第二拐弯圆角半径坐标是否大于或等于边线起点与边线终点的垂直距离的二分之一;
若是,则使得空间坐标垂直向下且向左,或者垂直向下且向右偏移第二拐弯圆角半径的距离;
若否,则继续向下寻找可用空间,然后返回执行判断空间坐标是否处于寻路路径面积之内步骤。
进一步地,在所述为边线设置第二拐弯圆角之后,还包括:
若设置失败,则判断空间坐标是否大于或等于边线起点与边线终点的垂直距离的二分之一;
若是,则使得空间坐标垂直向下且向左,或者垂直向下且向右偏移第二拐弯圆角半径的距离;
若否,则继续向下寻找可用空间,然后返回执行判断空间坐标是否处于寻路路径面积之内步骤。
进一步地,在所述使得空间坐标垂直向下且向左,或者垂直向下且向右偏移第二拐弯圆角半径的距离之后,还包括:
继续向右或者向左寻找可用空间;
返回执行判断空间坐标是否处于寻路路径面积之内步骤。
进一步地,所述对所述绘制样式进行修正,生成绘制结果,包括:
根据边线关系对节点进行分层;
根据画布配置调整垂直节点之间的间距、每层节点之间的水平间距;
重新计算每层节点之间的连线坐标,根据画布大小和配置信息,对所有节点和边线整体修正。
进一步地,所述的可视化集成编排画布绘制方法,还包括根据绘制任务的数据变动,动态更新绘制结果,包括:
查找变动数据对应的节点和边线,确定采用添加策略、修改策略或者删除策略;
若采用修改策略,则对节点区域进行刷新;
若采用删除策略,则垂直删除节点,重新计算删除位置后所有节点及边线坐标,然后整体刷新;
若再用添加策略,则垂直添加节点,重新计算节点分层和新节点位置;
重新计算插入位置后所有节点及边线坐标,以及新节点与周围节点的边线坐标,然后整体刷新。
进一步地,在所述垂直添加节点之后,还包括:
水平添加节点,计算同层所有节点坐标以及同层节点与周围节点的边线坐标,然后整体刷新。
本申请还提供一种可视化集成编排画布绘制系统,包括:
配置单元,用于配置需要绘制的节点、边线以及画布参数,生成配置信息;所述节点包括初始化节点、执行节点和终止节点;
绘制单元,用于根据绘制任务,按照配置信息进行绘制,计算边线寻路路径,生成绘制样式;
修正单元,用于对所述绘制样式进行修正,生成绘制结果。
本申请还提供一种终端设备,包括:
一个或多个处理器;
存储器,与所述处理器耦接,用于存储一个或多个程序;
当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现如上任一项所述的可视化集成编排画布绘制方法。
本申请还提供一种计算机可读存储介质,其上存储有计算机程序,所述计算机程序被处理器执行时实现如上任一项所述的可视化集成编排画布绘制方法。
相对于现有技术,本申请的有益效果在于:
1)用户拖动API图形进入画板后,画板根据已有的API图形自动布局计算新拖入的图形位置进行修正,避免手动拖动API图形,造成API图形间重叠;
2)自动连线根据修正后的API图形位置进行计算绘制,用户可无需进行手动连线操作,避免因用户手动连线造成的线条重叠,令线条能清晰表达API图形的关系;
3)由于API图形的布局及连接方式能够提前被预测,因此开发人员无需编写复杂的路径寻找算法,进行路径绘制,减轻开发人员工作量及后期维护成本;
4)用户编排的流程最终按垂直流程图的形式进行展示,提升展示效果,清晰呈现流程执行的上下文关系,及数据流转过程。
附图说明
为了更清楚地说明本申请的技术方案,下面将对实施方式中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本申请的一些实施方式,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1是本申请某一实施例提供的可视化集成编排画布绘制方法的流程示意图;
图2是本申请某一实施例提供的配置需要绘制的节点的流程示意图;
图3是本申请某一实施例提供的配置需要绘制的边线的流程示意图;
图4是本申请某一实施例提供的配置画布参数的流程示意图;
图5是本申请某一实施例提供的确定绘制任务的流程示意图;
图6是本申请某一实施例提供的画布引擎绘制节点和边线的流程示意图;
图7是本申请某一实施例提供的边线寻路路径算法的流程示意图;
图8是本申请某一实施例提供的对绘制样式进行修正的流程示意图;
图9是本申请某一实施例提供的画布引擎根据任务数据变动动态更新绘制结果的的流程示意图;
图10是本申请某一实施例提供的可视化集成编排画布绘制系统的结构示意图;
图11是本申请某一实施例提供的终端设备的结构示意图。
具体实施方式
下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本申请一部分实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本申请保护的范围。
应当理解,文中所使用的步骤编号仅是为了方便描述,不对作为对步骤执行先后顺序的限定。
应当理解,在本申请说明书中所使用的术语仅仅是出于描述特定实施例的目的而并不意在限制本申请。如在本申请说明书和所附权利要求书中所使用的那样,除非上下文清楚地指明其它情况,否则单数形式的“一”、“一个”及“该”意在包括复数形式。
术语“包括”和“包含”指示所描述特征、整体、步骤、操作、元素和/或组件的存在,但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。
术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合,并且包括这些组合。
请参阅图1,本申请某一实施例提供一种可视化集成编排画布绘制方法。如图1所示,该可视化集成编排画布绘制方法包括步骤S10至步骤S30。各步骤具体如下:
S10、配置需要绘制的节点、边线以及画布参数,生成配置信息;所述节点包括初始化节点、执行节点和终止节点;
S20、根据绘制任务,按照配置信息进行绘制,计算边线寻路路径,生成绘制样式;
S30、对所述绘制样式进行修正,生成绘制结果。
本实施例中首先配置需要绘制的节点、边线以及画布参数,然后根据绘制任务结合配置信息在画布引擎上进行绘制。在绘制时用户拖动API图形进入画布引擎后,画布引擎会根据已有的API图形自动布局计算新拖入的图形位置进行修正,而对于API图形的连线问题,本实施例会提供一种边线寻路路径算法自动去计算边线的路径,无需用户手动连线导致线条重叠或者连线错误等问题。最后,对于绘制样式进行整体修正,以优化展示效果。
请参阅图2-4,图2提供了配置需要绘制的节点的流程示意图,图3提供了配置需要绘制的边线的流程示意图,图4提供了配置画布参数的流程示意图。其中,配置需要绘制的节点用于告知画布引擎绘制出什么样子的节点及节点的交互能力;配置需要绘制的边线用于告知画布引擎制出什么样子的边线及边线的交互能力;配置画布参数则用于描述画布引擎自身可进行的配置,以及引擎本身额展现能力和交互能力。具体地,上述配置包括以下内容:
如图2所示,配置需要绘制的节点,包括:
进行节点样式配置,包括设置节点绘制元素样式、节点鼠标事件、描点坐标以及节点元素更新规则;
所述节点绘制元素包括背景元素、前景元素、头像元素、标题元素以及删除提示元素;所述背景元素包括鼠标进出动画及鼠标进出删除图标元素样式联动;
设置节点名称,在画布引擎中对节点名称和节点样式进行注册。
如图3所示,配置需要绘制的边线,包括:
进行边线样式配置,包括设置边线绘制元素样式、边线鼠标事件及边线元素更新规则;所述边线绘制元素包括添加图示元素及鼠标经过边线元素样式联动;所述图示元素包括鼠标经过动画;
设置边线名称,在画布引擎中对边线名称和边线样式进行注册。
如图4所示,配置所述画布参数,包括:
进行画布引擎配置,包括设置节点布局方式、边线布局方式和事件;
所述节点布局方式包括节点布局类型、节点水平间距以及节点垂直间距;
所述边线布局方式包括边线布局类型、弧度、弧度半径以及箭头方向;
所述事件包括滚动缩放事件和窗口事件;所述滚动缩放事件包括画布内容比例变化;所述窗口事件包括画布窗口大小变化;
将画布与父视图进行绑定。
请参阅图5,图5提供了确定绘制任务的流程示意图。该绘制任务具体用于描述一种数据结构,该数据结构用于记录每个节点的层次关系,而这些关系通过边线进行指向。如图5所示,在生成配置信息之后,需要确定绘制任务,然后告知画布引擎应该绘制何种节点以及节点之间应该如何连线。具体地,该绘制任务包括确定数据格式,即节点数据和边线数据;其中,所述节点数据包括节点名称和节点类型;所述边线数据包括边线类型和节点关系。在确定了绘制任务后,将任务发送至画布引擎,进而执行步骤S20。
请参阅图6,图6提供了画布引擎开始根据绘制任务和配置信息进行流程绘制的过程。在某一具体实施方式中,按照配置信息进行绘制,包括以下内容:
读取节点数据和边线数据,分别构建节点模型和边线模型;
基于节点模型和边线模型,分别读取节点和边线的配置信息,绘制节点样式、边线样式;
基于边线样式,计算边线寻路路径,生成边线绘制样式;
根据绘制的节点样式和所述边线绘制样式生成节点边线模型;
循环执行读取节点数据和边线数据步骤。
请参阅图7,图7提供了图6中计算边线寻路路径的算法的全部流程。如图7所示,作为一个示例性的实施方式,本实施例主要包括以下步骤:
获取边线起点和边线终点;
获取边线起点到边线终点的连线坐标,根据连线坐标计算寻路路径面积;
从边线起点向下方边界寻找可用空间坐标,判断空间坐标是否处于寻路路径面积之内;
若否,则判断空间坐标是否处于下方边界以上;
若是,则完成路径空间坐标采集;
若否,则退出路径寻找。
进一步地,所述计算边线寻路路径,还包括:
若空间坐标处于寻路路径面积之内,则加入坐标缓存,并判断空间坐标是否处于向左或者向右寻找路径状态;
若是,则向左或者向右寻找可用空间,并在边线设置第一拐弯圆角;
若设置失败,则返回执行判断空间坐标是否处于寻路路径面积之内步骤。
进一步地,在所述在边线设置第一拐弯圆角之后,还包括:
若设置成功,则判断第一拐弯圆角半径是否超出路径面积范围;
若否,则判断第一拐弯圆角半径坐标与左边界或右边界的关系;
若是,则退出路径寻找。
进一步地,所述判断第一拐弯圆角半径坐标与左边界或右边界的关系,包括:
若第一拐弯圆角半径坐标不在左边界或右边界,则返回执行判断空间坐标是否处于寻路路径面积之内步骤;
若第一拐弯圆角半径坐标在左边界或右边界,则继续向下寻找可用空间,然后返回执行判断空间坐标是否处于寻路路径面积之内步骤。
进一步地,所述判断空间坐标是否处于向左或者向右寻找路径状态,还包括:
若否,则判断边线终点是否在边线起点的左边或者右边;
若否,则继续向下寻找可用空间,然后返回执行判断空间坐标是否处于寻路路径面积之内步骤;
若是,则为边线设置第二拐弯圆角。
进一步地,在所述为边线设置第二拐弯圆角之后,还包括:
若设置成功,则判断第二拐弯圆角半径坐标是否大于或等于边线起点与边线终点的垂直距离的二分之一;
若是,则使得空间坐标垂直向下且向左,或者垂直向下且向右偏移第二拐弯圆角半径的距离;
若否,则继续向下寻找可用空间,然后返回执行判断空间坐标是否处于寻路路径面积之内步骤。
进一步地,在所述为边线设置第二拐弯圆角之后,还包括:
若设置失败,则判断空间坐标是否大于或等于边线起点与边线终点的垂直距离的二分之一;
若是,则使得空间坐标垂直向下且向左,或者垂直向下且向右偏移第二拐弯圆角半径的距离;
若否,则继续向下寻找可用空间,然后返回执行判断空间坐标是否处于寻路路径面积之内步骤。
进一步地,在所述使得空间坐标垂直向下且向左,或者垂直向下且向右偏移第二拐弯圆角半径的距离之后,还包括:
继续向右或者向左寻找可用空间;
返回执行判断空间坐标是否处于寻路路径面积之内步骤。
可以理解的是,经过上述实施例的绘制,已经生成了基本的绘制样式。上述实施例中,用户拖动API图形进入画布引擎后,画布引擎根据已有的API图形自动布局计算新拖入的图形位置进行计算,避免手动拖动API图形,造成API图形间重叠;通过自动连线的方式,对API图形位置进行计算绘制,无需进行手动连线操作,避免因用户手动连线造成的线条重叠,令线条能清晰表达API图形的关系。同时,由于API图形的布局及连接方式能够提前被预测,因此开发人员无需编写复杂的路径寻找算法,进行路径绘制,减轻开发人员工作量及后期维护成本。
为了对绘制结果进行优化,在某一具体实施例中通过执行步骤S30对所述绘制样式进行修正,生成绘制结果。具体地,修正过程如图8所示,共包括以下内容:
根据边线关系对节点进行分层;
根据画布配置调整垂直节点之间的间距、每层节点之间的水平间距;
重新计算每层节点之间的连线坐标,根据画布大小和配置信息,对所有节点和边线整体修正。
本实施例中,用户编排的流程最终按垂直流程图的形式进行展示,提升展示效果,清晰呈现流程执行的上下文关系及数据流转过程。
在实际应用中,考虑到绘制任务的数据可能会临时变动,为了应对这种情况在某一个优选的实施方式中,所述可视化集成编排画布绘制方法,还包括根据绘制任务的数据变动,动态更新绘制结果,如图9所示。具体地,包括以下内容:
查找变动数据对应的节点和边线,确定采用添加策略、修改策略或者删除策略;
若采用修改策略,则对节点区域进行刷新;
若采用删除策略,则垂直删除节点,重新计算删除位置后所有节点及边线坐标,然后整体刷新;
若再用添加策略,则垂直添加节点,重新计算节点分层和新节点位置;
重新计算插入位置后所有节点及边线坐标,以及新节点与周围节点的边线坐标,然后整体刷新。
进一步地,在所述垂直添加节点之后,还包括:
水平添加节点,计算同层所有节点坐标以及同层节点与周围节点的边线坐标,然后整体刷新。
可以理解,通过本实施例,对于动态任务数据变更也能够及时响应,从而快速的对绘制结果进行调整,具有使用灵活、适用范围广的优点。
请参阅图10,本申请某一实施例还提供一种可视化集成编排画布绘制系统,包括:
配置单元01,用于配置需要绘制的节点、边线以及画布参数,生成配置信息;所述节点包括初始化节点、执行节点和终止节点;
绘制单元02,用于根据绘制任务,按照配置信息进行绘制,计算边线寻路路径,生成绘制样式;
修正单元03,用于对所述绘制样式进行修正,生成绘制结果。
可以理解的是,本实施例提供的可视化集成编排画布绘制系统用于执行如上述任一项所述的可视化集成编排画布绘制方法,并实现与其相同的效果,在此不再进一步赘述。
请参阅图11,本申请某一实施例还提供一种终端设备,包括:
一个或多个处理器;
存储器,与所述处理器耦接,用于存储一个或多个程序;
当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现如上所述的可视化集成编排画布绘制方法。
处理器用于控制该终端设备的整体操作,以完成上述的可视化集成编排画布绘制方法的全部或部分步骤。存储器用于存储各种类型的数据以支持在该终端设备的操作,这些数据例如可以包括用于在该终端设备上操作的任何应用程序或方法的指令,以及应用程序相关的数据。该存储器可以由任何类型的易失性或非易失性存储设备或者它们的组合实现,例如静态随机存取存储器(Static Random Access Memory,简称SRAM),电可擦除可编程只读存储器(Electrically Erasable Programmable Read-Only Memory,简称EEPROM),可擦除可编程只读存储器(Erasable Programmable Read-Only Memory,简称EPROM),可编程只读存储器(Programmable Read-Only Memory,简称PROM),只读存储器(Read-OnlyMemory,简称ROM),磁存储器,快闪存储器,磁盘或光盘。
在一示例性实施例中,终端设备可以被一个或多个应用专用集成电路(Application Specific 1ntegrated Circuit,简称AS1C)、数字信号处理器(DigitalSignal Processor,简称DSP)、数字信号处理设备(Digital Signal Processing Device,简称DSPD)、可编程逻辑器件(Programmable Logic Device,简称PLD)、现场可编程门阵列(Field Programmable Gate Array,简称FPGA)、控制器、微控制器、微处理器或其他电子元件实现,用于执行如上述任一项实施例所述的可视化集成编排画布绘制方法,并达到如上述方法一致的技术效果。
在另一示例性实施例中,还提供一种包括计算机程序的计算机可读存储介质,该计算机程序被处理器执行时实现如上述任一项实施例所述的可视化集成编排画布绘制方法的步骤。例如,该计算机可读存储介质可以为上述包括计算机程序的存储器,上述计算机程序可由终端设备的处理器执行以完成如上述任一项实施例所述的可视化集成编排画布绘制方法,并达到如上述方法一致的技术效果。
以上所述是本申请的优选实施方式,应当指出,对于本技术领域的普通技术人员来说,在不脱离本申请原理的前提下,还可以做出若干改进和润饰,这些改进和润饰也视为本申请的保护范围。

Claims (20)

1.一种可视化集成编排画布绘制方法,其特征在于,包括:
配置需要绘制的节点、边线以及画布参数,生成配置信息;所述节点包括初始化节点、执行节点和终止节点;
根据绘制任务,按照配置信息进行绘制,计算边线寻路路径,生成绘制样式;
对所述绘制样式进行修正,生成绘制结果。
2.根据权利要求1所述的可视化集成编排画布绘制方法,其特征在于,所述配置需要绘制的节点,包括:
进行节点样式配置,包括设置节点绘制元素样式、节点鼠标事件、描点坐标以及节点元素更新规则;
所述节点绘制元素包括背景元素、前景元素、头像元素、标题元素以及删除提示元素;所述背景元素包括鼠标进出动画及鼠标进出删除图标元素样式联动;
设置节点名称,在画布引擎中对节点名称和节点样式进行注册。
3.根据权利要求2所述的可视化集成编排画布绘制方法,其特征在于,配置需要绘制的所述边线,包括:
进行边线样式配置,包括设置边线绘制元素样式、边线鼠标事件及边线元素更新规则;所述边线绘制元素包括添加图示元素及鼠标经过边线元素样式联动;所述图示元素包括鼠标经过动画;
设置边线名称,在画布引擎中对边线名称和边线样式进行注册。
4.根据权利要求3所述的可视化集成编排画布绘制方法,其特征在于,配置所述画布参数,包括:
进行画布引擎配置,包括设置节点布局方式、边线布局方式和事件;
所述节点布局方式包括节点布局类型、节点水平间距以及节点垂直间距;
所述边线布局方式包括边线布局类型、弧度、弧度半径以及箭头方向;
所述事件包括滚动缩放事件和窗口事件;所述滚动缩放事件包括画布内容比例变化;所述窗口事件包括画布窗口大小变化;
将画布与父视图进行绑定。
5.根据权利要求1所述的可视化集成编排画布绘制方法,其特征在于,在所述生成配置信息之后,还包括:
确定绘制任务,包括确定节点数据和边线数据;所述节点数据包括节点名称和节点类型;所述边线数据包括边线类型和节点关系。
6.根据权利要求5所述的可视化集成编排画布绘制方法,其特征在于,所述按照配置信息进行绘制,包括:
读取节点数据和边线数据,分别构建节点模型和边线模型;
基于节点模型和边线模型,分别读取节点和边线的配置信息,绘制节点样式、边线样式;
基于边线样式,计算边线寻路路径,生成边线绘制样式;
根据绘制的节点样式和所述边线绘制样式生成节点边线模型;
循环执行读取节点数据和边线数据步骤。
7.根据权利要求6所述的可视化集成编排画布绘制方法,其特征在于,所述计算边线寻路路径,包括:
获取边线起点和边线终点;
获取边线起点到边线终点的连线坐标,根据连线坐标计算寻路路径面积;
从边线起点向下方边界寻找可用空间坐标,判断空间坐标是否处于寻路路径面积之内;
若否,则判断空间坐标是否处于下方边界以上;
若是,则完成路径空间坐标采集;
若否,则退出路径寻找。
8.根据权利要求7所述的可视化集成编排画布绘制方法,其特征在于,所述计算边线寻路路径,还包括:
若空间坐标处于寻路路径面积之内,则加入坐标缓存,并判断空间坐标是否处于向左或者向右寻找路径状态;
若是,则向左或者向右寻找可用空间,并在边线设置第一拐弯圆角;
若设置失败,则返回执行判断空间坐标是否处于寻路路径面积之内步骤。
9.根据权利要求8所述的可视化集成编排画布绘制方法,其特征在于,在所述在边线设置第一拐弯圆角之后,还包括:
若设置成功,则判断第一拐弯圆角半径是否超出路径面积范围;
若否,则判断第一拐弯圆角半径坐标与左边界或右边界的关系;
若是,则退出路径寻找。
10.根据权利要求9所述的可视化集成编排画布绘制方法,其特征在于,所述判断第一拐弯圆角半径坐标与左边界或右边界的关系,包括:
若第一拐弯圆角半径坐标不在左边界或右边界,则返回执行判断空间坐标是否处于寻路路径面积之内步骤;
若第一拐弯圆角半径坐标在左边界或右边界,则继续向下寻找可用空间,然后返回执行判断空间坐标是否处于寻路路径面积之内步骤。
11.根据权利要求8所述的可视化集成编排画布绘制方法,其特征在于,所述判断空间坐标是否处于向左或者向右寻找路径状态,还包括:
若否,则判断边线终点是否在边线起点的左边或者右边;
若否,则继续向下寻找可用空间,然后返回执行判断空间坐标是否处于寻路路径面积之内步骤;
若是,则为边线设置第二拐弯圆角。
12.根据权利要求11所述的可视化集成编排画布绘制方法,其特征在于,在所述为边线设置第二拐弯圆角之后,还包括:
若设置成功,则判断第二拐弯圆角半径坐标是否大于或等于边线起点与边线终点的垂直距离的二分之一;
若是,则使得空间坐标垂直向下且向左,或者垂直向下且向右偏移第二拐弯圆角半径的距离;
若否,则继续向下寻找可用空间,然后返回执行判断空间坐标是否处于寻路路径面积之内步骤。
13.根据权利要求12所述的可视化集成编排画布绘制方法,其特征在于,在所述为边线设置第二拐弯圆角之后,还包括:
若设置失败,则判断空间坐标是否大于或等于边线起点与边线终点的垂直距离的二分之一;
若是,则使得空间坐标垂直向下且向左,或者垂直向下且向右偏移第二拐弯圆角半径的距离;
若否,则继续向下寻找可用空间,然后返回执行判断空间坐标是否处于寻路路径面积之内步骤。
14.根据权利要求12或13任一项所述的可视化集成编排画布绘制方法,其特征在于,在所述使得空间坐标垂直向下且向左,或者垂直向下且向右偏移第二拐弯圆角半径的距离之后,还包括:
继续向右或者向左寻找可用空间;
返回执行判断空间坐标是否处于寻路路径面积之内步骤。
15.根据权利要求14所述的可视化集成编排画布绘制方法,其特征在于,所述对所述绘制样式进行修正,生成绘制结果,包括:
根据边线关系对节点进行分层;
根据画布配置调整垂直节点之间的间距、每层节点之间的水平间距;
重新计算每层节点之间的连线坐标,根据画布大小和配置信息,对所有节点和边线整体修正。
16.根据权利要求15所述的可视化集成编排画布绘制方法,其特征在于,还包括根据绘制任务的数据变动,动态更新绘制结果,包括:
查找变动数据对应的节点和边线,确定采用添加策略、修改策略或者删除策略;
若采用修改策略,则对节点区域进行刷新;
若采用删除策略,则垂直删除节点,重新计算删除位置后所有节点及边线坐标,然后整体刷新;
若再用添加策略,则垂直添加节点,重新计算节点分层和新节点位置;
重新计算插入位置后所有节点及边线坐标,以及新节点与周围节点的边线坐标,然后整体刷新。
17.根据权利要求16所述的可视化集成编排画布绘制方法,其特征在于,在所述垂直添加节点之后,还包括:
水平添加节点,计算同层所有节点坐标以及同层节点与周围节点的边线坐标,然后整体刷新。
18.一种可视化集成编排画布绘制系统,其特征在于,包括:
配置单元,用于配置需要绘制的节点、边线以及画布参数,生成配置信息;所述节点包括初始化节点、执行节点和终止节点;
绘制单元,用于根据绘制任务,按照配置信息进行绘制,计算边线寻路路径,生成绘制样式;
修正单元,用于对所述绘制样式进行修正,生成绘制结果。
19.一种终端设备,其特征在于,包括:
一个或多个处理器;
存储器,与所述处理器耦接,用于存储一个或多个程序;
当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现如权利要求1-17任一项所述的可视化集成编排画布绘制方法。
20.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,所述计算机程序被处理器执行时实现如权利要求1-17任一项所述的可视化集成编排画布绘制方法。
CN202210674220.7A 2022-06-15 2022-06-15 可视化集成编排画布绘制方法、系统、终端设备及介质 Active CN115079916B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210674220.7A CN115079916B (zh) 2022-06-15 2022-06-15 可视化集成编排画布绘制方法、系统、终端设备及介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210674220.7A CN115079916B (zh) 2022-06-15 2022-06-15 可视化集成编排画布绘制方法、系统、终端设备及介质

Publications (2)

Publication Number Publication Date
CN115079916A true CN115079916A (zh) 2022-09-20
CN115079916B CN115079916B (zh) 2023-03-24

Family

ID=83251919

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210674220.7A Active CN115079916B (zh) 2022-06-15 2022-06-15 可视化集成编排画布绘制方法、系统、终端设备及介质

Country Status (1)

Country Link
CN (1) CN115079916B (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116055572A (zh) * 2023-01-03 2023-05-02 广州市玄武无线科技股份有限公司 一种全域集成编排流协议生成方法及执行方法

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103500250A (zh) * 2013-09-26 2014-01-08 浙江大学 一种gmf图形编辑器创建有向图的自动布局方法
US20200286268A1 (en) * 2017-04-22 2020-09-10 South China University Of Technology Automatic obstacle avoidance optimization method for connecting line of graphical programming software
US20200356350A1 (en) * 2019-05-10 2020-11-12 Fasility Llc Methods and Systems for Visual Programming using Polymorphic, Dynamic Multi-Dimensional Structures
CN112734876A (zh) * 2021-01-08 2021-04-30 卓望数码技术(深圳)有限公司 图形绘制方法、装置、电子设备及存储介质
CN113609282A (zh) * 2021-08-09 2021-11-05 神州数码融信软件有限公司 一种自动绘图引擎的绘图方法

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103500250A (zh) * 2013-09-26 2014-01-08 浙江大学 一种gmf图形编辑器创建有向图的自动布局方法
US20200286268A1 (en) * 2017-04-22 2020-09-10 South China University Of Technology Automatic obstacle avoidance optimization method for connecting line of graphical programming software
US20200356350A1 (en) * 2019-05-10 2020-11-12 Fasility Llc Methods and Systems for Visual Programming using Polymorphic, Dynamic Multi-Dimensional Structures
CN112734876A (zh) * 2021-01-08 2021-04-30 卓望数码技术(深圳)有限公司 图形绘制方法、装置、电子设备及存储介质
CN113609282A (zh) * 2021-08-09 2021-11-05 神州数码融信软件有限公司 一种自动绘图引擎的绘图方法

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116055572A (zh) * 2023-01-03 2023-05-02 广州市玄武无线科技股份有限公司 一种全域集成编排流协议生成方法及执行方法
CN116055572B (zh) * 2023-01-03 2024-01-16 广州市玄武无线科技股份有限公司 一种全域集成编排流协议生成方法及执行方法

Also Published As

Publication number Publication date
CN115079916B (zh) 2023-03-24

Similar Documents

Publication Publication Date Title
US10331315B2 (en) 3D user interface for application entities
US11385786B2 (en) Spin control user interface for selecting options
USRE47152E1 (en) Altering the appearance of a digital image using a shape
US8762871B2 (en) Dynamic preview of diagram elements to be inserted into a diagram
US8839142B2 (en) Desktop system object removal
EP2990924B1 (en) Gesture-based on-chart data filtering
US7404147B2 (en) System and method for dynamic space management of a display space
US11270066B2 (en) Temporary formatting and charting of selected data
CN109117051B (zh) 思维导图的展示方法、装置、设备及存储介质
US8717383B2 (en) Automatic management of diagram elements
CN115079916B (zh) 可视化集成编排画布绘制方法、系统、终端设备及介质
CN111104111B (zh) 一种树状Canvas画布的布局处理方法及装置
US20170357404A1 (en) Menu display method, apparatus and system
CN111400177B (zh) 调试方法、装置、电子设备及存储介质
AU683543B2 (en) Method and apparatus for inputting embroidery lines
US7733338B2 (en) Reduction of a mesh with preservation of flow lines
CN111460764B (zh) 电子书籍标注方法、电子设备及存储介质
CN111429587A (zh) 一种三维设计模型的显示方法、终端及存储介质
WO2023273700A1 (zh) 一种交互窗口显示方法、装置、设备及存储介质
CN114627226A (zh) 在线建模方法及装置
CN114153367B (zh) 快速替代连接关系的交互方法、设备及可读存储介质
CN113010618B (zh) 时效兴趣点展示方法、装置、电子设备及存储介质
CN116051671A (zh) 一种自由变换折线的svg绘制方法和控制系统
JP3047993B2 (ja) 図面管理装置
CN117992038A (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
GR01 Patent grant
GR01 Patent grant