CN109697061A - 在web化流程设计器中实现线条拖动的方法及装置 - Google Patents

Abstract

本发明公开了一种在WEB化流程设计器中实现线条拖动的方法，包括如下步骤：当鼠标悬浮在线条上时，对待拖动线条进行分段处理，并为分段后的待拖动线条添加辅助点；通过辅助点接收拖动操作，获取拖动终点坐标；根据拖动终点坐标和线条原始点坐标的对比，根据算法算出拖动后线条的实际坐标并绘制拖动后的线条。本发明还公开了WEB化流程设计器。根据本发明公开的方法和设计器可以通过构建一种基于点对点，坐标对坐标的算法的线条，实现拖动、折叠、复制等功能。从而可以满足更复杂的多段线条拖动技术，大大提高了工作效率，降低了开发成本。

Description

在WEB化流程设计器中实现线条拖动的方法及装置

技术领域

本发明涉及流程设计技术领域，特别是一种在WEB化流程设计器中实现线条拖动的方法及装置。

背景技术

目前，大数据、云计算、移动互联网等新技术对国家管理和社会治理提出了全新课题与挑战，政务信息建设工作朝着电子化、自动化、智能化方向发展的路线已经越来越清晰。经过多年发展，电子政务已经深入到我国经济社会发展的各个领域，成为各级政府平稳运转和高效办公不可或缺的手段。随着信息化的深入发展，电子政务正在由业务办公的支撑工具，逐步成为促进重大改革措施贯彻实施、支撑重大问题决策研判、推动重点工作督查落实、提高服务人民群众水平的有效抓手，是提升政府治理能力必不可少的创新手段。为适应市场的变化与越来越高的要求，提升公司的办公效率和产品竞争力，公司OA产品的升级改造工作已经势在必行。

原有的旧OA流程设计器是10年前开发的一个工具，需要用户在本地下载安装C/S端的客户端，才能够使用，依赖性强，软件中的其他功能控件的安装维护工序繁琐，同时还要个人设置或者提供IE的信任站点的各选项启用，对IE环境依赖性很大，使得日常工作难度和工作量都大大提升了。已经无法满足新的信息时代用户的需求，因而能够在WEB页面上直接应用的流程设计器已经成为一种新的趋势。

但由于在WEB页面上直接应用流程设计器对技术要求较高，存在很大的实现难度，因而虽然目前在国内整个OA行业中，已经陆续出现了一些B/S端的流程设计器，但现有的B/S端架构还无法灵活的驾驭流程设计线条多折线、分段拖动技术。这往往会导致在应用的阶段产生成本高，效率低，耗时间等问题。

发明内容

为了解决上述问题，发明人构思从解决流程设计工具对客户端的依赖性，扩展性差，维护性成本高等问题出发，构建一种基于点对点，坐标对坐标的算法的线条，可以实现拖动、折叠、复制等功能。从而可以满足更复杂的多段线条拖动技术，大大提高了工作效率，降低了开发成本。

根据本发明的第一方面，提供了一种在WEB化流程设计器中实现线条拖动的方法，包括如下步骤：

对待拖动线条进行分段处理，并为分段后的待拖动线条添加辅助点；

通过辅助点接收拖动操作，获取拖动终点坐标；

根据拖动终点坐标绘制拖动后的线条。

根据本发明的第二方面，提供了WEB化流程设计器，包括：

拖动预处理模块，用于对待拖动线条进行分段处理，并为分段后的待拖动线条添加辅助点；

拖动处理模块，用于通过辅助点接收拖动操作，获取拖动终点坐标，根据拖动终点坐标绘制拖动后的线条。。

根据本发明提供了方法及装置，使得流程设计线条可以实现拖动、折叠、复制等功能，不依赖于客户端，可独立进行使用，降低了开发成本，效率高且节约时间。。

附图说明

图1为本发明一实施方式的在WEB化流程设计器中实现线条拖动的方法流程图；

