可视化拖拽绘制流程图方法、装置、设备及存储介质

技术领域

本申请涉及研发管理领域，具体涉及一种可视化拖拽绘制流程图方法、装置、设备及存储介质。

背景技术

随着计算机的飞速发展，人们对其要求越来越高，现在市场上的流程画图工具的缺陷被无限放大，针对目前用户的实际需求，渴望有一款可视化绘制流程图工具，降低使用门槛以及操作难度，提高绘制流程图的维护性。

目前绘制流程图产品没有将绘制过程可视化，导致在绘制流程图的过程中人们只能凭借自己想象力构建图形的拖拽和绘制过程，导致现在的绘制流程图工具使用门槛高，操作难度极大，对刚接触该流程图绘制工具的新用户非常不友好，同时系统也存在终端服务有复用，在上面修改的数据达不到修改一处即可服务全局的作用，可维护性较差。

发明内容

本发明的主要目的是为了解决现有的流程画图工具可维护性差，且无法实现可视化绘制的技术问题。

本发明第一方面提供了一种可视化拖拽绘制流程图方法，所述可视化拖拽绘制流程图方法包括：

在接收到绘制流程图的请求后，根据所述请求确定所述流程图的起始图形和结束图形；

基于所述起始图形确定起始点和所述起始点的出发方向，以及基于所述结束图形确定终点和所述终点的进入方向；

创建所述起始点与所述终点之间的连线，并计算所述终点相对于所述起始点的连线方向；

根据所述出发方向、所述进入方向和所述连线方向，分别计算出所述起始点的下一连接点的第一坐标和所述终点的前一连接点的第二坐标；

基于所述所述出发方向、所述进入方向、所述连线方向、所述第一坐标和所述第二坐标，调用SDK工具包绘制所述起始图形和所述结束图形之间的连接线，得到所述流程图。

可选地，在本发明第一方面的第一种实现方式中，所述在接收到绘制流程图的请求后，根据所述请求确定所述流程图的起始图形和结束图形包括：

根据所述请求确定绘制所述流程图的初始位置和结束位置；

以所述初始位置为搜索中心，获取一定距离内的多个坐标点，并将多个所述坐标点相互串联，得到起始图形；

通过拖拽操作将所述起始图形拖拽至所述结束位置，得到结束图形。

可选地，在本发明第一方面的第二种实现方式中，所述基于所述起始图形确定起始点和所述起始点的出发方向包括：

选取所述起始图形任意一点作为起始点；

以所述起始点为中点，绘制水平正交线和垂直正交线；

判断所述水平正交线和所述垂直正交线与所述起始图形是否有重叠，得到第一判断结果；

根据所述第一判断结果选择与所述起始图形没有重叠的正交线的方向为所述起始点的出发方向。

可选地，在本发明第一方面的第三种实现方式中，所述基于所述结束图形确定终点和所述终点的进入方向包括：

选取所述结束图形任意一点作为终点；

以所述终点为中点，绘制水平正交线和垂直正交线；

判断所述水平正交线和所述垂直正交线与所述结束图形是否有重叠，得到第二判断结果；

根据所述第二判断结果选择与所述结束图形没有重叠的正交线的方向为所述终点的进入方向。

可选地，在本发明第一方面的第四种实现方式中，所述根据所述出发方向、所述进入方向和所述连线方向，分别计算出所述起始点的下一连接点的第一坐标和所述终点的前一连接点的第二坐标包括：

基于所述起始点和所述出发方向，确定起始点到下一连接点的下一连接方向；

根据所述下一连接方向，通过所述起始点的坐标加上固定长度，得到所述起始点的下一个连接点的第一坐标；

基于所述终点和所述进入方向，确定所述终点到所述终点前一连接点的连接方向；

根据所述连接方向，通过所述终点的坐标减去固定长度，得到所述终点前的前一连接点的第二坐标。

可选地，在本发明第一方面的第五种实现方式中，所述基于所述所述出发方向、所述进入方向、所述连线方向、所述第一坐标和所述第二坐标，调用SDK工具包绘制所述起始图形和所述结束图形之间的连接线，得到所述流程图包括：

