CN104239606A - Web环境下支持触屏的UML建模方法与装置 - Google Patents

Abstract

本发明实施例提供一种Web环境下支持触屏的UML建模方法与装置。所述建模工具在Web环境下支持多点触控交互方式，包括表现层、交互处理层和存储层；所述表现层包括建模视图，所述建模视图用于在Web环境下获取用户的建模操作；所述交互处理层用于识别获取所述建模操作对应的输入方式；采用所述输入方式，执行对应的所述建模操作，生成所述建模元素，并根据所述建模元素生成模型，所述输入方式包括多点触控输入方式和手势轨迹输入方式；所述存储层包括存储模块，所述存储模块用于存储所述模型对应的建模文件。本发明实施例利用建模工具在Web环境下支持多点触控交互方式，解决了在不同的设备与平台上，支持多点触控的交互方式进行建模。

Description

Web环境下支持触屏的UML建模方法与装置

技术领域

本发明涉及通信技术，尤其涉及一种Web环境下支持触屏的UML建模方法与装置。 

背景技术

软件建模需要使用统一建模语言(Unified Modeling Language，UML)，该UML是一种绘制软件蓝图的标准语言。可以用UML对软件密集型系统的制品进行可视化、详述、构造和文档化。但是该UML离不开相应建模工具的支持。 

现有技术中的建模工具主要支持鼠标与键盘的输入方式，以及少数多点触控输入方式，但采用鼠标与键盘的输入方式进行建模会导致建模效率低，虽然，现有的建模工具支持多点触控输入方式，但是能够支持的多点触控输入方式非常有限，不能充分利用多点触控输入方式建模效率高的特性。 

另外，现有技术中的建模工具不支持跨平台、跨设备的建模操作，软件设计人员无法将桌面应用上的建模工作迁移到不同操作系统的移动设备上。造成用户在不同平台、不同设备上的使用困难，无法在不同平台上统一管理模型。 

因此，现有技术中缺少在Web环境下支持多点触控交互方式的建模工具。 

发明内容

本发明提供一种Web环境下支持触屏的UML建模方法与装置，以实现在不同的设备与平台上，支持多点触控的交互方式进行建模。 

本发明的一个方面是提供一种Web环境下支持触屏的UML建模工具，所述建模工具在Web环境下支持多点触控交互方式，包括： 

表现层，所述表现层包括建模视图，所述建模视图用于在Web环境下获取用户的建模操作； 

交互处理层，所述交互处理层用于识别获取所述建模操作对应的输入方式；采用所述输入方式，执行对应的所述建模操作，生成所述建模元素，并根据所述建模元素生成模型，所述输入方式包括多点触控输入方式和手势轨迹输入方式； 

存储层，所述存储层包括存储模块，所述存储模块用于存储所述模型对应的建模文件。 

本发明的另一个方面是提供一种Web环境下支持触屏的UML建模方法，包括： 

建模工具在Web环境下支持多点触控交互方式，获取用户的建模操作； 

所述建模工具识别获取所述建模操作对应的输入方式，所述输入方式包括多点触控输入方式和手势轨迹输入方式； 

所述建模工具采用所述输入方式，执行对应的所述建模操作，生成所述建模元素，并根据所述建模元素生成模型，以实现在不同的设备与平台上，支持多点触控的交互方式进行建模。 

本发明提供的Web环境下支持触屏的UML建模方法与装置，利用建模工具在Web环境下支持多点触控交互方式，解决了在不同的设备与平台上，支持多点触控的交互方式进行建模。 

附图说明

图1为本发明实施例提供的Web环境下支持触屏的UML建模工具的完整结构图； 

图2为本发明实施例提供的Web环境下支持触屏的UML建模工具中表现层的结构图； 

图3为本发明实施例提供的Web环境下支持触屏的UML建模工具中建模视图的结构图； 

图4为本发明实施例提供的Web环境下支持触屏的UML建模工具中建模视图图层的结构图； 

图5为本发明实施例提供的Web环境下支持触屏的UML建模工具中交互处理层的结构图； 

图6为本发明实施例提供的Web环境下支持触屏的UML建模方法流程图； 

图7为本发明实施例提供的Web环境下支持触屏的UML建模方法适用的多点触控识别流程图； 

图8为本发明实施例提供的Web环境下支持触屏的UML建模方法适用的多点触控识别流程图； 

图9为本发明实施例提供的Web环境下支持触屏的UML建模方法适用的单笔画轨迹识别流程图； 

图10为本发明实施例提供的Web环境下支持触屏的UML建模方法适用的多笔画轨迹识别流程图； 

图11为本发明实施例提供的Web环境下支持触屏的UML建模工具中存储层的结构图； 