图2为本发明一实施方式的WEB化流程设计器原理框图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。

本发明可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、元件、数据结构等等。也可以在分布式计算环境中实践本发明，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

在本发明中，“模块”、“装置”、“***”等指应用于计算机的相关实体，如硬件、硬件和软件的组合、软件或执行中的软件等。详细地说，例如，元件可以、但不限于是运行于处理器的过程、处理器、对象、可执行元件、执行线程、程序和/或计算机。还有，运行于服务器上的应用程序或脚本程序、服务器都可以是元件。一个或多个元件可在执行的过程和/或线程中，并且元件可以在一台计算机上本地化和/或分布在两台或多台计算机之间，并可以由各种计算机可读介质运行。元件还可以根据具有一个或多个数据包的信号，例如，来自一个与本地***、分布式***中另一元件交互的，和/或在因特网的网络通过信号与其它***交互的数据的信号通过本地和/或远程过程来进行通信。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”，不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

下面结合附图对本发明作进一步详细的说明。

图1示意性地显示了根据本发明的一种实施方式的在WEB化流程设计器中实现线条拖动的方法流程图，如图1所示，本实施例中包括如下步骤：

步骤S101：对待拖动线条进行分段处理，并为分段后的待拖动线条添加辅助点。

其中，待拖动线条是用户有可能要拖动的线条，具体实现时，将其定义为光标移动至的线条，即在用户将光标移动到某个线条上时，就将该线条确定为待拖动线条，为其添加辅助点，以方便用户通过辅助点进行线条的拖动。

具体实现时，根据鼠标事件来确定待拖动线条，例如通过OnMouseEnter的鼠标事件来获取当前光标所在的位置，通过预先将流程环节的所有的节点的坐标进行存储，以及根据获取到的当前光标所在的位置，来确定光标所在的线段，将其确定为待拖动线条。

为待拖动线条添加辅助点实现为：

首先，在确定了待拖动线条后，首先获取待拖动线条的端点坐标，包括第一端点坐标和第二端点坐标，由于预先存储了流程环节的所有节点的坐标，因而在确定了光标所在的线条后，就可以根据存储记录，获取到该线条的第一端点坐标和第二端点坐标。

其次，根据获取的的第一端点坐标和第二端点坐标计算待拖动线条的中点坐标，根据中点坐标将待拖动线条划分为第一线段和第二线段。其中，进行线段的划分，只是对待拖动线条进行分段标识，在实际处理中不会将待拖动线条拆分成两段，即不会对其分段，进行线段划分后，待拖动线条还是作为一个完整的线条存在，只是被标记为两段。

之后，分别为第一线段和第二线段添加辅助点。示例性地可以是通过获取第一线段和第二线段的中点坐标，在其中点坐标位置添加辅助点。

步骤S102：通过辅助点接收拖动操作，获取拖动终点坐标。

在对待拖动线条添加了辅助点之后，就可以通过拖动辅助点来实现对待拖动线条的拖动。其中，在拖动辅助点被释放时，会通过MouseLeave事件来获取释放鼠标时，辅助点被拖动到的最终坐标位置，从而获取到辅助点的拖动终点坐标，并计算出辅助点所在的线段的端点的拖动终点坐标。

由于在拖动过程中，还可能会由于被拖动线条与其他节点存在连接关系或在拖动过程中存在障碍节点等原因，而导致拖动后，被拖动线条发生折弯的情况，对于这种情况，还会获取折弯点的坐标。具体可以是通过将拖动终点坐标和被拖动线条的原始点坐标进行对比，计算出被拖动线条的实际坐标，并根据实际坐标绘制拖动后的线条。其中，获取折弯点的坐标的实现方式例如可以是：根据被拖动线条的两个端点的拖动终点坐标和被拖动线条的起始位置的第一端点坐标和第二端点坐标，计算拖动过程中经过的所有坐标点；获取页面上所有节点的坐标，根据拖动过程中经过的所有坐标点和页面上所有节点的坐标，判断拖动过程是否存在障碍节点，当判断存在障碍节点时，根据拖动方向和障碍节点的坐标，对障碍节点处对应的被拖动线条的点坐标进行调整，由此形成被拖动线条的障碍节点处的拖动终点坐标，并根据障碍节点处的拖动终点坐标和非障碍节点处的各点的拖动终点坐标，确定出折点的坐标。

