CN106547460A - 图形编排处理方法及装置 - Google Patents

Abstract

本发明公开了一种图形编排处理方法及装置，其中，该方法包括：获接收图形处理界面产生的触屏信息；解析出该触屏信息对应的预先定义的触屏动作；根据解析出的触屏动作确定对图形节点进行绘制的绘制动作；根据确定的该绘制动作对图形节点进行编排处理，解决了相关技术中不能在触摸屏上通过触摸实现对图形的编排处理问题，能够在触屏终端实现图形编排，提高了用户体验。

Description

图形编排处理方法及装置

技术领域

本发明涉及通信领域，具体而言，涉及一种图形编排处理方法及装置。

背景技术

WEB端图形化编排通常用于服务、业务、流程、网络资源等不同场合编排场景，将不同的资源抽象为各种图形节点，通过可视化设计器，对这些节点进行排布、连线、合并、拆分等编排操作。现有的WEB端图形化编排产品，多数基于鼠标的拖拽、单双击等事件进行操作，一旦脱离鼠标，基本无法使用，而触屏终端产品是未来的发展趋势，类似微软surface、苹果ipad等触屏产品使用人群日益增多。但是在没有鼠标接入的情况下，并不能在触摸屏上，通过触摸实现对图形的编排。

针对相关技术中不能在触摸屏上通过触摸实现对图形的编排处理问题，还未提出有效的解决方案。

发明内容

本发明提供了一种图形编排处理方法及装置，以至少解决相关技术中不能在触摸屏上通过触摸实现对图形的编排处理问题。

根据本发明的一个方面，提供了一种图形编排处理方法，包括：接收图形处理界面产生的触屏信息；解析出所述触屏信息对应的预先定义的触屏动作；根据解析出的触屏动作确定对图形节点进行绘制的绘制动作；根据确定的所述绘制动作对图形节点进行编排处理。

进一步地，接收图形处理界面产生的触屏信息包括：接收图形处理界面产生的多点触碰信息，其中，所述多点触碰信息包括以下至少之一：触碰开始、触碰移动、触碰结束、触碰取消。

进一步地，解析出所述触屏信息对应的预先定义的触屏动作包括：结合触碰起始位置、触碰位移信息以及触碰时间解析出所述触屏信息对应的符合预先定义的触屏动作。

进一步地，根据解析出的触屏动作确定对图形节点进行绘制的绘制动作包括：通过监听所述触屏动作，对所述触屏动作进行响应，并产生上下文信息，其中，所述上下文信息中携带有触屏动作所在位置、触屏动作的范围以及所述范围内图形的节点信息；汇总所述上下文信息，确定对图形节点进行编排的绘制动作。

进一步地，所述触屏信息对应的所述触屏动作包括：短触、长触、单触、双触、方向手势。

根据本发明的另一方面，还提供了一种图形编排处理装置，包括：接收模块，用于接收图形处理界面产生的触屏信息；解析模块，用于解析出所述触屏信息对应的预先定义的触屏动作；确定模块，用于根据解析出的触屏动作确定对图形节点进行绘制的绘制动作；编排模块，用于根据确定的所述绘制动作对图形节点进行编排处理。

进一步地，所述接收模块包括：接收单元，用于接收图形处理界面产生的多点触碰信息，其中，所述多点触碰信息包括以下至少之一：触碰开始、触碰移动、触碰结束、触碰取消。

进一步地，所述解析模块包括：解析单元，用于结合触碰起始位置、触碰位移信息以及触碰时间解析出所述触屏信息对应的符合预先定义的触屏动作。

进一步地，所述确定模块包括：响应单元，用于通过监听所述触屏动作，对所述触屏动作进行响应，并产生上下文信息，其中，所述上下文信息中携带有触屏动作所在位置、触屏动作的范围以及所述范围内图形的节点信息；汇总单元，用于汇总所述上下文信息，确定对图形节点进行编排的绘制动作。

进一步地，所述触屏信息对应的所述触屏动作包括：短触、长触、单触、双触、方向手势。

通过本发明，采用获接收图形处理界面产生的触屏信息；解析出所述触屏信息对应的预先定义的触屏动作；根据解析出的触屏动作确定对图形节点进行绘制的绘制动作；根据确定的所述绘制动作对图形节点进行编排处理，解决了相关技术中不能在触摸屏上通过触摸实现对图形的编排处理问题，能够在触屏终端实现图形编排，提高了用户体验。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1是根据本发明实施例的图形编排处理方法的流程图；

图2是根据本发明实施例的图形编排处理装置的框图；