图12a为本发明实施例提供的Web环境下支持触屏的UML建模工具支持的新增块状元素的手势示意图； 

图12b为本发明实施例提供的Web环境下支持触屏的UML建模工具支持的新增块状元素的手势示意图； 

图13a为本发明实施例提供的Web环境下支持触屏的UML建模工具支持的新增关系的手势示意图； 

图13b为本发明实施例提供的Web环境下支持触屏的UML建模工具支持的新增关系的手势示意图； 

图14a为本发明实施例提供的Web环境下支持触屏的UML建模工具支持的同时新增块状与关系的手势示意图； 

图14b为本发明实施例提供的Web环境下支持触屏的UML建模工具支持的同时新增块状与关系的手势示意图； 

图15为本发明实施例提供的Web环境下支持触屏的UML建模工具支持的修改块状建模元素对象的手势示意图； 

图16a为本发明实施例提供的Web环境下支持触屏的UML建模工具支持的修改关系类型的手势示意图； 

图16b为本发明实施例提供的Web环境下支持触屏的UML建模工具支持的修改关系类型的手势示意图； 

图16c为本发明实施例提供的Web环境下支持触屏的UML建模工具支持的修改关系类型的手势示意图； 

图16d为本发明实施例提供的Web环境下支持触屏的UML建模工具支持的修改关系类型的手势示意图； 

图16e为本发明实施例提供的Web环境下支持触屏的UML建模工具支持的修改关系类型的手势示意图； 

图17为本发明实施例提供的Web环境下支持触屏的UML建模工具支持的修改关系属性的手势示意图； 

图18a为本发明实施例提供的Web环境下支持触屏的UML建模工具支持的删除块状建模元素对象的手势示意图； 

图18b为本发明实施例提供的Web环境下支持触屏的UML建模工具支持的删除块状建模元素对象的手势示意图； 

图19a为本发明实施例提供的Web环境下支持触屏的UML建模工具支持的删除关系元素的手势示意图； 

图19b为本发明实施例提供的Web环境下支持触屏的UML建模工具支持的删除关系元素的手势示意图。 

具体实施方式

图1为本发明实施例提供的Web环境下支持触屏的UML建模工具的完整结构图。所述建模工具在Web环境下支持多点触控交互方式，如图1所示，本发明实施例提供的Web环境下支持触屏的UML建模工具60包括表现层61、交互处理层62和存储层63；表现层61包括建模视图611，建模视图611用于在Web环境下获取用户的建模操作；建模视图611包括模型图形模块611a，模型图形模块611a用于显示所述建模元素以及模型； 

交互处理层62用于识别获取所述建模操作对应的输入方式；采用所述输入方式，执行对应的所述建模操作，生成所述建模元素，并根据所述建模元素生成模型，所述输入方式包括多点触控输入方式和手势轨迹输入方式； 

存储层63包括存储模块631，存储模块631用于存储所述模型对应的建模文件。 

另外，建模视图611还包括文本编辑模块611b和轨迹捕获模块611c，文本编辑模块611b用于文本编辑，轨迹捕获模块611c用于捕获所述手势轨迹输入方式。所述建模操作包括新增建模元素、删除建模元素、修改建模元 素、移动建模元素和文本编辑。 

交互处理层62包括多点触控识别模块621、轨迹识别模块622和输入事件工厂623，多点触控识别模块621用于依据所述建模操作产生的触控事件类型判断所述输入方式为多点触控输入方式；轨迹识别模块622用于依据所述建模操作产生的路径的几何形状判断所述输入方式为手势轨迹输入方式；输入事件工厂623用相应手势所对应的事件逻辑，生成相应的视图与模型。 

存储层63还包括转换模块632和输出模块633，转换模块632用于将所述建模文件的格式转换为目标格式，输出模块633用于输出所述目标格式的所述建模文件，以使所述建模工具与支持所述目标格式的目标工具实现文件交互。 

在本发明实施例中所述建模元素包括建模元素对象和建模元素关系。 

本发明实施例利用建模工具在Web环境下支持多点触控交互方式，解决了在不同的设备与平台上，支持多点触控的交互方式进行建模。 

图2为本发明实施例提供的Web环境下支持触屏的UML建模工具中表现层的结构图。如图2所示，Canvas元素是HTML5中用于绘制图形的一种元素。在HTML页面中以<canvas>标签定义。但Canvas元素只是图形容器，必须使用脚本来绘制图形。通常通过getContext()方法获得一个用于在Canvas元素中绘图的绘图环境。Canvas元素与绘图环境是一对一的关系。本工具使用Canvas元素作为建模视图。 