判断所述出发方向和所述进入方向是否同向；

若否，则只有一个转折点，通过所述第二坐标加上固定长度，得到转折点坐标；

若是，则有两个转折点，起始点坐标加上正交线起始方向向量的一半得到第一个转折点，根据第一个转折点加上水平向量中与起始向量垂直的向量，得到第二个转折点；

将所述转折点连接起来，得到由起始点到终点轨迹的所述流程图。

可选地，在本发明第一方面的第六种实现方式中，所述基于所述所述出发方向、所述进入方向、所述连线方向、所述第一坐标和所述第二坐标，调用SDK工具包绘制所述起始图形和所述结束图形之间的连接线，得到所述流程图还包括：

根据所述第一坐标和所述第二坐标，计算出所述第一坐标和所述第二坐标之间各转折点的坐标位置；

将所述坐标位置合并在同一条线上的点，根据所述起始图形确定页面边界，使用D3可视化组件将转折点之间各点串联成线，得到由起始点指向所述终点的连线；

根据所述连线，将所述各转折点数据发送到所述SDK工具包，通过所述工具包相应模块对各个转折点数据处理并实时同步到各页面，得到所述流程图。

本发明第二方面提供了一种绘制流程图装置，所述绘制流程图装置包括：

请求模块，用于在接收到绘制流程图的请求后，根据所述请求确定所述流程图的起始图形和结束图形；

确认模块，用于基于所述起始图形确定起始点和所述起始点的出发方向，以及基于所述结束图形确定终点和所述终点的进入方向；

构建模块，用于创建所述起始点与所述终点之间的连线，并计算所述终点相对于所述起始点的连线方向；

计算模块，用于根据所述出发方向、所述进入方向和所述连线方向，分别计算出所述起始点的下一连接点的第一坐标和所述终点的前一连接点的第二坐标；

调用模块，用于基于所述所述出发方向、所述进入方向、所述连线方向、所述第一坐标和所述第二坐标，调用SDK工具包绘制所述起始图形和所述结束图形之间的连接线，得到所述流程图。

可选地，在本发明第二方面的第一种实现方式中，所述请求模块具体用于：

根据所述请求确定绘制所述流程图的初始位置和结束位置；

以所述初始位置为搜索中心，获取一定距离内的多个坐标点，并将多个所述坐标点相互串联，得到起始图形；

通过拖拽操作将所述起始图形拖拽至所述结束位置，得到结束图形。

可选地，在本发明第二方面的第二种实现方式中，所述确认模块包括：

选取单元，用于选取所述起始图形任意一点作为起始点；

划分单元，用于以所述起始点为中点，绘制水平正交线和垂直正交线；

第一判断单元，用于判断所述水平正交线和所述垂直正交线与所述起始图形是否有重叠，得到第一判断结果；

筛选单元，用于根据所述第一判断结果选择与所述起始图形没有重叠的正交线的方向为所述起始点的出发方向。

可选地，在本发明第二方面的第四种实现方式中，所述计算模块包括：

确定单元，用于基于所述起始点和所述出发方向，确定起始点到下一连接点的下一连接方向；

第一连接单元，用于根据所述下一连接方向，通过所述起始点的坐标加上固定长度，得到所述起始点的下一个连接点的第一坐标；

第二连接单元，用于基于所述终点和所述进入方向，确定所述终点到所述终点前一连接点的连接方向；

生成单元，用于根据所述连接方向，通过所述终点的坐标减去固定长度，得到所述终点前的前一连接点的第二坐标。

可选地，在本发明第二方面的第五种实现方式中，所述调用模块包括：

计算单元，用于根据所述第一坐标和所述第二坐标，计算出所述第一坐标和所述第二坐标之间各转折点的坐标位置；

合并单元，用于将所述坐标位置合并在同一条线上的点，根据所述起始图形确定页面边界，使用D3可视化组件将转折点之间各点串联成线，得到由起始点指向所述终点的连线；

同步单元，用于根据所述连线，将所述各转折点数据发送到所述SDK工具包，通过所述工具包相应模块对各个转折点数据处理并实时同步到各页面，得到所述流程图。