图3是根据本发明优选实施例的图形编排处理装置的框图一；

图4是根据本发明优选实施例的图形编排处理装置的框图二；

图5是根据本发明优选实施例的图形编排处理装置的框图三；

图6是根据本发明实施例的获取移动应用快照装置的框图；

图7是根据本发明实施例的触屏终端实现图形绘制编排方法的流程图；

图8是根据本发明优选实施例的图形绘制编排的示意图一；

图9是根据本发明优选实施例的图形绘制编排的示意图二；

图10是根据本发明优选实施例的图形绘制编排的示意图三。

具体实施方式

下文中将参考附图并结合实施例来详细说明本发明。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。

本发明实施例提供了一种图形编排处理方法，图1是根据本发明实施例的图形编排处理方法的流程图，如图1所示，包括：

步骤S102，接收图形处理界面产生的触屏信息；

步骤S104，解析出该触屏信息对应的预先定义的触屏动作；

步骤S106，根据解析出的触屏动作确定对图形节点进行绘制的绘制动作；

步骤S108，根据确定的该绘制动作对图形节点进行编排处理。

通过上述步骤，获接收图形处理界面产生的触屏信息；解析出该触屏信息对应的预先定义的触屏动作；根据解析出的触屏动作确定对图形节点进行绘制的绘制动作；根据确定的该绘制动作对图形节点进行编排处理，解决了相关技术中不能在触摸屏上通过触摸实现对图形的编排处理问题，能够在触屏终端实现图形编排，提高了用户体验。

进一步地，接收图形处理界面产生的触屏信息可以包括：接收图形处理界面产生的多点触碰信息，其中，该多点触碰信息包括以下至少之一：触碰开始、触碰移动、触碰结束、触碰取消。

进一步地，解析出该触屏信息对应的预先定义的触屏动作可以包括：结合触碰起始位置、触碰位移信息以及触碰时间解析出该触屏信息对应的符合预先定义的触屏动作。

进一步地，根据解析出的触屏动作确定对图形节点进行绘制的绘制动作可以包括：通过监听该触屏动作，对该触屏动作进行响应，并产生上下文信息，其中，该上下文信息中携带有触屏动作所在位置、触屏动作的范围以及该范围内图形的节点信息；汇总该上下文信息，确定对图形节点进行编排的绘制动作。

上述的触屏信息对应的该触屏动作可以包括：短触、长触、单触、双触、方向手势等。

本发明实施例还提供了一种图形编排处理装置，图2是根据本发明实施例的图形编排处理装置的框图，如图2所示，包括接收模块22、解析模块24、确定模块26以及编排模块28，下面对各个模块进行进一步说明。

接收模块22，用于接收图形处理界面产生的触屏信息；

解析模块24，用于解析出该触屏信息对应的预先定义的触屏动作；

确定模块26，用于根据解析出的触屏动作确定对图形节点进行绘制的绘制动作；

编排模块28，用于根据确定的该绘制动作对图形节点进行编排处理。

图3是根据本发明优选实施例的图形编排处理装置的框图一，如图3所示，接收模块22包括：

接收单元32，用于接收图形处理界面产生的多点触碰信息，其中，该多点触碰信息包括以下至少之一：触碰开始、触碰移动、触碰结束、触碰取消。

图4是根据本发明优选实施例的图形编排处理装置的框图二，如图4所示，解析模块24包括：

解析单元42，用于结合触碰起始位置、触碰位移信息以及触碰时间解析出该触屏信息对应的符合预先定义的触屏动作。

图5是根据本发明优选实施例的图形编排处理装置的框图三，如图5所示，确定模块26包括：

响应单元52，用于通过监听该触屏动作，对该触屏动作进行响应，并产生上下文信息，其中，该上下文信息中携带有触屏动作所在位置、触屏动作的范围以及该范围内图形的节点信息；

汇总单元54，用于汇总该上下文信息，确定对图形节点进行编排的绘制动作。

上述的触屏信息对应的该触屏动作包括：短触、长触、单触、双触、方向手势。

下面结合具体实施例对本发明实施例进行进一步说明。

本发明实施例通过对触碰动作的解析、手势的识别、动作响应、图形计算等，主要解决WEB端图形化编排在触屏终端上高效使用的问题，提升了用户在触屏终端进行图形编排的用户体验。具体包括：图形设计器接收用户触碰界面产生的多点触碰信息，包括触碰开始、触碰移动、触碰结束、触碰取消四个基本事件，解析为图形设计器能识别的短触、长触、单触、双触、手势(方向)等触碰动作。图形设计器通过监听触碰动作，对用户的动作进行响应，产生上下文信息(动作、位置)，通过响应模块统一处理。响应模块汇总各触点上下文信息，确定图形节点绘制动作，设计器根据既定的绘制动作，对图形节点进行重绘编排。