由于HTML5本身为Canvas元素绘图环境提供的绘图方法不足，绘制建模元素所需的图形大都需要以自定义路径的形式实现，不利于后续的维护管理。因此，本工具使用KineticJS图形框架在Canvas元素的绘图环境中绘制图形。 

KineticJS是一个提供在Canvas元素中绘制图形的Canvas图形框架。而KineticJS本身是一个JavaScript脚本，用户可以通过使用KineticJS脚本在Canvas的绘图环境中绘制图形。 

经由建模元素图形的生成工厂在Canvas元素的绘图环境中所生成的Canvas内部图形包括用以表示建模元素对象的图形、文字等。因此，本工具的建模元素对象是由Canvas内部图形所组成。同时，Canvas内部图形也是作为触屏输入监听的监听对象。本发明实施例基于KineticJS建立建模元 素图形的生成工厂。 

图3为本发明实施例提供的Web环境下支持触屏的UML建模工具中建模视图的结构图。如图3所示，Web页面70包括建模视图611、模型树72和属性编辑器73，建模视图611是除了展示模型之外，也是用户新增、修改、删除、移动模型等操作的区域，支持用户多点触控的手势输入。模型树72、属性编辑器73等信息的展示与修改，只支持基本的触控操作，并不支持多点触控等操作。 

选择以Web页面的形式提供建模服务之后，选择采用HTML5技术作为视图。主要原因是目前各大主流浏览器都支持HTML5，并且支持的程度越来越高。另一方面，目前HTML5Canvas元素的绘图技术已经成熟，存在许多用于绘制Canvas图形的JavaScript开源框架。本发明实施例选择KineticJS图形框架作为建模视图611的图形框架，以Dojo作为工具基本界面以及模型树72、属性编辑器73的图形框架。 

建模视图611主要负责模型图形与用户的交互，分为类图、用框图、包图和构件图。建模视图611包括模型展示视图74，模型展示视图74主要负责建模元素对象的显示与识别用户对模型的基本操作，模型展示视图74包括文本编辑75、模型图形76和轨迹捕获77，模型图形76是一种HTML Canvas元素，经由JavaScript脚本语言可渲染出模型的矢量图形，将建模元素对象显示在视图上。文本编辑75是一个HTML Textbox元素，默认为隐藏状态，当用户触发模型为修改状态时Textbox才会在模型图形76中相应的位置上可见，供用户对模型信息进行修改，修改完成后再将信息传给模型图形76进行重新渲染图形。轨迹捕获77主要负责用户手势轨迹的显示。用户只要切换至手势轨迹识别状态下，在建模视图611中单指单击触屏所绘制出的轨迹都将可以可视化。用户在视图上的手势轨迹以及多点触控等手势在视图上都会有相应的视觉提示，并在用户完成相应的手势操作后自动消失。模型图形76包括形状78、线条79、图像80和文本81。 

图4为本发明实施例提供的Web环境下支持触屏的UML建模工具中建模视图图层的结构图。如图4所示，本发明实施例从图层的角度，将建模视图611分为模型对象层6111、文本编辑控件层6112和轨迹手势识别层6113，模型对象层6111用于捕捉用户的手势轨迹操作与显示建模元素对象，文本编 辑控件层6112用于管理建模元素的属性的文字信息，作为默认隐藏的编辑视图层，当用户触发编辑事件时，编辑图层就会自动显现至Canvas图层的顶端，供用户输入文字等操作，用户完成修改后自动刷新视图层。例如，当用户在类图中类的单指双击时，类进入编辑状态，类名称的位置上会浮现出一个包含类名称的Textbox控件供用户修改，用户完成修改单击视图其他区域后，文本编辑控件层6112恢复隐藏状态，再将修改后的信息传至Canvas类视图名称上，以解决HTML5Canvas作为图形元素不能直接编辑的问题。轨迹手势识别层6113专门用于捕获用户绘制的手势轨迹。 

图5为本发明实施例提供的Web环境下支持触屏的UML建模工具中交互处理层的结构图。如图5所示，本发明实施例使用Hammer触屏输入监听器提供的模块监听Canvas内部图形。Hammer提供的监听器主要分为触屏开始事件、触屏滑动事件、触屏结束事件等监听器，但由于建模手势中包含大量自定义的手势动作，Hammer提供的触屏输入监听事件只能作为识别建模手势的入口，需要自行对触屏输入事件类型与事件属性分析识别。因此，本发明实施例提供了轨迹手势识别器和多点触控识别器，轨迹手势识别器依据单笔画手势识别器和多笔画手势识别器进行轨迹手势识别。 

本发明实施例利用建模工具在Web环境下支持多点触控交互方式，解决了在不同的设备与平台上，支持多点触控的交互方式进行建模。 