本发明第三方面提供了一种绘制流程图设备，包括：存储器和至少一个处理器，所述存储器中存储有指令，所述存储器和所述至少一个处理器通过线路互连；

所述至少一个处理器调用所述存储器中的所述指令，以使得所述绘制流程图设备执行上述的可视化拖拽绘制流程图方法的步骤。

本发明的第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机程序，当其在计算机上运行时，使得计算机执行上述的可视化拖拽绘制流程图方法的步骤。

本发明提供的技术方案中，接收到绘制流程图的请求后，根据请求确定流程图的起始图形和结束图形，基于起始图形确定起始点和起始点的出发方向，以及基于结束图形确定终点和终点的进入方向，创建起始点与终点之间的连线，并计算终点相对于起始点的连线方向，再根据出发方向、进入方向以及连线方向，分别计算出第二个坐标和倒数第二个坐标，调用SDK工具包绘制起始图形和结束图形之间的连接线，得到流程图。在使用该绘制流程图工具对图形进行修改或不同位置之间的拖拽时，整个过程是可视化的，这样减小了用户的操作难度，降低了对于绘制流程图工具的使用门槛，为用户提供便捷，提高了用户的工作效率，极大的提升用户体验感。

附图说明

图1为本发明实施例中绘制流程图方法的第一个实施例示意图；

图2为本发明实施例中绘制流程图方法的第二个实施例示意图；

图3为本发明实施例中绘制流程图方法的第三个实施例示意图；

图4为本发明实施例中绘制流程图方法的第四个实施例示意图；

图5为本发明实施例中绘制流程图方法的第五个实施例示意图；

图6为本发明实施例中绘制流程图装置的一个实施例示意图；

图7为本发明实施例中绘制流程图装置的另一个实施例示意图；

图8为本发明实施例中绘制流程图设备的一个实施例示意图。

具体实施方式

针对于上述的缺陷，提出了一种可视化拖拽绘制流程图方法，具体在接收到绘制流程图的请求后，根据请求确定流程图的起始图形和结束图形以及确定它们的起始点的出发方向和终点的进入方向，将起始点和终点之间进行连线并计算出终点相对于起始点的连线方向，再根据出发方向、进入方向以及连线方向，分别计算出第二个坐标和倒数第二个坐标，调用SDK工具包绘制起始图形和结束图形之间的连接线，得到流程图。从而实现了简化了操作流程，提高了工作效率，即节省了时间，又能确保绘制的准确度，为客户提供更优质的服务。

本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的实施例能够以除了在这里图示或描述的内容以外的顺序实施。此外，术语“包括”或“具有”及其任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

为便于理解，下面对本发明实施例的具体流程进行描述，请参阅图1，本发明实施例中可视化拖拽绘制流程图方法的第一个实施例包括：

101、在接收到绘制流程图的请求后，根据请求确定流程图的起始图形和结束图形；

在本实施例中，在接收到绘制流程图的请求之后，该绘制流程图工具会获取到图形所在的初始位置为起始位置，在确定了图形的起始位置之后，根据图形的起始位置确定其起始点和终点的具体位置的坐标值；

在实际应用中，绘制流程图工具会根据用户的请求，确定图形的起始位置和结束位置，它是以起始位置为中心，搜索一定范围内的点，将这些点连接起来就得到起始图形，用户再通过对起始图形的拖拽，将其拖拽至结束位置，即可得到结束图形。

102、基于起始图形确定起始点和起始点的出发方向，以及基于结束图形确定终点和终点的进入方向；

在本实施例中，在确定起点和终点之后，以起始点的中点为垂直水平的正交线，判断正交线与该图形是否有重叠，在没有重叠的情况下，正交线只可能是水平方向的，因为根据第二个点的位置可以确定正交线没有往下走的可能性，即可得到起始方向，在获取到终点的位置坐标之后，通过终点图形坐标值根据相对位置，减去固定的长度，即可得到倒数第二个点的位置坐标，将倒数第二个点的位置坐标与图形四个方向的点连线，最终可以确定终点的进入方向；

