CN113448579B - 一种在可视化界面中实现边动效的方法及装置 - Google Patents
一种在可视化界面中实现边动效的方法及装置 Download PDFInfo
- Publication number
- CN113448579B CN113448579B CN202110774224.8A CN202110774224A CN113448579B CN 113448579 B CN113448579 B CN 113448579B CN 202110774224 A CN202110774224 A CN 202110774224A CN 113448579 B CN113448579 B CN 113448579B
- Authority
- CN
- China
- Prior art keywords
- node
- coordinates
- visual interface
- edge
- indication point
- 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.)
- Active
Links
- 230000000007 visual effect Effects 0.000 title claims abstract description 83
- 230000000694 effects Effects 0.000 title claims abstract description 66
- 238000000034 method Methods 0.000 title claims abstract description 60
- 238000012545 processing Methods 0.000 claims description 27
- 238000004590 computer program Methods 0.000 claims description 5
- 238000010586 diagram Methods 0.000 description 12
- 125000004122 cyclic group Chemical group 0.000 description 3
- 238000012360 testing method Methods 0.000 description 3
- 238000011161 development Methods 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 238000013459 approach Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 238000012827 research and development Methods 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
- 238000012800 visualization Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input 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/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction 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
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Processing Or Creating Images (AREA)
Abstract
本发明提供了一种在可视化界面中实现边动效的方法及装置，该方法为：确定可视化界面中点击事件对应的操作对象；若操作对象为可视化界面中的任意节点，将操作对象作为起始节点，并确定与起始节点具有关联边的至少一个节点为终止节点；将起始节点与终止节点之间的关联边的默认配置更新为包含指示点的配置；利用起始节点、终止节点、预设的执行周期、预设的可变参数的变化范围和可变参数的变化步长，循环将指示点沿着关联边从起始节点移动至终止节点。不需要升级图编辑器的版本和开发用于实现边动效的API，通过循环将指示点沿着关联边从起始节点移动至终止节点，即可实现起始节点与终止节点之间的关联边的边动效，降低实现边动效的成本。
Description
技术领域
本发明涉及数据处理技术领域，具体涉及一种在可视化界面中实现边动效的方法及装置。
背景技术
在产品研发中，通常利用图编辑器实现前端图可视化编辑的功能，而随着业务需求的迭代，需要在产品的可视化界面中实现边动效，也就是可视化界面中从起始节点出发的所有节点所经过的边需实现高亮和动效显示。
目前在可视化界面中实现边动效的方式为：升级图编辑器的版本，并重新开发用于实现边动效的应用程序接口(Application Programming Interface，API)。但是此种方式需要耗费较高的时间成本和研发成本，实现边动效的成本较高。
发明内容
有鉴于此，本发明实施例提供一种在可视化界面中实现边动效的方法及装置，以解决现有实现边动效的方式存在的成本较高等问题。
为实现上述目的，本发明实施例提供如下技术方案：
本发明实施例第一方面公开一种在可视化界面中实现边动效的方法，所述方法包括：
确定可视化界面中点击事件对应的操作对象；
若所述操作对象为所述可视化界面中的任意节点，将所述操作对象作为起始节点，并确定与所述起始节点具有关联边的至少一个节点为终止节点；
将所述起始节点与所述终止节点之间的所述关联边的默认配置更新为包含指示点的配置；
利用所述起始节点、所述终止节点、预设的执行周期、预设的可变参数的变化范围和所述可变参数的变化步长，循环将所述指示点沿着所述关联边从所述起始节点移动至所述终止节点。
优选的，所述利用所述起始节点、所述终止节点、预设的执行周期、预设的可变参数的变化范围和所述可变参数的变化步长，循环将所述指示点沿着所述关联边从所述起始节点移动至所述终止节点，包括：
分别对所述起始节点和终止节点的坐标进行偏移处理，得到第一控制点和第二控制点的坐标；
按照预设的执行周期重复执行以下步骤，所述以下步骤包括：
基于预设的可变参数的变化范围和变化步长，将所述可变参数的具体数值按照所述变化步长从所述变化范围的左边界值变化至右边界值，并在所述具体数值的每次变化时，利用所述起始节点的坐标、所述终止节点的坐标、所述第一控制点的坐标、所述第二控制点的坐标和所述具体数值，更新所述指示点在所述关联边上的坐标，将所述指示点沿着所述关联边从所述起始节点移动至所述终止节点；
将所述可变参数的具体数值重置为所述左边界值。
优选的，所述利用所述起始节点的坐标、所述终止节点的坐标、所述第一控制点的坐标、所述第二控制点的坐标和所述具体数值，更新所述指示点在所述关联边上的坐标，将所述指示点沿着所述关联边从所述起始节点移动至所述终止节点，包括：
利用所述起始节点的坐标、所述终止节点的坐标、所述第一控制点的坐标、所述第二控制点的坐标和所述具体数值，结合三次贝塞尔曲线方程，确定所述指示点在所述关联边上的新坐标，并利用所述新坐标更新所述指示点在所述关联边上的坐标，将所述指示点沿着所述关联边从所述起始节点移动至所述终止节点。
优选的，所述执行周期通过动画定时器配置，所述方法还包括：
若所述操作对象不是所述可视化界面中的任意节点，重置所述可视化界面和所述动画定时器。
本发明实施例第二方面公开一种在可视化界面中实现边动效的装置，所述装置包括：
第一确定单元，用于确定可视化界面中点击事件对应的操作对象；
第二确定单元，用于若所述操作对象为所述可视化界面中的任意节点，将所述操作对象作为起始节点，并确定与所述起始节点具有关联边的至少一个节点为终止节点；
更新单元，用于将所述起始节点与所述终止节点之间的所述关联边的默认配置更新为包含指示点的配置；
处理单元，用于利用所述起始节点、所述终止节点、预设的执行周期、预设的可变参数的变化范围和所述可变参数的变化步长，循环将所述指示点沿着所述关联边从所述起始节点移动至所述终止节点。
优选的，所述处理单元包括：
第一处理模块，用于分别对所述起始节点和终止节点的坐标进行偏移处理，得到第一控制点和第二控制点的坐标；
第二处理模块，用于按照预设的执行周期重复执行以下步骤，所述以下步骤包括：
基于预设的可变参数的变化范围和变化步长，将所述可变参数的具体数值按照所述变化步长从所述变化范围的左边界值变化至右边界值，并在所述具体数值的每次变化时，利用所述起始节点的坐标、所述终止节点的坐标、所述第一控制点的坐标、所述第二控制点的坐标和所述具体数值，更新所述指示点在所述关联边上的坐标，将所述指示点沿着所述关联边从所述起始节点移动至所述终止节点；
将所述可变参数的具体数值重置为所述左边界值。
优选的，用于更新所述指示点在所述关联边上的坐标的所述第二处理模块，具体用于：利用所述起始节点的坐标、所述终止节点的坐标、所述第一控制点的坐标、所述第二控制点的坐标和所述具体数值，结合三次贝塞尔曲线方程，确定所述指示点在所述关联边上的新坐标，并利用所述新坐标更新所述指示点在所述关联边上的坐标，将所述指示点沿着所述关联边从所述起始节点移动至所述终止节点。
优选的，所述装置还包括：
重置单元，用于若所述操作对象不是所述可视化界面中的任意节点，重置所述可视化界面和所述动画定时器。
本发明实施例第三方面公开一种电子设备，包括：存储器和处理器；其中，所述存储器用于存储程序；所述处理器用于执行所述程序，所述程序被执行时，具体用于实现如本发明实施例第一方面公开的在可视化界面中实现边动效的方法。
本发明实施例第四方面公开一种计算机存储介质，用于存储计算机程序，所述计算机程序被执行时，用于实现如本发明实施例第一方面公开的在可视化界面中实现边动效的方法。
基于上述本发明实施例提供的一种在可视化界面中实现边动效的方法及装置，该方法为：确定可视化界面中点击事件对应的操作对象；若操作对象为可视化界面中的任意节点，将操作对象作为起始节点，并确定与起始节点具有关联边的至少一个节点为终止节点；将起始节点与终止节点之间的关联边的默认配置更新为包含指示点的配置；利用起始节点、终止节点、预设的执行周期、预设的可变参数的变化范围和可变参数的变化步长，循环将指示点沿着关联边从起始节点移动至终止节点。不需要升级图编辑器的版本和开发用于实现边动效的API，通过循环将指示点沿着关联边从起始节点移动至终止节点，即可实现起始节点与终止节点之间的关联边的边动效，降低实现边动效的成本。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
图1为本发明实施例提供的一种在可视化界面中实现边动效的方法的流程图；
图2(a)为起始节点与终止节点之间的关联示意图；图2(b)为起始节点与终止节点之间的另一关联示意图；图2(c)为起始节点与终止节点之间的又一关联示意图；图2(d)为起始节点与终止节点之间的又一关联示意图；
图3为本发明实施例提供的循环移动指示点的流程图；
图4为本发明实施例提供的三次贝塞尔曲线方程的原理示意图；
图5为本发明实施例提供的一种在可视化界面中实现边动效的方法的另一流程图；
图6为本发明实施例提供的一种在可视化界面中实现边动效的装置的结构框图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
在本申请中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
由背景技术可知，随着业务需求的迭代，在利用图编辑器实现前端图可视化编辑的功能时需要在产品的可视化界面中实现边动效，而目前实现边动效的方式需要升级图编辑器的版本和重新开发对应的应用程序接口(ApplicationProgramming Interface，API)，此种方式所耗费的时间成本和研发成本较高，导致实现边动效的成本较高。
因此，本发明实施例提供一种在可视化界面中实现边动效的方法及装置，当可视化界面中点击事件对应的操作对象为任意节点时，将操作对象作为起始节点并确定与起始节点具有关联边的至少一个节点为终止节点。将起始节点与终止节点之间的关联边的默认配置更新为包含指示点的配置，通过循环将指示点沿着关联边从起始节点移动至终止节点，不需要升级图编辑器的版本和开发用于实现边动效的API，即可实现起始节点与终止节点之间的关联边的边动效，以降低实现边动效的成本。
需要说明的是，本发明实施例中所涉及的一种在可视化界面中实现边动效的方法及装置，可应用于诸如gg-editor的图编辑器中，基于图编辑器在可视化界面(也被称为画布)中实现边动效。
进一步需要说明的是，gg-editor是一种基于g6(一种图形化引擎)和react(一种用于构建前端界面的javascript库)封装的可视化图编辑器。
参见图1，示出了本发明实施例提供的一种在可视化界面中实现边动效的方法的流程图，该方法包括：
步骤S101：确定可视化界面中点击事件对应的操作对象。
需要说明的是，在可视化界面中，任何区域都可进行诸如点击之类的操作事件(当在可视化界面中点击时，所对应的操作事件即为点击事件)，该可视化界面中至少包含节点(也包含除节点以外的对象)，在可视化界面所包含的节点上绑定单击鼠标(onclick)方法，同理，也可在节点上绑定其它点击方法，在此不做具体限定。
在具体实现步骤S101的过程中，当用户在可视化界面中触发点击事件时，确定可视化界面中点击事件对应的操作对象，该点击事件所对应的操作对象可以是可视化界面中的节点、除节点以外的对象或者空白区域。
也就是说，用户可点击可视化界面中的节点、空白区域或者除节点以外的对象。
步骤S102：若操作对象为可视化界面中的任意节点，将操作对象作为起始节点，并确定与起始节点具有关联边的至少一个节点为终止节点。
在具体实现步骤S102的过程中，若用户在可视化界面中所触发的点击事件所对应的操作对象为该可视化界面中的任意节点(也就是若用户点击任意节点)，将该操作对象(也就是被点击的节点)作为起始节点，并对该起始节点进行遍历，确定与该起始节点具有关联边的至少一个节点为终止节点。
可以理解的是，可视化界面中的不同节点之间可能具有关联关系，在可视化界面以一条边连接两个具有关联关系的节点，两个具有关联关系的节点之间的边被称为关联边。在可视化界面中，以可视化的方式展示各个节点及各个具有关联关系的节点之间的关联边。
对起始节点进行遍历得到终止节点及关联边的过程为：通过图编辑器的API(例如利用gg-editorAPI)遍历得到起点为起始节点的关联边，通过起点为起始节点的关联边与起始节点连接的节点即为终止节点。
为更好解释说明起始节点、终止节点及关联边的具体内容，通过图2(a)示出的起始节点与终止节点之间的关联示意图进行举例说明。
如图2(a)所示，假设用户在可视化界面中点击节点A(节点A对应的内容为“您好，这里是京东智能助手。”)，则该节点A即为起始节点。对节点A进行遍历，得到与该节点A具有关联边的节点分别为节点B(节点B对应的内容为“测试”)、节点C(节点C对应的内容为“测试”)和节点D(节点D对应的内容为“测试”)，则节点B、节点C和节点D即为终止节点。边A-B为节点A与节点B之间的关联边，边A-C为节点A与节点C之间的关联边，边A-D为节点A与节点D之间的关联边。
步骤S103：将起始节点与终止节点之间的关联边的默认配置更新为包含指示点的配置。
需要说明的是，指示点具有***示样式(用于表示该指示点的形状、颜色和是否高亮显示等显示样式)，例如：该指示点可以是圆点、方形点或者三角形点等，该指示点为红色且高亮显示，在本发明实施例中，对于指示点的显示样式不做具体限定。
进一步需要说明的是，在可视化界面中所显示的每条边(包含起始节点与终止节点之间的关联边)都有与之对应的默认配置(也就是每条边的显示样式，默认配置不包含指示点)。
在具体实现步骤S103的过程中，将起始节点与终止节点之间的关联边的默认配置更新为包含指示点的配置，也就是说，将起始节点与终止节点之间的关联边的默认显示样式更新为带有指示点的显示样式，即将每条关联边的默认显示样式更新为带有指示点的显示样式。
步骤S104：利用起始节点、终止节点、预设的执行周期、预设的可变参数的变化范围和可变参数的变化步长，循环将指示点沿着关联边从起始节点移动至终止节点。
需要说明的是，预先通过动画定时器配置N(大于等于1)个执行周期；在可视化界面中，起始节点和终止节点均存在与之对应的坐标；预先设置可变参数的变化范围，例如设置可变参数t的变化范围为[0-1]，即可变参数t从0变化至1；预先设置可变参数的变化步长，使可变参数的具体数值根据变化步长从变化范围的左边界值变化为右边界值，例如：假设可变参数t的变化范围为[0-1]，该变化范围可被划为100份(即变化步长为1/100)，使t按照1/100这一变化步长从0变化至1。
需要说明的是，在执行步骤S104之前，需重置动画定时器。
在具体实现步骤S104的过程中，在每个执行周期内，利用起始节点的坐标、终止节点的坐标、可变参数的变化范围和变化步长，实时更新指示点在起始节点与终止节点之间的关联边上的坐标，使该指示点沿着关联边从起始节点处移动至终止节点处，可以理解的是，可变参数的具体数值为变化范围的左边界值时(假设t的变化范围为[0-1]，则当t为0时)，指示点所处的位置在该起始节点处，可变参数的具体数值为变化范围的右边界值时(假设t的变化范围为[0-1]，则当t为1时)，指示点所处的位置在终止节点处。
也就是说，在每个执行周期内都将指示点沿着关联边从起始节点移动至终止节点，当存在多个执行周期时，循环将指示点沿着关联边从起始节点移动至所述终止节点。由于指示点具有***示样式，因此当指示点在起始节点与终止节点的关联边上移动时，可实现起始节点与终止节点的关联边的动画效果，即可实现起始节点与终止节点之间的边动效。
需要说明的是，由于起始节点可对应多个终止节点，即该起始节点对应多条关联边，每条关联边的默认配置都更新为包含指示点的配置，对于每条关联边，都将该关联边所对应的指示点在该关联边上循环移动，使起始节点所对应的每条关联边都实现动画效果(即边动效)，每条关联边上的指示点的移动方式可参见上述内容，在此不再赘述。
可以理解的是，上述所提及的指示点在关联边上的移动方式为：在每个执行周期内，将指示点沿着关联边从起始节点移动至终止节点。同理，在每个执行周期内，也可以将指示点沿着关联边从终止节点移动至起始节点(此时可变参数的具体数值从变化范围的右边界值逐渐变化为左边界值)，即指示点的移动方式可以存在多种，在本发明实施例中不做具体限定。
为更好解释说明如何循环将指示点沿着关联边从起始节点移动至终止节点，分别通过图2(b)、图2(c)和图2(d)示出的起始节点与终止节点之间的关联示意图进行举例说明。
在图2(b)、图2(c)和图2(d)中，假设起始节点为节点A，与节点A具有关联边的终止节点分别为节点B、节点C和节点D，边A-B为节点A与节点B之间的关联边，边A-C为节点A与节点C之间的关联边，边A-D为节点A与节点D之间的关联边，每条关联边的配置中所包含的指示点为红色实心圆点。
需要说明的是，图2(b)、图2(c)和图2(d)依次表示关联边上的指示点所处的不同位置。
如图2(b)、图2(c)和图2(d)所示，在每个执行周期内，将边A-B上的指示点沿着节点A移动至节点B，将边A-C上的指示点沿着节点A移动至节点C，将边A-D上的指示点沿着节点A移动至节点D。若存在多个执行周期，则实现循环将边A-B上的指示点沿着节点A移动至节点B，循环将边A-C上的指示点沿着节点A移动至节点C，循环将边A-D上的指示点沿着节点A移动至节点D。
需要说明的是，由上述内容可知，执行周期通过动画定时器进行配置的，优选的，在执行步骤S101之后，若点击事件所对应的操作对象不是可视化界面中的任意节点(即用户可能点击可视化界面中的空白区域或除节点以外的对象)，为防止内存溢出，重置可视化界面和动画定时器。
在本发明实施例中，当可视化界面中点击事件对应的操作对象为任意节点时，将操作对象作为起始节点并确定与起始节点具有关联边的至少一个节点为终止节点。将起始节点与终止节点之间的关联边的默认配置更新为包含指示点的配置，通过循环将指示点沿着关联边从起始节点移动至终止节点，不需要升级图编辑器的版本和开发用于实现边动效的API，即可实现起始节点与终止节点之间的关联边的边动效，降低实现边动效的成本。
上述本发明实施例图1步骤S104中涉及的循环将指示点沿着关联边从起始节点移动至终止节点的过程，参见图3，示出了本发明实施例提供的循环移动指示点的流程图，包括：
需要说明的是，图3所示出的内容以起始节点的一条关联边上的指示点的循环移动进行解释说明，起始节点的其它关联边上的指示点的循环移动方式可参见图3中各个步骤的内容。
步骤S301：分别对起始节点和终止节点的坐标进行偏移处理，得到第一控制点和第二控制点的坐标。
需要说明的是，将指示点沿着关联边从起始节点移动至终止节点的过程中，主要以更新指示点在关联边上的坐标来实现指示点的移动，即可变参数每次变化时，都会计算得到指示点的新坐标。在计算指示点的坐标时，是通过三次贝塞尔曲线方程计算得到的，而三次贝塞尔曲线方程计算某个点的坐标时至少需要4个点的坐标。
在具体实现步骤S301的过程中，对起始节点的坐标进行偏移处理(例如左偏移)，得到第一控制点的坐标，对终止节点的坐标进行偏移处理，得到第二控制点的坐标。在后续更新指示点在关联边上的坐标的过程中，可利用起始节点的坐标、终止节点的坐标、第一控制点的坐标和第二控制点的坐标来计算指示点的新坐标。
可以理解的是，可利用图编辑器的API获取得到起始节点和终止节点的坐标。
为更好解释说明起始节点、终止节点、第一控制点和第二控制点之间的关系，通过图4示出的三次贝塞尔曲线方程的原理示意图进行举例说明。
如图4所示，P0为起始节点，P3为终止节点，分别对P0和P3进行左偏移，可得到第一控制点P1和第二控制点P2。
在执行步骤S301之后，按照预设的执行周期重复执行以下步骤S302和步骤S303，也就是说，每个执行周期都执行一次步骤S302和步骤S303，当存在多个执行周期时，可重复执行步骤S302和步骤S303。
步骤S302：基于预设的可变参数的变化范围和变化步长，将可变参数的具体数值按照变化步长从变化范围的左边界值变化至右边界值，并在具体数值的每次变化时，利用起始节点的坐标、终止节点的坐标、第一控制点的坐标、第二控制点的坐标和具体数值，更新指示点在关联边上的坐标，将指示点沿着关联边从起始节点移动至终止节点。
在具体实现步骤S302的过程中，利用指定方法(例如gg-editor所对应的getGraphicGroup方法)获取得到关联边上的指示点。利用起始节点的坐标、终止节点的坐标、第一控制点的坐标、第二控制点的坐标和可变参数的具体数值，结合三次贝塞尔曲线方程，确定指示点在关联边上的新坐标，并利用新坐标更新指示点在关联边上的坐标，将指示点沿着关联边从起始节点移动至终止节点。
三次贝塞尔曲线方程的具体内容如公式(1)。
B(t)＝P0(1-t)3+3P1t(1-t)2+3P2t2(1-t)+P3t3 (1)
在公式(1)中，P0为起始节点，P1为第一控制点，P2为第二控制点，P3为终止节点，t为可变参数，t∈(左边界值，右边界值)。
也就是说，可变参数的具体数值根据变化步长从变化范围的左边界值变化至右边界值，可变参数的具体数值在每次变化时，都利用上述公式(1)中的内容计算指示点的新坐标，再利用计算得到的新坐标和更新数据方法(例如gg-editor的update方法)更新指示点在关联边上的坐标，调用浏览器动画框架(例如requestAnimationFrame)重复执行前述步骤，从而实现将指示点在关联边上移动。
当可变参数的具体数值变化至右边界值并更新指示点的坐标之后，该指示点移动至终止节点所处的位置。
例如：假设可变参数t的变化范围为0至1，t的具体数值按照变化步长从0变化至1，t的具体数值每次变化时，都计算指示点的新坐标并据此更新指示点在关联边的坐标，指示点沿着关联边从起始节点移动至终止节点，实现起始节点与终止节点的关联边的动画效果。
可以理解的是，可通过设置变化步长的大小来控制指示点在关联边上的移动速度，变化步长越大则指示点在关联边上的移动速度越快，变化步长越小则指示点在关联边上的移动速度越慢。
步骤S303：将可变参数的具体数值重置为左边界值。
在具体实现步骤S303的过程中，当指示点移动至终止节点处时，即可变参数的具体数值变化至右边界值，为实现循环将指示点沿着关联边从起始节点移动至终止节点，此时将可变参数的具体数值重置为左边界值，进入下一执行周期，返回执行步骤S302。
例如：假设可变参数t的变化范围为0至1，当t的具体数值从0变化至1时，表示指示点已从起始节点移动至终止节点，此时将t重置为0，再次将指示点从起始节点处开始移动至终止节点，循环执行直至所有的执行周期结束，实现循环将指示点沿着关联边从起始节点移动至终止节点。
在本发明实施例中，将可变参数的具体数值根据变化步长进行变化，在每次变化时，利用起始节点的坐标、终止节点的坐标、第一控制点的坐标、第二控制点的坐标和可变参数的具体数值，结合三次贝塞尔曲线方程，计算指示点在关联边上的新坐标并据此更新指示点的坐标，实现将指示点沿着关联边从起始节点移动至终止节点。不需要升级图编辑器的版本和开发用于实现边动效的API，通过循环将指示点沿着关联边从起始节点移动至终止节点，即可实现起始节点与终止节点之间的关联边的边动效，降低实现边动效的成本。
为更好解释说明上述本发明实施例图1和图3的内容，通过图5示出的内容进行举例说明。
参见图5，示出了本发明实施例提供的一种在可视化界面中实现边动效的方法的另一流程图，该方法包括：
步骤S501：点击事件对应的操作对象是否为节点。若点击事件对应的操作对象为节点，将被点击的节点作为起始节点并执行步骤S504至步骤S508，若点击事件对应的操作对象不是节点，执行步骤S502至步骤S503。
步骤S502：重置动画定时器。
步骤S503：重置可视化界面。
步骤S504：确定与起始节点具有关联边的终止节点。
步骤S505：更新起始节点与终止节点之间的关联边的配置。
步骤S506：重置动画定时器。
步骤S507：计算指示点在关联边上的新坐标并据此更新指示点的坐标。
在具体实现步骤S507的过程中，该步骤的具体执行原理可参见上述本发明实施例图3示出的内容。
步骤S508：启动动画定时器，重复执行步骤S507直至边动效完成。
需要说明的是，步骤S501至步骤S508的具体执行原理，可参见上述本发明实施例图1和图3示出的内容，在此不再赘述。
与上述本发明实施例提供的一种在可视化界面中实现边动效的方法相对应，参见图6，本发明实施例还提供了一种在可视化界面中实现边动效的装置的结构框图，该装置包括：第一确定单元601、第二确定单元602、更新单元603和处理单元604；
第一确定单元601，用于确定可视化界面中点击事件对应的操作对象。
第二确定单元602，用于若操作对象为可视化界面中的任意节点，将操作对象作为起始节点，并确定与起始节点具有关联边的至少一个节点为终止节点。
更新单元603，用于将起始节点与终止节点之间的关联边的默认配置更新为包含指示点的配置，指示点具有***示样式。
处理单元604，用于利用所述起始节点、所述终止节点、预设的执行周期、预设的可变参数的变化范围和可变参数的变化步长，循环将指示点沿着关联边从起始节点移动至终止节点。
在本发明实施例中，当可视化界面中点击事件对应的操作对象为任意节点时，将操作对象作为起始节点并确定与起始节点具有关联边的至少一个节点为终止节点。将起始节点与终止节点之间的关联边的默认配置更新为包含指示点的配置，通过循环将指示点沿着关联边从起始节点移动至终止节点，不需要升级图编辑器的版本和开发用于实现边动效的API，即可实现起始节点与终止节点之间的关联边的边动效，降低实现边动效的成本。
优选的，结合图6示出的内容，处理单元604包括第一处理模块和第二处理模块，各个模块的执行原理如下：
第一处理模块，用于分别对起始节点和终止节点的坐标进行偏移处理，得到第一控制点和第二控制点的坐标。
第二处理模块，用于按照预设的执行周期重复执行以下步骤，以下步骤包括：
基于预设的可变参数的变化范围和变化步长，将可变参数的具体数值按照变化步长从变化范围的左边界值变化至右边界值，并在具体数值的每次变化时，利用起始节点的坐标、终止节点的坐标、第一控制点的坐标、第二控制点的坐标和具体数值，更新指示点在关联边上的坐标，将指示点沿着关联边从起始节点移动至终止节点；将可变参数的具体数值重置为左边界值。
在具体实现中，用于更新指示点在关联边上的坐标的第二处理模块，具体用于：利用起始节点的坐标、终止节点的坐标、第一控制点的坐标、第二控制点的坐标和具体数值，结合三次贝塞尔曲线方程，确定指示点在关联边上的新坐标，并利用新坐标更新指示点在关联边上的坐标，将指示点沿着关联边从起始节点移动至终止节点。
在本发明实施例中，将可变参数的具体数值根据变化步长进行变化，在每次变化时，利用起始节点的坐标、终止节点的坐标、第一控制点的坐标、第二控制点的坐标和可变参数的具体数值，结合三次贝塞尔曲线方程，计算指示点在关联边上的新坐标并据此更新指示点的坐标，实现将指示点沿着关联边从起始节点移动至终止节点。不需要升级图编辑器的版本和开发用于实现边动效的API，通过循环将指示点沿着关联边从起始节点移动至终止节点，即可实现起始节点与终止节点之间的关联边的边动效，降低实现边动效的成本。
优选的，结合图6示出的内容，该装置还包括：
重置单元，用于若操作对象不是可视化界面中的任意节点，重置可视化界面和动画定时器。
优选的，本发明实施例还提供了一种电子设备，该电子设备包括：存储器和处理器；其中，存储器用于存储程序；处理器用于执行程序，程序被执行时，具体用于实现如上述本发明实施例所提供的在可视化界面中实现边动效的方法。
优选的，本发明实施例还提供了一种计算机存储介质，用于存储计算机程序，计算机程序被执行时，用于实现如上述本发明实施例所提供的在可视化界面中实现边动效的方法。
综上所述，本发明实施例提供一种在可视化界面中实现边动效的方法及装置，当可视化界面中点击事件对应的操作对象为任意节点时，将操作对象作为起始节点并确定与起始节点具有关联边的至少一个节点为终止节点。将起始节点与终止节点之间的关联边的默认配置更新为包含指示点的配置，通过循环将指示点沿着关联边从起始节点移动至终止节点，不需要升级图编辑器的版本和开发用于实现边动效的API，即可实现起始节点与终止节点之间的关联边的边动效，降低实现边动效的成本。
本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于***或***实施例而言，由于其基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。以上所描述的***及***实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。
专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。
对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。
Claims (8)
1.一种在可视化界面中实现边动效的方法，其特征在于，所述方法包括：
确定可视化界面中点击事件对应的操作对象；
若所述操作对象为所述可视化界面中的任意节点，将所述操作对象作为起始节点，并确定与所述起始节点具有关联边的至少一个节点为终止节点；
将所述起始节点与所述终止节点之间的所述关联边的默认配置更新为包含指示点的配置；
利用所述起始节点、所述终止节点、预设的执行周期、预设的可变参数的变化范围和所述可变参数的变化步长，循环将所述指示点沿着所述关联边从所述起始节点移动至所述终止节点；
其中，所述利用所述起始节点、所述终止节点、预设的执行周期、预设的可变参数的变化范围和所述可变参数的变化步长，循环将所述指示点沿着所述关联边从所述起始节点移动至所述终止节点，包括：
分别对所述起始节点和终止节点的坐标进行偏移处理，得到第一控制点和第二控制点的坐标；
按照预设的执行周期重复执行以下步骤，所述以下步骤包括：
基于预设的可变参数的变化范围和变化步长，将所述可变参数的具体数值按照所述变化步长从所述变化范围的左边界值变化至右边界值，并在所述具体数值的每次变化时，利用所述起始节点的坐标、所述终止节点的坐标、所述第一控制点的坐标、所述第二控制点的坐标和所述具体数值，更新所述指示点在所述关联边上的坐标，将所述指示点沿着所述关联边从所述起始节点移动至所述终止节点；
将所述可变参数的具体数值重置为所述左边界值。
2.根据权利要求1所述的方法，其特征在于，所述利用所述起始节点的坐标、所述终止节点的坐标、所述第一控制点的坐标、所述第二控制点的坐标和所述具体数值，更新所述指示点在所述关联边上的坐标，将所述指示点沿着所述关联边从所述起始节点移动至所述终止节点，包括：
利用所述起始节点的坐标、所述终止节点的坐标、所述第一控制点的坐标、所述第二控制点的坐标和所述具体数值，结合三次贝塞尔曲线方程，确定所述指示点在所述关联边上的新坐标，并利用所述新坐标更新所述指示点在所述关联边上的坐标，将所述指示点沿着所述关联边从所述起始节点移动至所述终止节点。
3.根据权利要求1所述的方法，其特征在于，所述执行周期通过动画定时器配置，所述方法还包括：
若所述操作对象不是所述可视化界面中的任意节点，重置所述可视化界面和所述动画定时器。
4.一种在可视化界面中实现边动效的装置，其特征在于，所述装置包括：
第一确定单元，用于确定可视化界面中点击事件对应的操作对象；
第二确定单元，用于若所述操作对象为所述可视化界面中的任意节点，将所述操作对象作为起始节点，并确定与所述起始节点具有关联边的至少一个节点为终止节点；
更新单元，用于将所述起始节点与所述终止节点之间的所述关联边的默认配置更新为包含指示点的配置；
处理单元，用于利用所述起始节点、所述终止节点、预设的执行周期、预设的可变参数的变化范围和所述可变参数的变化步长，循环将所述指示点沿着所述关联边从所述起始节点移动至所述终止节点；
其中，所述处理单元包括：
第一处理模块，用于分别对所述起始节点和终止节点的坐标进行偏移处理，得到第一控制点和第二控制点的坐标；
第二处理模块，用于按照预设的执行周期重复执行以下步骤，所述以下步骤包括：
基于预设的可变参数的变化范围和变化步长，将所述可变参数的具体数值按照所述变化步长从所述变化范围的左边界值变化至右边界值，并在所述具体数值的每次变化时，利用所述起始节点的坐标、所述终止节点的坐标、所述第一控制点的坐标、所述第二控制点的坐标和所述具体数值，更新所述指示点在所述关联边上的坐标，将所述指示点沿着所述关联边从所述起始节点移动至所述终止节点；
将所述可变参数的具体数值重置为所述左边界值。
5.根据权利要求4所述的装置，其特征在于，用于更新所述指示点在所述关联边上的坐标的所述第二处理模块，具体用于：利用所述起始节点的坐标、所述终止节点的坐标、所述第一控制点的坐标、所述第二控制点的坐标和所述具体数值，结合三次贝塞尔曲线方程，确定所述指示点在所述关联边上的新坐标，并利用所述新坐标更新所述指示点在所述关联边上的坐标，将所述指示点沿着所述关联边从所述起始节点移动至所述终止节点。
6.根据权利要求4所述的装置，其特征在于，所述装置还包括：
重置单元，用于若所述操作对象不是所述可视化界面中的任意节点，重置所述可视化界面和动画定时器。
7.一种电子设备，其特征在于，包括：存储器和处理器；其中，所述存储器用于存储程序；所述处理器用于执行所述程序，所述程序被执行时，具体用于实现如权利要求1至3中任意一项所述的在可视化界面中实现边动效的方法。
8.一种计算机存储介质，其特征在于，用于存储计算机程序，所述计算机程序被执行时，用于实现如权利要求1至3中任意一项所述的在可视化界面中实现边动效的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110774224.8A CN113448579B (zh) | 2021-07-08 | 2021-07-08 | 一种在可视化界面中实现边动效的方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110774224.8A CN113448579B (zh) | 2021-07-08 | 2021-07-08 | 一种在可视化界面中实现边动效的方法及装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113448579A CN113448579A (zh) | 2021-09-28 |
| CN113448579B true CN113448579B (zh) | 2024-04-09 |
Family
ID=77815522
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110774224.8A Active CN113448579B (zh) | 2021-07-08 | 2021-07-08 | 一种在可视化界面中实现边动效的方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113448579B (zh) |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101276255A (zh) * | 2008-05-05 | 2008-10-01 | 中兴通讯股份有限公司 | 一种移动终端菜单的显示装置及显示方法 |
| WO2014060756A1 (en) * | 2012-10-16 | 2014-04-24 | University Of Abertay Dundee | Network dynamics visualisation method, system and computer program |
| WO2015131947A1 (de) * | 2014-03-06 | 2015-09-11 | Siemens Aktiengesellschaft | System zur erstellung und zum betrieb von softwareapplikationen |
| CN108388465A (zh) * | 2018-03-15 | 2018-08-10 | 广州优视网络科技有限公司 | 动态形变开关组件的实现方法、装置及终端 |
| CN110162358A (zh) * | 2019-04-09 | 2019-08-23 | 广州小鹏汽车科技有限公司 | 一种指示组件的动画效果的实现方法和*** |
| CN111443914A (zh) * | 2020-03-30 | 2020-07-24 | 北京字节跳动网络技术有限公司 | 动画展示方法以及装置 |
| CN111857922A (zh) * | 2020-07-17 | 2020-10-30 | 北京嘀嘀无限科技发展有限公司 | 一种虚拟元素的控制方法及装置 |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US10733372B2 (en) * | 2017-01-10 | 2020-08-04 | Microsoft Technology Licensing, Llc | Dynamic content generation |
-
2021
- 2021-07-08 CN CN202110774224.8A patent/CN113448579B/zh active Active
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101276255A (zh) * | 2008-05-05 | 2008-10-01 | 中兴通讯股份有限公司 | 一种移动终端菜单的显示装置及显示方法 |
| WO2014060756A1 (en) * | 2012-10-16 | 2014-04-24 | University Of Abertay Dundee | Network dynamics visualisation method, system and computer program |
| WO2015131947A1 (de) * | 2014-03-06 | 2015-09-11 | Siemens Aktiengesellschaft | System zur erstellung und zum betrieb von softwareapplikationen |
| CN108388465A (zh) * | 2018-03-15 | 2018-08-10 | 广州优视网络科技有限公司 | 动态形变开关组件的实现方法、装置及终端 |
| CN110162358A (zh) * | 2019-04-09 | 2019-08-23 | 广州小鹏汽车科技有限公司 | 一种指示组件的动画效果的实现方法和*** |
| CN111443914A (zh) * | 2020-03-30 | 2020-07-24 | 北京字节跳动网络技术有限公司 | 动画展示方法以及装置 |
| CN111857922A (zh) * | 2020-07-17 | 2020-10-30 | 北京嘀嘀无限科技发展有限公司 | 一种虚拟元素的控制方法及装置 |
Non-Patent Citations (1)
| Title |
|---|
| 网络拓扑结构可视化方法研究与发展;王松;张野;吴亚东;;网络与信息安全学报(02);全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113448579A (zh) | 2021-09-28 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US20150095811A1 (en) | Context aware user interface parts | |
| US8756044B2 (en) | Graphical partitioning for parallel execution of executable block diagram models | |
| US8584027B2 (en) | Framework for designing physics-based graphical user interface | |
| US8365086B2 (en) | System and method for building graphical instrument panels | |
| US20090322760A1 (en) | Dynamic animation scheduling | |
| US8310484B2 (en) | Efficient processing of operator graphs representing three-dimensional character animation | |
| KR102265126B1 (ko) | 사용자 인터페이스 요소 구성 기법 | |
| US10248581B2 (en) | Guarded memory access in a multi-thread safe system level modeling simulation | |
| KR20180100276A (ko) | 머신 비전 시스템들을 위한 비주얼 프로그램을 제공하기 위한 장치들, 시스템들 및 방법들 | |
| US8131528B1 (en) | Reporting delay using visual indicators in a model | |
| US9075666B2 (en) | Deferred execution in a multi-thread safe system level modeling simulation | |
| US20150058854A1 (en) | Direct Memory Interface Access in a Multi-Thread Safe System Level Modeling Simulation | |
| US20180004374A1 (en) | Process visualization toolkit | |
| CN113448579B (zh) | 一种在可视化界面中实现边动效的方法及装置 | |
| CN112121437B (zh) | 针对目标对象的移动控制方法、装置、介质及电子设备 | |
| US20100318655A1 (en) | Concurrent Processing With Untrusted Beings | |
| CN108279956B (zh) | 进度指示方法及进度指示装置、存储介质、电子设备 | |
| CN111158840B (zh) | 图像轮播方法及装置 | |
| EP2754040B1 (en) | Visualization and editing of composite layouts | |
| CN108920367B (zh) | 一种数据结构可视化调试方法 | |
| GB2476544A (en) | Relational modeling for performance analysis of multi-core processors | |
| CN109189537A (zh) | 页面信息的动态显示方法、计算设备及计算机存储介质 | |
| Sridhar et al. | Slicing matlab simulink/stateflow models | |
| US20140317538A1 (en) | User interface response to an asynchronous manipulation | |
| JP6138269B2 (ja) | プログラマブル表示器、プログラム |
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 |