图6为本发明实施例提供的Web环境下支持触屏的UML建模方法流程图。本发明实施例适用于在Web环境下，支持多点触控输入方式和手势轨迹输入方式触屏的UML建模方法，具体的建模方法步骤如下： 

步骤S101、建模工具在Web环境下支持多点触控交互方式，获取用户的建模操作； 

本发明实施例是在Web页面上，用户通过建模工具进行建模，用户在建模工具的建模视图中进行建模操作。 

步骤S102、所述建模工具识别获取所述建模操作对应的输入方式，所述输入方式包括多点触控输入方式和手势轨迹输入方式； 

建模工具识别用户在建模过程中输入建模操作的方式，用户可以通过多点触控输入方式和手势轨迹输入方式输入建模操作，也可以通过普通的键盘和鼠标方式输入建模操作，其中，多点触控指多个手指做的点击或触控动作， 手势轨迹指手指在触屏上持续滑动的轨迹。 

步骤S103、所述建模工具采用所述输入方式，执行对应的所述建模操作，生成所述建模元素，并根据所述建模元素生成模型，以实现在不同的设备与平台上，支持多点触控的交互方式进行建模。 

建模工具依据用户的输入方式生成与建模操作对应的模型元素与视图，经过一系列的建模操作最终由多个建模元素构成建模模型，产生与模型对应的建模文件。 

本发明实施例利用建模工具在Web环境下支持多点触控交互方式，解决了在不同的设备与平台上，支持多点触控的交互方式进行建模。 

在上述实施例的基础上，所述建模操作包括新增建模元素、删除建模元素、修改建模元素、移动建模元素和文本编辑。 

所述建模工具识别所述建模操作的输入方式包括：所述建模工具依据所述建模操作产生的触控事件类型判断所述输入方式为多点触控输入方式；或者所述建模工具依据所述建模操作产生的路径的几何形状判断所述输入方式为手势轨迹输入方式。 

所述建模工具存储所述模型对应的建模文件；将所述建模文件的格式转换为目标格式，并输出所述目标格式的所述建模文件，以使所述建模工具与支持所述目标格式的目标工具实现文件交互。 

所述建模元素包括建模元素对象和建模元素关系。 

本发明实施例利用建模工具在Web环境下支持多点触控交互方式，解决了在不同的设备与平台上，支持多点触控的交互方式进行建模。以下分别介绍多点触控识别和手势轨迹识别。 

图7为本发明实施例提供的Web环境下支持触屏的UML建模方法适用的多点触控识别流程图；如图7所示，先确定焦点对象，本发明实施例中的焦点对象具体指KineticJS图像对象，触屏输入监听器监听所述KineticJS图像对象，具体为监听事件和确定事件属性，监听事件包括触屏开始、触屏滑动和触屏结束，事件属性包括点数、方向、时间、组合手势、坐标、角度、中心以及手势轨迹等。在监听事件方面，除了可以使用KineticJS提供的on()方法设置输入事件监听外，目前最新版的Hammer的on()方法也支持对KineticJS图形对象的监听，并且两者互相兼容。KineticJS图形对象可设置 的输入事件类型包含了KineticJS与Hammer两者提供的并集，因此，统一使用Hammer对KineticJS图形对象设置多点触控事件监听函数，KineticJS图形对象的多点触控监听事件被触发之后将进一步被多点触控事件识别模块监听，以识别出多点触控事件。 

图8为本发明实施例提供的Web环境下支持触屏的UML建模方法适用的多点触控识别流程图。如8所示，在输入监听器监听到焦点对象的多点触控输入之后，分析触控输入为多点触控输入，输入监听器发送触控输入消息给多点触控识别模块。而触控消息进入多点触控识别模块之后，先借由触控输入监听器的基本监听事与输入消息属性初步进行手势判定，至此属于基础手势识别的分析过程。而对于在基础手势识别处理过程中尚未完成的手势判定将进入更为深入的高级手势识别分析过程。高级手势识别需要在基础手势识别的基础上，进一步分析输入消息属性，并逐步往下进行判定，以完成多点触控的识别工作。最后根据手势识别的判定结果再调用相应的手势事件处理函数。 