进一步的，想要获取到终点的方向，只用得到终点前一个点的坐标即可，根据上述的计算方式，无论起始点的方向是向下还是向上，它的横坐标都是不变的，图形的移动，只会改变纵坐标；

在实际应用中，若起始点的方向向下时，则终点的方向也是向下的，此时它的纵坐标随着固定的值的增大而减小的；当终点的方向向上时，纵坐标随着固定值的增大而增大。分析不同情况下得到的终点的进入方向。

103、创建起始点与终点之间的连线，并计算终点相对于起始点的连线方向；

在本实施例中，在确定了起始点和终点之后，根据相应的计算公式计算得到第二个点的坐标和倒数第二个点的坐标，判断起始图形的出发方向和结束图形的进入方向，然后再计算出第二个点的坐标和倒数第二个点的坐标之间的各个转折点坐标，将所有转折点连接起来，得到由起始点到终点的连线。例如，某物理实验室，为了计算出小船在河中顺流和逆流时的速度，制定了相应的实验方法，通过两种不同的情况，标记小船在规定时间段内的运动轨迹，并将各个点连接起来，得到由起点指向终点的连线。

104、根据出发方向、进入方向和连线方向，分别计算出起始点的下一连接点的第一坐标和终点的前一连接点的第二坐标；

在本实施例中，根据起始点的出发方向和终点的进入方向，将起始点的出发方向到下一连接点的下一连接方向，判定终点到终点前一连接点的连接方向后。如果方向是向上的，那么它的横坐标不变，纵坐标在原来的基础上加上一个固定的长度，即可得到下一个点的坐标值；如果起始点的方向是向下的，那么第二个点的横坐标也不会发生改变，但是它的纵坐标要减去固定的长度值，例如，在坐标系中，某一点垂直向上运动一个固定的长度，那么它下一个点的坐标就是横坐标不变，纵坐标等于原来纵坐标的坐标值加上现在该物体运动的长度；

在本实施例中，起始点的下一连接点的第一坐标和终点的前一连接点的第二坐标就是该图形拖拽后的第二个点的坐标和倒数第二个点的坐标。在该实例中，之所以描述为起始点的下一连接点的第一坐标和终点的前一连接点的第二坐标是为了准确的描述该点的实例位置。

105、基于出发方向所述进入方向、连线方向、第一坐标和第二坐标，调用SDK工具包绘制起始图形和结束图形之间的连接线，得到流程图。

在本实施例中，根据上述步骤所述判断正交线起始方向和最终方向是否相同，在正交线起始方向终点方向相同的情况下，进一步的，需要对转折点之间的进行数量上的判断，当正交线起始方向和终点方向不相同的情况下，则只需要一个转折点即可满足；当正交线起始方向和终点方向相同的情况下，则需要两个转折点；

在实际应用中，由于用户的需求，在各类的流程绘制需要对点与点之间的转折点进行计算。所谓的转折点是对点与点之间距离的计算，也是对点与点之间角度的计算，后续进行观察点与点之间的距离和角度的变化规律，转折点取决于所指定的角度必须位于点与点之间；

在本实施例中，要先判断起始点的出发方向和终点的进入方向是否同向，如果同向，那么它们之间会有连个转折点，第一个转折点的坐标等于起始点坐标加上正交线起始方向向量的一半，第二个转折点的坐标等于第一个转折点加上水平向量中与起始向量垂直的向量。如果起始点的出发方向和终点的进入方向不同向，那么他们就只有一个转折点；

在本实施例中，将各个转折点通过可视化组件D3js串联起来，并将该图形的修改数据传输至SDK工具包中，再将图形同步至各个页面，例如，有三个页面的图形是一样的，在现有技术上的绘制流程图工具上修改需要对各个页面都进行逐一修改，在经过本发明对该绘图工具进行改良之后，只需要对其中一个进行修改，在进行修改数据保存和数据更新之后，各个页面之间进行了数据同步，只用修改一次即可满足用户需求；