优选地，还可以在通过MouseEnter捕获到鼠标移动到辅助点位置时，将辅助点和辅助点所在的待拖动线条均高亮显示，并将鼠标显示样式设置为拖动标识样式，例如为手形光标。这样，就能够让用户方便直观地看到线条是否可拖动，以及能够通过哪个坐标点进行拖动。

步骤S103：根据拖动终点坐标绘制拖动后的线条。

在捕获到MouseLeave事件时，经过步骤S102的拖动终点坐标计算后，就会根据计算出的拖动终点坐标进行线条的绘制，绘制出拖动后的线条状态。

本发明实施例的方法通过鼠标事件和点的坐标位置，对待拖动和被拖动的线条进行处理，使得B/S端的流程设计器的线条拖动技术更加流畅，且由于能够记录页面所有节点的坐标和基于拖动的辅助点的坐标变化来计算被拖动线条的端点坐标，以及能够根据所有节点的坐标和被拖动线条的各点坐标进行拖动终点的线条点坐标的动态处理，因而根据本发明实施例的方法，可以实现对拖动线条的随意拖动和折弯，实现了WEB化的流程设计器的优化，提升用户体验，使得WEB化的流程设计器能够得到广泛的应用，以适用新时代用户的需求。

优选地，在拖动辅助点的过程中，还可以根据MouseMove事件，获取辅助点的实时坐标位置，根据辅助点的实时坐标位置计算被拖动线条的两个端点的实时坐标位置，根据端点和辅助点的实时坐标位置，绘制出虚线线条，以友好地显示移动过程。

图2示意性地显示了根据本发明一实施方式的WEB化流程设计器原理框图，如图2所示，其能够实现线条的拖动处理，

其包括拖动预处理模块2、拖动处理模块4。

拖动预处理模块2用于对待拖动线条进行分段处理，并为分段后的待拖动线条添加辅助点。其实现为通过MouseEnter的鼠标事件来获取当前光标所在的位置，通过预先将流程环节的所有的节点的坐标进行存储，以及根据获取到的当前光标所在的位置，来确定光标所在的线段，将其确定为待拖动线条。为待拖动线条添加辅助点的实现方式可以参照上述的方法部分。

拖动处理模块4用于通过辅助点接收对被拖动线条的拖动操作，获取被拖动线条的拖动终点坐标，根据拖动终点坐标绘制拖动后的被拖动线条。

其中，拖动处理模块4包括实时绘制单元401和终点绘制单元402。

实时绘制单元401用于在拖动线条的过程中，获取被拖动线条的实时坐标信息，并根据实时坐标信息绘制移动虚线。

终点绘制单元402用于在将被拖动线条拖动到终点位置时，获取被拖动线条的拖动终点坐标，并根据拖动终点坐标重绘被拖动线条。其中，在拖动辅助点被释放时，会通过MouseLeave事件来获取释放鼠标时，辅助点被拖动到的最终坐标位置，从而获取到辅助点的拖动终点坐标，并计算出辅助点所在的线段的端点的拖动终点坐标。

用户在使用该WEB化流程设计器时，不依赖于客户端就可以执行线条的拖动操作，在用户使用前，拖动预处理模块2会先对当前界面的各线条做预处理，进行分段，并为分段后的线条增加辅助点，方便用户进行操作。之后用户在拖动线条时，可以通过拖动处理模块4实现各种拖动操作，例如绘制图形、计算坐标等操作。