图9为本发明实施例提供的Web环境下支持触屏的UML建模方法适用的单笔画轨迹识别流程图。单笔画轨迹是指用户经由单指一笔画到底，手指离开触屏即结束绘制的手势轨迹。单笔画轨迹识别的过程如图9所示，当用户触发手势轨迹识别模式后，经由每个touchmove(触控移动)事件与holdon(触控持续)手势触控属性判断输入处于手势轨迹事件，从输入消息中获取用户相对于手势轨迹绘制区左上角的单指触控坐标。然后，再将这些坐标信息保存至二维数组中，使得用户手指所绘制出的轨迹得以被记录下来。最后再通过读取二维数组中各个坐标元素还原用户的手势轨迹以进行识别。在识别工作中，需要建立一个手势库用于管理工具中所有的单笔画手势轨迹。本建模工具的单笔画手势轨迹库是在$1原有手势库DollarRecognizer的基础之上自行加入了建模手势所需的单笔画手势轨迹建立而成。识别工作需要将保存着轨迹坐标的二维数组传入$1的Recognize方法以进行$1的数学模型算法识别手势库中的轨迹，若识别成功则返回在手势库中所定义的轨迹关键字。最后，系统调用findStrokeEventType()方法结合该关键字识别所对应的手势事件类型执行相应的手势事件。本建模工具中的单笔画手势轨迹包括创建建模元素对象与修改关系类型手势。本建模工具中创建建模元素对象的单笔 画手势轨迹如下表1所示，本建模工具中修改关系类型的单笔画手势轨迹如下表2所示。 

表1 

表2 

图10为本发明实施例提供的Web环境下支持触屏的UML建模方法适用的多笔画轨迹识别流程图。多笔画轨迹是指用户经由单指多个笔画，手指离开触屏后还能继续绘制，直到两秒之内都没有触控输入事件才结束绘制的手势轨迹。多笔画轨迹识别的过程与单笔画轨迹识别类似，如下图10所示，多笔画轨迹识别与单笔画轨迹识别的主要不同在于需要建立一个手势库用于管理工具中所有的多笔画轨迹。本建模工具的多笔画手势轨迹库是在$N原有手势库NDollarRecognizer的基础之上自行加入了建模手势所需的多笔画手势轨迹建立而成。识别工作需要将保存着轨迹坐标的二维数组传入$N的Recognize方法以进行$N的数学模型算法识别手势库中的轨迹，若识别成功则返回在手势库中所定义的轨迹关键字。本建模工具中修改关系类型的单笔画手势轨迹如下表3所示。 

表3 

本发明实施例利用建模工具在Web环境下支持多点触控交互方式，解决了在不同的设备与平台上，支持多点触控的交互方式进行建模。 

图11为本发明实施例提供的Web环境下支持触屏的UML建模工具中存储层的结构图。存储层主要负责模型存储、文件转换以及提供模型文件的交互接口等。为了在线保存建模元素，并利于用户对模型文件做进一步工作，将模型以常见的XML文件格式保存。XML，可扩展标记语言(eXtensible Markup Language)，是一种标记语言，也是目前W3C推荐的Web应用标准。XML类似于HTML，超文本标记语言的标记语言，但XML常用以传送机携带数据信息，不作为表现或展示数据，而HTML则主要用来表现数据。此外，本建模工具中 的建模元素在XML中以面向对象的方式保存，能直接映射问题域，便于用户直观的理解模型的属性。 

模型文件的存储方式主要以视图为最顶层单位，例如ClassDiagram表示类图、UseCaseDiagram表示用况图。在视图节点下，包含各视图中所包含的建模元素对象。而建模元素对象的存储分为块状元素与关系元素，块状元素包括类图中的类模型、用况图中的用况等，关系元素包括类图中的关联、用况图中的关系等。 

对于块状元素，其中type表示模型的元素类型，例如Class、UseCase等。Id是建模元素对象的唯一识别编码，此编码在整个模型文件中唯一。Name为建模元素对象的名称，可在建模工具的视图上查看。除了建模元素对象的基本属性之外，还包括样式与位置信息。Width表示建模元素对象的宽度，Height表示建模元素对象的高度，都是以像素为单位。X表示建模元素对象在建模工具上相对于视图左上角的横坐标，Y表示建模元素对象在建模工具上相对于视图左上角的纵坐标。Color表示建模元素对象在视图上的颜色。 

对于对象的属性与操作都是对象的成员，以属性集与方法集表示，属性集可以包含多个属性元素，方法集中可以包含多个方法元素。 

对于关系元素，以关系集表示对象间的关系，关系集可以包含多个关系。其中样式表示模型的关系类型，例如联系、继承等。Id是建模元素对象的唯一识别编码，此编码在整个模型文件中唯一。sourceIdb记录构成此关系源端元素的id，terminalId记录构成此关系目标端元素的id。除了建模元素对象的基本属性之外，还包括样式与位置信息。X1表示关系源端在建模工具上相对于视图左上角的横坐标，Y1表示关系源端在建模工具上相对于视图左上角的纵坐标，X2表示关系目标端在建模工具上相对于视图左上角的横坐标，Y1表示关系目标端在建模工具上相对于视图左上角的纵坐标。Color表示建模元素对象在视图上的颜色。样式表示建模元素对象在视图上的线条样式类型。 