在本实施例中，基于D3可视化组件将各个点串联起来，实现连线和图形之间的自动寻路功能，极大的减小了用户在使用该工具时的操作难度，使用户的工作效率得到了很大的提升，实现了修改一个页面上的就能同步到各个相同的页面上，减少了用户的工作量，提升使用者的体验感。

请参阅图2，本发明实施例中可视化拖拽绘制流程图方法的第二个实施例包括：

201、在接收到绘制流程图的请求后，根据请求确定流程图的起始图形和结束图形；

202、根据请求确定绘制流程图的初始位置和结束位置；

在本步骤中，请求指的是根据用户的需求，对图形的最终样式以及位置的要求对绘制流程图的工具所发出的相关命令，初始位置指的是图形在修改前的位置，结束位置就是指满足用户要求的图形的最终样式，例如，在绘制流程图工具组，需要对某一图形的样式以及它的位置进行对应的修改，在修改前的图形就是它的起始样式，在修改完成后，图形的样式以及所在位置，就是结束图形。

203、以初始位置为搜索中心，获取一定距离内的多个坐标点，并将多个所述坐标点相互串联，得到起始图形；

在本实施例中，初始位置指的就是起始点，起始点通过对周边位置的搜索，获取到周边一定距离存在的点的信息，在搜索结束之后，将获取到的各个点连接在一起，就可以得到起始图形，例如，在坐标系中，绘制流程图工具获取到起始点，在不断的进行搜索之后，获取到了在一定距离的周边的点，将这些点连接在一起，就能得到一个图形，得到的图形就是起始图形。

204、通过拖拽操作将起始图形拖拽至结束位置，得到结束图形。

在本实施例中，结束位置就是指用户对图形修改的最终位置，在得到起始图形之后，通过满足于用户的运动轨迹将起始图形进行拖拽，中途经过特定的各转折点，最后被拖拽到满足于用户的位置，得到结束图形，例如，某图形要通过特定的运动轨迹从A坐标移动到B坐标，那么A坐标可以看作是它的起始点B坐标可以看作是它的终点，将该图形由起始点拖拽至终点，即得到结束图形。

205、基于起始图形确定起始点和起始点的出发方向，以及基于结束图形确定终点和终点的进入方向；

206、创建起始点与终点之间的连线，并计算终点相对于起始点的连线方向；

207、根据出发方向、进入方向和连线方向，分别计算出起始点的下一连接点的第一坐标和终点的前一连接点的第二坐标；

208、基于出发方向、进入方向、连线方向、第一坐标和第二坐标，调用SDK工具包绘制起始图形和结束图形之间的连接线，得到流程图。

通过上述方法的实施，不仅简化了用户对流程的理解难度，还优化了用户操作流程，节省了繁琐的操作流程和节省了时间，还能提高图形绘制的准确度和提高用户的工作效率。

请参阅图3，本发明实施例中可视化拖拽绘制流程图方法的第三个实施例包括：

301、基于起始图形确定起始点和起始点的出发方向；

302、选取起始图形任意一点作为起始点；

在本实施例中，选取起始图形任意一点，即在该起始图形的范围内，任意选取一点即可作为该图形的起始点，但是本实施例中，在选取起始点的时候，选取图形最下方为最优选择，为了避免起始点的方向与图形重叠，不好判断正交线与图形的位置关系。

303、以起始点为中点，绘制水平正交线和垂直正交线；

在本实施例中，以起始点作为正交线的中点，并且以该点为水平正交线和垂直正交线的交点，正交线指的是两条呈九十度交叉的线，例如，两条相互垂直且交于一点的线叫做正交线。

304、判断水平正交线和垂直正交线与起始图形是否有重叠，得到第一判断结果；

在本实施例中，水平正交线和垂直正交线是交于起始图形上的起始点的，起始图形的起始方向和垂直向量的竖直向量方向是相反的，根据第二个点的正交线，所以正交线只可能是水平的，只有正交线与起始图形才没有重叠，得到正交线的方向是水平的，例如，正交线向上，那么它会与起始图形重叠，往下，则方向是相反的，所以只可能水平。

