[发明专利]一种web端实现流程图的方法及系统

说明书

本发明涉及计算机软件技术领域，具体涉及一种web端实现流程图的方法及系统，本发明对节点顶部连接点进行定义，对底部连接点进行定义，同时定义节点、连接线的数据结构，得到连接点的画法组合并以此进行动作自定义，最终实现绘制以折线连接的带有丰富交互的流程图。本发明提供了内容、动作可自定义的流程图实现方式，重点是连接线的绘制方法，搭配使用者的具体业务，可自由扩展，可绘制以折线连接的带有丰富交互的流程图。

技术领域

本发明涉及计算机软件技术领域，具体涉及一种web端实现流程图的方法及系统。

背景技术

现有技术插件不能满足节点配置丰富的交互(如：右击、状态展示等)及样式，且仅支持添加删除节点，拖拽实现，整体为canvas，样式无法配置。

发明内容

针对现有技术的不足，本发明公开了一种web端实现流程图的方法及系统，用于绘制以折线连接的带有丰富交互的流程图。

本发明通过以下技术方案予以实现：

第一方面，本发明提供了一种web端实现流程图的方法，所述方法对节点顶部连接点进行定义，对底部连接点进行定义，同时定义节点、连接线的数据结构，得到连接点的画法组合并以此进行动作自定义，最终实现绘制以折线连接的带有丰富交互的流程图。

更进一步的，所述方法中，被连接的target相对于source的位置包括：右下方，右上方、左上方、左下方、正上/下/左/右方。

更进一步的，所述方法中，以起点和终点为参考点画矩形svg，则width＝|point1.x–point2.x|,height＝|point1.y–point2.y|。

更进一步的，所述方法中，lineOffset＝20作为svg向外延伸的偏移量。

更进一步的，所述方法中，得到连接点的画法组合为：

source＝0target＝0；

source＝0target＝1；

source＝1target＝0；

source＝1target＝1。

更进一步的，所述方法中，节点顶部连接点定义type＝0,底部连接点定义type＝1。

第二方面，本发明提供了一种web端实现流程图的系统，包括处理器、存储器以及存储在所述存储器中且被配置为由所述处理器执行的计算机程序，所述存储器与所述处理器耦接，且所述处理器执行所述计算机程序时，实现第一方面所述的web端实现流程图的方法步骤。

本发明的有益效果为：

本发明提供了内容、动作可自定义的流程图实现方式，重点是连接线的绘制方法，搭配使用者的具体业务，可自由扩展，可绘制以折线连接的带有丰富交互的流程图。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例节点、连接线的数据结构图；

图2是本发明实施例被连接的target相对于source的位置图；

图3是本发明实施例以起点和终点为参考点画矩形图；

图4是本发明实施例source＝1target＝1的第一种结果示意图；

图5是本发明实施例source＝1target＝1的第二种结果示意图；