本发明实施例利用建模工具在Web环境下支持多点触控交互方式，解决了在不同的设备与平台上，支持多点触控的交互方式进行建模。 

图12a为本发明实施例提供的Web环境下支持触屏的UML建模工具支持的新增块状元素的手势示意图；图12b为本发明实施例提供的Web环境下支 持触屏的UML建模工具支持的新增块状元素的手势示意图。形状是块状元素在直观上非常重要的特征，以建模元素对象的形状轮廓作为用户手势轨迹的识别依据，可以使用户在视图上非常形象的描绘出所要新建的建模元素对象。 

如图12a所示，用户双击视图空白区域，触发手势绘制区后，在视图上画一个矩形，用户手指离开触屏，视图上出现类。如图12b所示，其他以图形轮廓的手势设计，例如以相似用户图形的十字符号作为用况图中的参与者的手势识别轨迹，以类似用况图形的椭圆作为手势识别轨迹等。对于接口，为了区别类与接口的图形轮廓相似，以矩形轨迹多一撇来表示接口。其他以英文名称的手势设计，例如以接口英文Interface开头字母“I”作为在类图上新增一个接口的手势识别轨迹，以用况英文Usecase开头字母“u”作为在用况图上新增一个用况的手势识别轨迹，以用况英文Package开头字母“p”作为在用况图上新增一个用况的手势识别轨迹等。 

并且，考虑到对于建模元素对象手势的定义因人而异，不同的用户可能拥有不同的想法与需求，因此，需要开放这些手势轨迹的定义供用户进行修改。用户可通过工具上的模型手势自定义功能对工具中的手势进行修改。 

本发明实施例提供了用户以手势轨迹新增块状元素的手势。 

图13a为本发明实施例提供的Web环境下支持触屏的UML建模工具支持的新增关系的手势示意图；图13b为本发明实施例提供的Web环境下支持触屏的UML建模工具支持的新增关系的手势示意图。在建模的过程中，建立建模元素对象间的关系是非常频繁的操作，而传统不支持多点手势的建模工具上，需要在编辑建模元素与关系中频繁切换。引入了多点触控识别后，可以根据不同的手势识别，减免这些切换的操作。多点触控的利用，使得同一操作区域可以实现更多的操作，减少用户焦点的转移，操作更加流畅。并且，运用多点触控使得模型间关系的建立操作可视化，更加直观与易于理解。如图13a所示，用户将手指在Class1上长按超过1秒，手指由Class1滑向Class2，在Class2上离开触屏时，视图上新增一个由Class1至Class2的关联关系。此外，为了让用户了解在触屏环境上的操作情况，用户在触控相关的手势操作时，建模元素对象将发生相应的可视化效果。例如，用户以单指在类模型长按选择原端类以及滑向目标类模型时，该类的底色将变为蓝色、边框与字体加粗以表示识别出手势操作。用户绘制直线关联手势时也能看见 直线手势轨迹的可视化效果。类似的手势设计还包括用况图中用户与用况的关联建立，用况与用况的延伸与包含的建立等如图13b所示。 

本发明实施例提供了用户以手势轨迹新增关系的手势。 

图14a为本发明实施例提供的Web环境下支持触屏的UML建模工具支持的同时新增块状与关系的手势示意图；图14b为本发明实施例提供的Web环境下支持触屏的UML建模工具支持的同时新增块状与关系的手势示意图。在建模的过程中，存在一些使用频率高的操作，若这些操作本身就步骤复杂，用户就需要高频率的面对这些复杂的操作行为。利用多点触控的多元化操作组合，定义出更为多元的操作行为，以解决连续新增不同类型的建模元素对象这个操作行为，使得用户可以新增块状模型后新增与其相关的关系元素，减少高频操作的步骤。 

例如，在类图上新建一个类建模元素对象，并与已有的类模型之间建立一个关联关系，这是类图中非常常见的操作步骤，用户在目前常见的建模工具中要完成这个操作需要四个步骤。第一步在模型工具箱中选取类模型，第二步在视图上绘制一个新类的模型，第三步在模型工具箱中选取关联模型，第四步在视图上建立新类模型与其他类模型之间的关联。而使用多点触控输入方式后，实现这个行为，如图14a所示，用户只需简单的两个步骤。第一步用户将双指在Class1上长按超过1秒，第二步用户双指滑向Class1的右侧，即完成整个过程。视图上将在Class1的右侧用户滑动轨迹的最终位置新增一个与Class1相关联的Class2，并且用户在滑动的过程中可以改变Class2的位置。在可视化效果提示上，当用户将双指在Class1上长按超过1秒时，Class1的底色将改变为紫色，以提示识别出双指操作。当用户双指滑向Class1的右侧，视图上新增一个Class2的底色也是紫色，以提示该类模型为双指手势所新增。如图14b所示，类似的手势设计还包括用况图中用户与用况的关联建立等。 