305、根据第一判断结果选择与起始图形没有重叠的正交线的方向为起始点的出发方向；

在本实施例中，在上个步骤得到以起始点为中点的正交线后，本步骤需要判断正交线与起始图形有无重叠的方向，在判断他们之间没有重叠的时候，可以确定正交线的方向就是连线的正确方向，得到起始点的出发方向。

306、创建起始点与终点之间的连线，并计算终点相对于起始点的连线方向；

307、根据出发方向、进入方向和连线方向，分别计算出起始点的下一连接点的第一坐标和终点的前一连接点的第二坐标；

308、基于出发方向、进入方向、连线方向、第一坐标和第二坐标，调用SDK工具包绘制起始图形和结束图形之间的连接线，得到流程图。

通过对上述提高的方法的实施，实现了对可视化拖拽绘制流程图的正交线和图形有无重叠的判断，在没有重叠的时候，它确定了正交线方向为起始方向，并且可以计算得到下一个坐标的方向，实现了可视化拖拽绘制流程图工具对图形和该图形数据的智能处理功能，简化了操作流程，提高用户的工作效率。

请参阅图4，本发明实施例中可视化拖拽绘制流程图方法的第四个实施例包括：

401、基于结束图形确定终点和终点的进入方向；

402、选取结束图形任意一点作为终点；

在本实施例中，选取结束图形任意一点，即在该结束图形的范围内，任意选取一点即可作为该图形的终点，确定终点，有利于计算倒数第二个点的坐标和各个转折点。

403、以终点为中点，绘制水平正交线和垂直正交线；

在本实施例中，以终点点作为正交线的中点，并且以该点为水平正交线和垂直正交线的交点，正交线指的是两条呈九十度交叉的线。

404、判断水平正交线和垂直正交线与结束图形是否有重叠，得到第二判断结果；

在本实施例中，水平正交线和垂直正交线是交于结束图形上的终点的，结束图形的进入方向和垂直向量的竖直向量方向是相反的，根据倒数第二个点的正交线，所以正交线只可能是水平的，只有正交线与结束图形才没有重叠，得到正交线的方向是水平的。

405、根据第二判断结果选择与结束图形没有重叠的正交线的方向为终点的进入方向；

在本实施例中，在上个步骤得到以起始点为中点的正交线后，本步骤需要判断正交线与结束图形有无重叠的方向，在判断他们之间没有重叠的时候，可以确定正交线的方向就是连线的正确方向，得到终点的进入方向。

406、根据出发方向、进入方向和连线方向，分别计算出起始点的下一连接点的第一坐标和终点的前一连接点的第二坐标包括；

407、基于出发方向、进入方向、连线方向、第一坐标和第二坐标，调用SDK工具包绘制起始图形和结束图形之间的连接线，得到流程图。

通过对上述提高的方法的实施，实现了绘制流程图根据坐标的方向去确定横坐标和纵坐标的值并以起点的方向判断去确认终点的方向，在正交线和图形没有重叠时，得到终点和起点的方向是相同的并通过计算得到每一个坐标的具体值，确保在进行图形拖拽时，每一个坐标的数据能实时发送到SDK之中，增加用户的视觉感，简化该工具的操作难度，提高工作效率。

请参阅图5，本发明实施例中可视化拖拽绘制流程图方法的第五个实施例包括：

501、根据出发方向、进入方向和连线方向，分别计算出起始点的下一连接点的第一坐标和终点的前一连接点的第二坐标包括；

502、基于起始点和出发方向，确定起始点到下一连接点的下一连接方向；

在本实施例中，在确定了起始点和出发方向后，根据起始点的坐标值计算出下一连接点的坐标，将两个点连接起来，确定起始点到下一连接点的下一连接方向，例如，某图形参考直角坐标系的位置移动，在确定了起始点和终点的条件下，根据判断不同的路径进行运动，在计算出下一个移动轨迹的坐标后，根据它判断的移动方向，向第二个点运动，这样就是它的起始点到下一连接点的下一连接方向。

503、根据下一连接方向，通过起始点的坐标加上固定长度，得到起始点的下一个连接点的第一坐标；