根据本实施例的设计器，能够根据所有节点的坐标和被拖动线条的各点坐标进行拖动终点的线条点坐标的动态处理，因而根据本发明实施例的方法，可以实现对拖动线条的随意拖动和折弯，实现了WEB化的流程设计器的优化，提升了用户的体验感。

在优选实施方式中，还包括拖动提示模块3，其用于在捕获到鼠标移动到辅助点位置时，将辅助点和辅助点所在的待拖动线条均高亮显示，并将鼠标显示样式设置为拖动标识样式。示例性地，该拖动标识样式为手形光标。具体实现方式可以参照上述的方法部分实现。用户在使用该模块时，可以对于用户的操作进行辅助判断，帮助用户完成流畅的操作，根据该模块可以使用户在操作过程中更加流畅，能够让用户方便直观地看到线条是否可拖动，以及能够通过哪个坐标点进行拖动，提高了操作效率。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对相关技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。

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

Claims (10)

1.在WEB化流程设计器中实现线条拖动的方法，其特征在于，包括

对待拖动线条进行分段处理，并为分段后的待拖动线条添加辅助点；

通过所述辅助点接收被拖动线条的拖动操作，获取被拖动线条的拖动终点坐标；

根据被拖动线条的拖动终点坐标绘制拖动后的线条。

2.根据权利要求1所述的方法，其特征在于，所述对待拖动线条进行分段处理，并为分段后的线段添加辅助点包括

获取待拖动线条的第一端点坐标和第二端点坐标；

根据第一端点坐标和第二端点坐标计算线条的中点坐标；

根据中点坐标将待拖动线条划分为第一线段和第二线段；

分别为第一线段和第二线段添加辅助点。

3.根据权利要求2所述的方法，其特征在于，所述分别为第一线段和第二线段添加辅助点包括

获取第一线段和第二线段的中点坐标，分别在第一线段和第二线段的中点坐标位置添加辅助点。

4.根据权利要求3所述的方法，其特征在于，还包括：

在捕获到鼠标移动到辅助点位置时，将辅助点和辅助点所在的待拖动线条均高亮显示，并将鼠标显示样式设置为拖动标识样式。

5.根据权利要求4所述的方法，其特征在于，所述获取拖动终点坐标是通过鼠标事件捕获被拖动线条的端点和辅助点的拖动终点坐标以及折点坐标。

6.根据权利要求5所述的方法，其特征在于，还包括：

在绘制拖动后的线条时，还获取拖动过程中被拖动线条经过的所有坐标点；

获取页面上所有节点的坐标，根据拖动过程中被拖动线条经过的所有坐标点和页面上所有节点的坐标，判断拖动过程是否存在障碍节点，根据判断结果调整被拖动线条的拖动终点坐标和确定折点坐标；

根据调整后的拖动终点坐标和确定的折点坐标重绘被拖动线条。

7.WEB化流程设计器，其能够实现线条的拖动处理，其包括

拖动预处理模块，用于对待拖动线条进行分段处理，并为分段后的待拖动线条添加辅助点；

拖动处理模块，用于通过所述辅助点接收对被拖动线条的拖动操作，获取被拖动线条的拖动终点坐标，根据拖动终点坐标绘制拖动后的被拖动线条。

8.根据权利要求7所述的设计器，其特征在于，还包括

拖动提示模块，用于在捕获到鼠标移动到辅助点位置时，将辅助点和辅助点所在的待拖动线条均高亮显示，并将鼠标显示样式设置为拖动标识样式。

9.根据权利要求8所述的设计器，其特征在于，所述拖动标识样式为手形光标。

10.应用权利要求7至9任一项所述的，其特征在于，所述拖动处理模块包括

实时绘制单元，用于在拖动线条的过程中，获取被拖动线条的实时坐标信息，并根据实时坐标信息绘制移动虚线；

终点绘制单元，用于在将被拖动线条拖动到终点位置时，获取被拖动线条的拖动终点坐标，并根据拖动终点坐标重绘被拖动线条。