本发明实施例提供了用户以手势轨迹同时新增类与关系的手势。 

图15为本发明实施例提供的Web环境下支持触屏的UML建模工具支持的修改块状建模元素对象的手势示意图。修改块状元素包括新增、删除、修改块状元素所包含的名称、属性等信息。用户在块状元素的触发区域内单指双击，块状元素即进入修改状态。在修改状态下，用户可直接单指单击该建模 元素对象的名称进行修改。对于类模型在修改状态下除了可以修改类名、属性名、操作名等文本名称之外，还可以单指单击属性或操作周围的新增或删除按钮以进行修改操作。如图15所示，用户单指双击Class1后手指离开触屏，Class1被触发为修改状态，属性与操作周围前出现新增与删除按钮，用户通过此操作管理Class1所拥有的属性与操作。当用户修改完成后，单指单击视图上其他空白区域，Class1退出修改状态。在可视化提示上，用户单指双击Class1后，类的底色由白色变为淡黄色，类名与边框变粗。 

本发明实施例提供了用户修改块状建模元素对象的手势。 

图16a为本发明实施例提供的Web环境下支持触屏的UML建模工具支持的修改关系类型的手势示意图；图16b为本发明实施例提供的Web环境下支持触屏的UML建模工具支持的修改关系类型的手势示意图；图16c为本发明实施例提供的Web环境下支持触屏的UML建模工具支持的修改关系类型的手势示意图；图16d为本发明实施例提供的Web环境下支持触屏的UML建模工具支持的修改关系类型的手势示意图；图16e为本发明实施例提供的Web环境下支持触屏的UML建模工具支持的修改关系类型的手势示意图。 

而在多点触控输入环境下，手势轨迹的形象化与多元化的特性适用于关系的类型修改操作。由于关系的种类多样，经由手势轨迹的形象化轨迹定义，可以将不同关系中的形状特征抽取出来以手势轨迹的方式与其匹配，使得用户在修改关系类型时以徒手绘制形象的轨迹来改变关系的类型。如图16a所示，以三角形轨迹作为修改为继承关系的手势，用户用单指在关联的某一端上单指双击，该端出现红色半透明手势绘制区，用户在此区域内端绘制了一个三角形轨迹，手指指离开视图，普通关联被修改为Class1继承自Class2，自动去除与新关联无关的信息。通过多点触控输入，修改不同种类型的关系无需要在属性列表或调色板进行重新选择，以形状轨迹的手势输入更符合人体手持笔自然建模的用户体验。在可视化效果表示上，当用户用单指在关联的某一端上单指双击后，关联变为红色、变粗示意，并在该端所属元素Class2的上方出现红色手势轨迹绘制区示意。 

如图16b-16e，类似的手势设计还有以圆形轨迹代表聚合的手势，以圆形多一撇代表组合的手势，以箭头代表关联的消息手势，以一撇代表普通关联的手势。 

本发明实施例提供了用户修改关系类型的手势。 

图17为本发明实施例提供的Web环境下支持触屏的UML建模工具支持的修改关系属性的手势示意图。关系上的属性包括此关系在所包含的语义信息，其中有部分显示在视图上的关系图形上。如图17所示，类图关联中的属性包括关联名称、多重性、角色名等，用户用单指双击ass1关系的某一端，触发ass1为修改状态，用户将名称修改为ass2，手指触碰视图其他区域完成修改，ass2退出修改状态。 

本发明实施例提供了用户修改关系属性的手势。 

图18a为本发明实施例提供的Web环境下支持触屏的UML建模工具支持的删除块状建模元素对象的手势示意图；图18b为本发明实施例提供的Web环境下支持触屏的UML建模工具支持的删除块状建模元素对象的手势示意图。目前本工具提供两种删除块状元素的方法，一种是以类似块状元素的对角线手势轨迹来删除建模元素；另一种为将块状元素托至视图上的垃圾桶区域。并且无论使用哪一种删除方式，该块状建模元素对象被删除时，与其相关的关系也自动被删除。如图18a所示，用户单指双击Class1后手指离开触屏，Class1改变为编辑状态，用户单指在视图上画一条类似穿过Class1的对角线后手指离开触屏，Class1以及与其相关的关系都会被删除。在可视化效果提示上，当用户单指在视图上画一条类似穿过Class1的对角线后，Class1底色改变为半透明灰色示意。除此之外，如图18b所示，用户单指Class1并向左拖动至垃圾桶触发区的上方，用户手指离开触屏，Class1以及与其相关的关系都会被删除。在可视化效果提示上，当用户将模块元素拖动至临近垃圾桶时，垃圾桶图示将变大，元素底色改变为半透明灰色示意。 