图6是根据本发明实施例的获取移动应用快照装置的框图，如图6所示，包括触碰动作解析模块62、触碰动作监听模块64、触碰动作响应模块66以及图形节点重绘模块68，这些模块的功能由上述的接收模块22、解析模块24、确定模块26以及编排模块28部分或全部实现，下面对各个模块进行进一步说明。

触碰动作解析模块62，用于将接受触碰信息(touch事件)，将其转换为具体的触碰动作；

触碰动作监听模块64，用于预绑定对应的响应操作,监听模块1产生的动作；

触碰动作响应模块66，用于通过汇总动作所在位置、动作范围、范围内图形节点信息，确定要执行的绘制动作；

图形节点重绘模块68，用于接受绘制动作，对涉及图形节点进行重绘。

图7是根据本发明实施例的触屏终端实现图形绘制编排方法的流程图，如图7所示，支持触屏终端的图形编排方法主要包括以下步骤：

步骤S702，用户使用触屏终端访问图形设计器，用户在设计器内通过触碰及手势方式进行图形编排，这里的触碰和手势包括多点触碰和触碰后进行的手势动作。

步骤S704，触碰动作解析模块62解析触碰事件。

触碰动作解析模块62，用于解析用户触碰及手势动作信息，在支持触碰的WEB页面中，w3c规范中支持的事件只包括touchstart、touchmove、touchend、touchcancel四个，本模块需要监听多点触碰产生的多个事件，并转换为设计器能够理解的动作如滑动、按某方向滑动、单触、双触、长触、预定手势等动作。每个触碰事件都会包含触摸点相对于页面的位置，本模块结合触碰起始位置、触碰位移信息、触碰时间可解析识别出是否符合预定义的动作和手势。

图8是根据本发明优选实施例的图形绘制编排的示意图一，如图8所示，上下滑动手势动作，首先通过touchstart事件，获取到触碰起始位置信息(位置点1)，保存为x1，y1；其次在touchmove事件中，持续获取到触碰移动的信息(即位置点2,3,4)，保存为变量x2,y2,该变量随着滑动的位置不断更新，在滑动过程中通过判断x2-x1绝对差值，y2-y1绝对差值在某个误差范围(5px)保证正确的上下滑动动作被触发；最后在touchend事件中(位置点5)，通过检查x1与x2之间的绝对差值大于30px，并通过正负差值确定上下方向。在touchmove事件中，对于复杂手势这里需要记录多个位置信息，在touchend事件中，通过多个位置信息确定手势，其原理基本相似。

图9是根据本发明优选实施例的图形绘制编排的示意图二，如图9所示，根据时间间隔(100ms)取样记录多个滑动轨迹点位置[{x1,y1},{x2,y2}至{xn，yn}]形成多个点数组，并判定这多个点的都不在同一条直线上，触发圈选动作。其次，圈选动作的响应模块只需循环判断设计器中每个节点图形，组成图形框的每个点是否都在这个多点数组中(取多点位置数组中上下左右四个顶点，判断是否在其中)，如果图形节点的各个点都在该范围内，则实现选中效果。关于触碰时间的利用，以双触为例，本模块在touchstart时记录第一次触碰起始时间，第二次触碰时如果两次触碰的时间小于某个值(250ms)，则认为是双触，类似的大于某个值则认为是长触。

步骤S706，触碰动作监听模块64监听经过解析的动作。

触碰动作监听模块64，只监听解析模块产生的动作和手势，并通过预绑定对应的响应方法对动作进行响应，例如：轻触某节点并滑动的动作，绑定滑动连线响应模块，滑动。绑定操作在javascript实现中，可实现为多个callback方法。

步骤S708，触碰动作响应模块66对动作进行响应。

在web图形编排应用中，图形节点的展现无论是采用canvas、svg等技术，都可以获取每个图形节点的位置、节点面积大小。触碰动作响应模块66通过汇总动作所在位置、动作范围、范围内图形节点的信息，确定要执行的绘制动作。

图10是根据本发明优选实施例的图形绘制编排的示意图三，如图10所示，不同的响应模块对这些信息进行特定处理包括：

1、单个图形轻触滑动连线，当轻触滑动响应模块被调用时，模块判断动作起始位置在图形节点范围内，并且滑动距离不小于某值如(30px)，则执行以该节点为起始，触碰动作终点位置为终点的连线操作。