进一步的，根据判断出的下一连接方向，通过确定连接方向将起始点的坐标值加上对应的固定长度，在确认了方向后，通过上加下减，左减右加的计算方式计算第二个坐标点的坐标值，例如，在确定方向是垂直向上的时候，那么此时第二个点相对于第一个点的横坐标是不变的，只是纵坐标要加上固定的长度，得到下一个点的坐标值。

504、根据连接方向，通过终点的坐标减去固定长度，得到终点前的前一连接点的第二坐标；

在本实施例中，在得到终点的坐标值和确定了终点的进入方向后，可以通过终点的坐标减去一个对应的固定长度，得到倒数第二个点的坐标，求倒数第二个点的坐标值的方式和求第二个点的方法是相似的，求第二个点在方向向上或者向右时是使用加的求和方式，但是在求倒数第二个点坐标的时候，如果方向向上或者向右的时候，使用的是以终点的坐标减去固定的长度。

505、基于出发方向、进入方向、连线方向、第一坐标和第二坐标，调用SDK工具包绘制起始图形和结束图形之间的连接线，得到流程图包括。

通过对上述提高的方法的实施，在现有的技术用户绘制流程图要损耗大量的人力成本和时间成本，用户在修改图片时，需要对不同页面间的图片进行逐一修改，在多页面之间切换，容易操作失误，从而导致修改错误。但是通过计算终点的方向，再确定向量的类型是正交向量还是直接向量，这样的改进可以计算出各个页面间的坐标参数，实现页面间图形修改同步。

上面对本发明实施例中可视化拖拽绘制流程图方法进行了描述，下面对本发明实施例中可视化拖拽绘制流程图装置进行描述，请参阅图6，本发明实施例中可视化拖拽绘制流程图装置的第一个实施例包括：

请求模块601，用于在接收到绘制流程图的请求后，根据所述请求确定所述流程图的起始图形和结束图形；

确认模块602，用于基于所述起始图形确定起始点和所述起始点的出发方向，以及基于所述结束图形确定终点和所述终点的进入方向；

构建模块603，用于创建所述起始点与所述终点之间的连线，并计算所述终点相对于所述起始点的连线方向；

计算模块604，用于根据所述出发方向、所述进入方向和所述连线方向，分别计算出所述起始点的下一连接点的第一坐标和所述终点的前一连接点的第二坐标；

调用模块605，用于基于所述所述出发方向、所述进入方向、所述连线方向、所述第一坐标和所述第二坐标，调用SDK工具包绘制所述起始图形和所述结束图形之间的连接线，得到所述流程图。

再本实施例中，所述可视化拖拽绘制流程图装置运行上可视化拖拽绘制流程图方法，该方法通过一种可视化拖拽绘制流程图方法、装置、设备及存储介质，根据图形的起始位置，获取以起始点为终点的正交线，计算出下一个坐标方向，通过起点的方向确定终点的方向，再判断它的向量类型，通过获取到的点与点之间的坐标，将每一个转折点串联起来，根据图形和连线的自动寻路功能实现在线添加和编辑，将它的数据发送至SDK，经过SDK处理，实现数据实时同步。提高了可视化拖拽绘制流程图的准确性，提高工作效率，简化了操作流程。

请参阅图7，本发明实施案例中可视化拖拽绘制流程图装置的第二个实施例，该可视化拖拽绘制流程图装置包括：

请求模块601，用于在接收到绘制流程图的请求后，根据所述请求确定所述流程图的起始图形和结束图形；

确认模块602，用于基于所述起始图形确定起始点和所述起始点的出发方向，以及基于所述结束图形确定终点和所述终点的进入方向；

构建模块603，用于创建所述起始点与所述终点之间的连线，并计算所述终点相对于所述起始点的连线方向；

计算模块604，用于根据所述出发方向、所述进入方向和所述连线方向，分别计算出所述起始点的下一连接点的第一坐标和所述终点的前一连接点的第二坐标；

调用模块605，用于基于所述所述出发方向、所述进入方向、所述连线方向、所述第一坐标和所述第二坐标，调用SDK工具包绘制所述起始图形和所述结束图形之间的连接线，得到所述流程图。