本发明实施例提供了用户删除块状建模元素对象的手势。 

图19a为本发明实施例提供的Web环境下支持触屏的UML建模工具支持的删除关系元素的手势示意图；图19b为本发明实施例提供的Web环境下支持触屏的UML建模工具支持的删除关系元素的手势示意图。考虑到保持工具中删除手势的一致性，删除关系元素的手势与删除块状元素相似，用户先单指双击触发关系元素的修改状态后，单指在视图上绘制与关系相交的直线即完成删除关系的操作，如图19a所示，用户在视图上单指双击Class1与Class2之间的关联ass1后，单指绘制一条直线相交于关联ass1，即完成对关联ass1 的删除。在可视化效果提示上，当用户单指双击触发关系元素的修改状态后，关联ass1将变换为红色示意为修改状态，用户在视图上所绘制的直线删除手势也可以在视图上看见。此外，如图19b所示，用户用单指双击关联某一端后，触发关系为编辑状态，此时关联名称的右侧会出现删除按钮，用户可通过删除按钮删除关系。 

本发明实施例提供了用户删除关系元素的手势。 

本领域普通技术人员可以理解：实现上述各方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成。前述的程序可以存储于一计算机可读取存储介质中。该程序在执行时，执行包括上述各方法实施例的步骤；而前述的存储介质包括：ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。 

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

Claims (10)

1.一种Web环境下支持触屏的UML建模工具，其特征在于，所述建模工具在Web环境下支持多点触控交互方式，包括：

表现层，所述表现层包括建模视图，所述建模视图用于在Web环境下获取用户的建模操作；

交互处理层，所述交互处理层用于识别获取所述建模操作对应的输入方式；采用所述输入方式，执行对应的所述建模操作，生成所述建模元素，并根据所述建模元素生成模型，所述输入方式包括多点触控输入方式和手势轨迹输入方式；

存储层，所述存储层包括存储模块，所述存储模块用于存储所述模型对应的建模文件。

2.根据权利要求1所述的Web环境下支持触屏的UML建模工具，其特征在于，所述建模操作包括新增建模元素、删除建模元素、修改建模元素、移动建模元素和文本编辑。

3.根据权利要求2所述的Web环境下支持触屏的UML建模工具，其特征在于，所述交互处理层包括多点触控识别模块和轨迹识别模块，所述多点触控识别模块用于依据所述建模操作产生的触控事件类型判断所述输入方式为多点触控输入方式；所述轨迹识别模块用于依据所述建模操作产生的路径的几何形状判断所述输入方式为手势轨迹输入方式。

4.根据权利要求3所述的Web环境下支持触屏的UML建模工具，其特征在于，所述存储层还包括转换模块和输出模块，所述转换模块用于将所述建模文件的格式转换为目标格式，所述输出模块用于输出所述目标格式的所述建模文件，以使所述建模工具与支持所述目标格式的目标工具实现文件交互。

5.根据权利要求1-4任一项所述的Web环境下支持触屏的UML建模工具，其特征在于，所述建模元素包括建模元素对象和建模元素关系。

6.一种Web环境下支持触屏的UML建模方法，其特征在于，包括：

建模工具在Web环境下支持多点触控交互方式，获取用户的建模操作；

所述建模工具识别获取所述建模操作对应的输入方式，所述输入方式包括多点触控输入方式和手势轨迹输入方式；

所述建模工具采用所述输入方式，执行对应的所述建模操作，生成所述建模元素，并根据所述建模元素生成模型，以实现在不同的设备与平台上，支持多点触控的交互方式进行建模。

7.根据权利要求6所述的方法，其特征在于，所述建模操作包括新增建模元素、删除建模元素、修改建模元素、移动建模元素和文本编辑。

8.根据权利要求7所述的方法，其特征在于，所述建模工具识别获取所述建模操作对应的输入方式包括：

所述建模工具依据所述建模操作产生的触控事件类型判断所述输入方式为多点触控输入方式；或者

所述建模工具依据所述建模操作产生的路径的几何形状判断所述输入方式为手势轨迹输入方式。

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

所述建模工具存储所述模型对应的建模文件，将所述建模文件的格式转换为目标格式，并输出所述目标格式的所述建模文件，以使所述建模工具与支持所述目标格式的目标工具实现文件交互。

10.根据权利要求6-9任一项所述的方法，其特征在于，所述建模元素包括建模元素对象和建模元素关系。