2、两个图形间连线，当触碰动作发生在两个图形节点上，并且滑动方向相对时，且滑动距离不小于某值(30px)，执行两个节点的连线动作。

3、单个图形的复制，当第一个触点动作是长触且触点范围在某图形上，第二触点动作起始点在图形范围内，且滑动距离大于某值，则执行图形复制动作，复制图形的位置在第二个触点的终点位置。

4、多点触碰同时连线，多个触点在不同的图形节点范围内，并滑动指向另一个图形，则执行多点同连的操作。

以上场景仅描述响应的部分场景，实际编排可根据复杂手势对响应模块进行进一步扩展，例如圈选手势，将圈选范围内图形全部选中；通过点选刷屏，进行批量节点创建等等。

步骤S710，图形绘制模块68根据绘制动作进行重绘。

图形绘制模块68根据绘制动作，绘制图形连线、图形节点，本模块采用的现有技术实现例如canvas，svg等html5支持的图形绘制技术。

与以往仅支持鼠标点击事件的WEB图形编排产品相比，上述方法具有如下特点：1)可在不改变原有web技术架构的前提下，利用对触碰事件的响应，实现对原有图形编排功能的扩展，适用于对触屏终端的功能优化。2)由于支持多点触碰的响应，在触屏终端可以定制更多不同的触碰动作和手势，支持对不同的动作进行图形的响应绘制，提升触碰设计的效率。通过上述方法，可以实现在触屏终端上，用户无需接入鼠标，只需基于手指的多点触碰，可以轻松高效的完成以往在PC端才能完成的图形编排任务，大大提升图形化编排产品在触屏终端的用户体验。

显然，本领域的技术人员应该明白，上述的本发明的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本发明不限制于任何特定的硬件和软件结合。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种图形编排处理方法，其特征在于，包括：

接收图形处理界面产生的触屏信息；

解析出所述触屏信息对应的预先定义的触屏动作；

根据解析出的触屏动作确定对图形节点进行绘制的绘制动作；

根据确定的所述绘制动作对图形节点进行编排处理。

2.根据权利要求1所述的方法，其特征在于，接收图形处理界面产生的触屏信息包括：

接收图形处理界面产生的多点触碰信息，其中，所述多点触碰信息包括以下至少之一：触碰开始、触碰移动、触碰结束、触碰取消。

3.根据权利要求1所述的方法，其特征在于，解析出所述触屏信息对应的预先定义的触屏动作包括：

结合触碰起始位置、触碰位移信息以及触碰时间解析出所述触屏信息对应的符合预先定义的触屏动作。

4.根据权利要求1所述的方法，其特征在于，根据解析出的触屏动作确定对图形节点进行绘制的绘制动作包括：

通过监听所述触屏动作，对所述触屏动作进行响应，并产生上下文信息，其中，所述上下文信息中携带有触屏动作所在位置、触屏动作的范围以及所述范围内图形的节点信息；

汇总所述上下文信息，确定对图形节点进行编排的绘制动作。

5.根据权利要求1至4中任一项所述的方法，其特征在于，所述触屏信息对应的所述触屏动作包括：短触、长触、单触、双触、方向手势。

6.一种图形编排处理装置，其特征在于，包括：

接收模块，用于接收图形处理界面产生的触屏信息；

解析模块，用于解析出所述触屏信息对应的预先定义的触屏动作；

确定模块，用于根据解析出的触屏动作确定对图形节点进行绘制的绘制动作；

编排模块，用于根据确定的所述绘制动作对图形节点进行编排处理。

7.根据权利要求6所述的装置，其特征在于，所述接收模块包括：

接收单元，用于接收图形处理界面产生的多点触碰信息，其中，所述多点触碰信息包括以下至少之一：触碰开始、触碰移动、触碰结束、触碰取消。

8.根据权利要求6所述的装置，其特征在于，所述解析模块包括：

解析单元，用于结合触碰起始位置、触碰位移信息以及触碰时间解析出所述触屏信息对应的符合预先定义的触屏动作。

9.根据权利要求6所述的装置，其特征在于，所述确定模块包括：

响应单元，用于通过监听所述触屏动作，对所述触屏动作进行响应，并产生上下文信息，其中，所述上下文信息中携带有触屏动作所在位置、触屏动作的范围以及所述范围内图形的节点信息；

汇总单元，用于汇总所述上下文信息，确定对图形节点进行编排的绘制动作。

10.根据权利要求6至9中任一项所述的装置，其特征在于，所述触屏信息对应的所述触屏动作包括：短触、长触、单触、双触、方向手势。