可选地，所述请求模块601具体用于在接收到绘制流程图的请求后，根据所述请求确定所述流程图的起始图形和结束图形；

根据所述请求确定绘制所述流程图的初始位置和结束位置；

以所述初始位置为搜索中心，获取一定距离内的多个坐标点，并将多个所述坐标点相互串联，得到起始图形；

通过拖拽操作将所述起始图形拖拽至所述结束位置，得到结束图形。

在本实施例中，所述确认模块602包括：

选取单元7021，用于选取所述起始图形任意一点作为起始点；

划分单元7022，用于以所述起始点为中点，绘制水平正交线和垂直正交线；

第一判断单元7023，用于判断所述水平正交线和所述垂直正交线与所述起始图形是否有重叠，得到第一判断结果；

筛选单元7024，用于根据所述第一判断结果选择与所述起始图形没有重叠的正交线的方向为所述起始点的出发方向。

在本实施例中，所述计算模块604包括：

确定单元7041，用于基于所述起始点和所述出发方向，确定起始点到下一连接点的下一连接方向；

第一连接单元7042，用于根据所述下一连接方向，通过所述起始点的坐标加上固定长度，得到所述起始点的下一个连接点的第一坐标；

第二连接单元7043，用于基于所述终点和所述进入方向，确定所述终点到所述终点前一连接点的连接方向；

生成单元7044，用于根据所述连接方向，通过所述终点的坐标减去固定长度，得到所述终点前的前一连接点的第二坐标。

可选地，在本发明第二方面的第四种实现方式中，所述调用模块605包括：

计算单元7051，用于根据所述第一坐标和所述第二坐标，计算出所述第一坐标和所述第二坐标之间各转折点的坐标位置；

合并单元7052，用于将所述坐标位置合并在同一条线上的点，根据所述起始图形确定页面边界，使用D3可视化组件将转折点之间各点串联成线，得到由起始点指向所述终点的连线；

同步单元7053，用于根据所述连线，将所述各转折点数据发送到所述SDK工具包，通过所述工具包相应模块对各个转折点数据处理并实时同步到各页面，得到所述流程图。

上面图6和图7从模块化功能实施的角度对本发明实施例中的可视化拖拽绘制流程图装置进行详细描述，下面从硬件处理的角度对本发明实施例中可视化拖拽绘制流程图设备进行详细描述。

图8是本发明实施例提供的一种可视化拖拽绘制流程图设备的结构示意图，该可视化拖拽绘制流程图设备800可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上处理器(central processing units，CPU)810(例如，一个或一个以上处理器)和存储器820，一个或一个以上存储应用程序833或数据832的存储介质830(例如一个或一个以上海量存储设备)。其中，存储器820和存储介质830可以是短暂存储或持久存储。存储在存储介质830的程序可以包括一个或一个以上模块(图示没标出)，每个模块可以包括对绘制流程图设备800中的一系列指令操作。更进一步地，处理器810可以设置为与存储介质830通信，在可视化拖拽绘制流程图设备800上执行存储介质830中的一系列指令操作,以实现上述可视化拖拽绘制流程图方法的步骤。

可视化拖拽绘制流程图设备800还可以包括一个或一个以上电源840，一个或一个以上有线或无线网络接口850，一个或一个以上输入输出接口860，和/或，一个或一个以上操作系统831，例如Windows Serve，Mac OS X，Unix，Linux，FreeBSD等等。本领域技术人员可以理解，图8示出的可视化拖拽绘制流程图设备结构并不构成对本申请提供的可视化拖拽绘制流程图设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

本发明还提供一种计算机可读存储介质，该计算机可读存储介质可以为非易失性计算机可读存储介质，该计算机可读存储介质也可以为易失性计算机可读存储介质，所述计算机可读存储介质中存储有指令，当所述指令在计算机上运行时，使得计算机执行上述各实施例提供的可视化拖拽绘制流程图方法的步骤。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(read-only memory，ROM)、随机存取存储器(random access memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述，以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。