CN104346174B

CN104346174B - 一种在线矢量图建模过程的描述与重现方法

Info

Publication number: CN104346174B
Application number: CN201410662733.1A
Authority: CN
Inventors: 孙艳春; 陈德健; 黄罡
Original assignee: Peking University
Current assignee: Peking University
Priority date: 2014-11-19
Filing date: 2014-11-19
Publication date: 2017-12-29
Anticipated expiration: 2034-11-19
Also published as: CN104346174A

Abstract

本发明公开了一种在线矢量图建模过程的描述与重现方法。本发明的建模过程的描述是“高保真”的，一方面提取的具有建模语义的操作能够反映出全部或大部分底层事件的内涵，另一方面对于冗余的操作需要进行过滤；建模过程的重现是“自适应”的，一方面由于在线应用会不断更新，建模过程的重现能够适应这些变化以增强其健壮性和实用性，另一方面建模过程的重现能够便于修改和复用。本发明是于图形操作的抽象描述，对于带宽要求低；对网页版本的变化具有一定的适应性，能满足版本演化的时效性；所重现的操作都是对于实际模型的真实操作，用户很容易对模型进行修改和扩展，满足多种目的；实现的方式有内嵌方式和扩展方式两种，通用性较强。

Description

一种在线矢量图建模过程的描述与重现方法

技术领域

本发明涉及矢量图建模，尤其涉及一种在线矢量图建模过程的描述与重现方法。

背景技术

矢量图是根据几何特性来绘制图形，矢量可以是一个点或一条线，矢量图只能靠软件生成，文件占用内在空间较小，因为这种类型的图像文件包含独立的分离图像，可以自由无限制的重新组合。它的特点是放大后图像不会失真，和分辨率无关，适用于图形设计、文字设计和一些标志设计、版式设计等。

可缩放矢量图形(Scalable Vector Graphics，SVG)是基于可扩展标记语言(标准通用标记语言的子集)，用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。在线矢量图的实现一般是SVG。

随着Web2.0和HTML5等技术的普及，在线应用(Web applications)得到了迅速的发展。可缩放矢量图就是其中HTML5支持的一个标准，它为Web开发者提供了开发各类矢量图工具的基础。

矢量图有如下的一些优点：图像可通过文本编辑器来创建和修改；图像可被搜索、索引、脚本化或压缩；图像是可伸缩的；图像可在任何的分辨率下被高质量地打印；可在图像质量不下降的情况下被放大等等。

在具体应用上，矢量图建模在理工学科占有重要位置，如数学中的几何建模、软件工程中的软件建模等。目前有不少在线矢量图建模的工具，它们给用户提供了方便的建模环境，并能存储和共享建模结果。除了建模结果，建模过程也是十分重要的，它能够让用户更清晰地认识模型的动态变化，加深对模型的理解，便于及时发现模型中的错误。然而，目前很多在线建模工具在开发的时候并没有考虑动态建模过程的记录。因此，发明一种在线矢量图建模过程描述与重现方法是十分有意义的。

视频录制是解决在线矢量图建模过程重现的一种可选的方法。通过视频录制，教学者可以保存在线矢量图建模的全过程，并以视频资源的方式进行分享传播。获得视频资源的学习者可以通过播放视频来重现建模过程，达到学习的目的。

通过视频录制的方式来重现建模过程，有以下缺点：

(1)存储空间大：普通格式的视频大小一般在几百MB到几GB不等，在现有网络环境下受带宽、速度等限制不利于传播；

(2)清晰度不能保证：采用压缩技术去减少视频文件大小会导致分辨率下降，视频清晰度得不到保证；

(3)缺乏时效性：录制视频后，在线网站随时都可能更新导致视频失去时效性，因此提高了制作、维护的成本；

(4)缺乏扩展性：视频录制只是场景的重现，它不允许用户进行后续的扩展、不支持用户对真实模型的改动，因此缺少扩展性。

基于宏描述的网页操作流程的重现工具是另一种可选的方法。相关的技术例子有CoScripter，一个可以用于网页表单操作流程的录制与重现的工具。但是CoScripter有以下不足的地方：

(1)缺乏对图形特性的支持：CoScripter只支持页面表单(如文本框、按钮等)的处理过程的重现，但不能支持矢量图的操作，因为图形操作涉及的底层事件更多，操作语义更加复杂；

(2)缺少对页面变化的适应：网页很可能会不断升级，所描述的页面操作也应该对网页变化有一定的适应性。CoScripter目前还没有解决页面不断变化的情况。

发明内容

针对以上现有技术中存在的问题，本发明提出了一种在线矢量图建模过程的描述与重现方法。对于建模过程的描述，需要从大量的底层事件中，提取具有建模语义的操作，并去除冗余；对于建模过程的重现，需要适应网页的变化，并把具有建模语义的操作转化为相应的底层事件并执行。

本发明的目的在于提供一种在线矢量图建模过程的描述与重现方法。

本发明的在线矢量图建模过程的描述与重现方法，包括建模过程的描述以及建模过程的重现两部分，具体包括以下步骤：

一、建模过程的描述

1)图形操作的监测：监听器监听用户在浏览器上的行为，得到在浏览器上产生的所有动作事件；

2)图形操作的封装：分析器对已得到的所有动作事件，根据上下文语义，把动作事件封装成高层操作；

3)图形操作的优化：优化器实现图元位置变化的自适应，以及冗余操作的去除；

4)判断建模过程是否结束，如果建模过程不结束，返回步骤2)，如果建模过程结束，停止，建模过程的描述结束。

监听器是用于采集用户行为信息的程序构件，分析器是对已采集的信息进行分析处理的程序构件，优化器是对已分析的信息进行优质信息提取的程序构件。

为了解决建模过程的描述，需要对浏览器的事件进行抽象。本发明中，建模过程的描述是“高保真”的，一方面提取的具有建模语义的操作能够反映出全部或大部分底层事件的内涵；另一方面对于冗余的操作需要进行过滤。

在步骤1)中，图形操作监测的主要任务是监听用户在浏览器上的行为。目前主流的浏览器脚本语言通过事件处理模型实现跟浏览器之间的交互。为了准确反映图元操作，记录的动作事件是“高保真”的，例如一个简单的鼠标单击，需要监测按下(mousedown)，左击(click)，松开(mouseup)等事件，以保证动作记录的完整性。在此步骤中，监听器监听用户的行为具体包括以下步骤：

i.安装监听器：对于内嵌方式需要把监听器关联到页面，对于扩展方式需要通过扩展应用程序编程接口(Application Programming Interface)API增加监听器；

ii.对环境初进行始化；

iii.监听器不断捕获事件。

在步骤2)中，图形操作封装的主要任务是根据上下文语义，把动作事件封装成高层操作。例如鼠标事件松开(mouseup)，可以代表单击图元、拖动图元、改变图元大小等操作过程的一部分。因此，高层操作的封装是必要的，它反映了用户操作本身的内涵。对图形操作的封装，具体包括以下步骤：

i.求得当前动作事件的所有元素的属性集合A，以及位置序列L；

ii.求出当前动作事件的操作类型P；

iii.综合前两步得到的属性集合A、位置序列L和操作类型P，得到原始的高层操作。

其中，在步骤ii中，定义封装阶数k，表示通过最近的k个动作事件序列(包括当前)来决定操作类型P，一般地，k＝3或4就可以实现准确的映射，判断得到操作类型，满足映射规则，包括以下七种：

a)拖动图元：最近3个动作事件序列依次是鼠标按下、鼠标移动和鼠标松开，同时满足约束条件元素的坐标发生变化，从而得到拖动图元的操作；

b)调整图元的大小：最近三个动作事件序列依次是鼠标按下、鼠标移动和鼠标松开，同时满足约束条件元素的宽度或高度发生变化，从而得到调整图元大小的操作；

c)选择图元：最近2个动作事件序列依次是鼠标按下和鼠标松开，同时满足约束条件鼠标按键码＝1，从而得到选择图元的操作，即单击左键的操作；

d)触发菜单：最近2个动作事件序列依次是鼠标按下和鼠标松开，同时满足约束条件鼠标按键码＝2，从而得到触发菜单的操作，即单击右键的操作；

e)左键双击：最近3个动作事件序列依次是鼠标按下、鼠标松开和鼠标双击，同时满足约束条件鼠标按键码＝1，从而得到鼠标双击的操作；

f)输入字母：最近3个动作事件序列依次是鼠标按下、键盘敲击和键盘松开，同时满足约束条件键盘码＝字母/数字，从而得到输入字母的操作；

g)连续输入：最近3个动作事件序列依次是鼠标按下、键盘敲击和键盘松开，同时满足约束条件键盘码＝字母/数字，且连续保持不变，从而得到连续输入的操作，即不松开键盘的操作。

在步骤3)中，图形操作的优化的主要任务有两个：第一，冗余操作的去除，“高保真”指的并非记录全部操作，而是有效操作。例如，图元拖动过程中的一系列鼠标移动操作，只有在起点和终点的操作是有效的，中间操作可以合并优化。第二，图元位置变化的自适应，因为回放环境与记录环境存在差异，如屏幕分辨率、浏览器窗口大小等，如果采取绝对位置容易引起图元布局的不一致。本发明采取相对位置来解决此问题，即记录拖动前后的偏移量，以修正不同环境下图元位置显示的差异。在此步骤中，去除冗余操作具体包括：

a)文本输入：连续文本输入压缩成一个；

b)双击操作：出现一个双击，以前的一系列单击均去除；

c)鼠标移动：只记录起点和终点；

d)聚焦操作：附加到其他的操作中。

二、建模过程的重现

1)图形操作的解析：将高层操作转化成相应的动作事件，对高层操作进行逆向分解，得到一个或多个动作事件；

2)图形操作的定位：根据历史图形操作的描述特征，基于相似度匹配的“自适应”的定位方法，定位回放对象；

3)图形操作的模拟：创建事件对象并发布，在目标元素上执行事件；

4)判断建模过程是否结束，如果建模过程不结束，返回步骤1)，如果建模过程结束，停止，建模过程的重现结束。

建模过程的重现中，需要执行所描述的历史操作信息。针对图形环境的复杂性，本发明的建模过程的重现是“自适应”的，以保证其稳定性和健壮性。建模过程的重现是“自适应”的，一方面由于在线应用可能会不断更新，建模过程的重现能够适应这些变化以增强其健壮性和实用性；另一方面建模过程的重现能够便于修改和复用。

在步骤1)中，图形操作的解析的主要任务是把需要回放高层操作转化成相应的动作事件，通过“图形操作的封装”部分所描述的建立的操作类型映射进行逆向分解。在具体实现时，根据一、步骤2)对高层操作进行逆向分解，得到一个或多个事件，包括以下七种：

a)拖动图元操作：分解的3个事件依次是鼠标按下、鼠标移动和鼠标松开，并改变元素的坐标；

b)调整图元的大小：分解的3个事件依次是鼠标按下、鼠标移动和鼠标松开，并调整元素的宽度或高度；

c)选择图元：分解的2个事件依次是鼠标按下和鼠标松开，并设置鼠标按键码＝1；

d)触发菜单：分解的2个事件依次是鼠标按下和鼠标松开，并设置鼠标按键码＝2；

e)左键双击：分解的1个事件依次是鼠标双击，并设置鼠标按键码＝1；其中，原有的两个单击操作在一、步骤3)中已经被优化；

f)输入字母：分解的3个事件依次是鼠标按下、键盘敲击和键盘松开，并设置键盘码＝字母/数字；

g)连续输入：分解的3个事件序列依次是鼠标按下、文本输入(textInput)和键盘松开，并设置文本值＝输入内容；其中，连续的键盘操作在一、步骤3)中已经被优化。

在步骤2)中，根据历史图形操作的描述特征，定位回放对象。在具体实现时，本发明提出了一种基于相似度匹配的“自适应”的定位方法。

一个元素的特征包含两个方面：一方面，元素有自己的属性和文本，这是反映元素本体信息，称作内容特征；另一方面，元素位于DOM树中，有所属的层次，这是反映元素位置信息，称作环境特征。元素定位需要综合考虑内容特征和环境特征，但对于不同类型的元素所考虑侧重点不同。“自适应”的回放能够在两者之间作出合理的权衡。第一、表单元素以内容特征为主导进行定位。表单元素主要指链接、按钮、文本框、下拉框等进行页面浏览、提交数据等目的所交互的元素。它的主要特点是以数据为中心，例如链接地址、按钮文字、下拉框内容等，这些数据受布局、样式等影响很小。通过对数据的区分，把目标元素与其他元素区分开来。因此表单元素的定位应该以内容特征为主导。第二、图形元素以环境特征为主导进行定位。图形元素主要指矩形、椭圆、箭头等简单图元以及复合型的复杂图元。它的主要特点是以位置为中心，大量的属性都用以描述图元所处的环境，如大小、位置坐标、嵌套内容等，它们受布局、样式等影响很大，因此基于内容特征定位会非常不稳定。然而，图元之间的嵌套层次、相互关系却是稳定的，不随位置坐标、大小等的变化而变化。因此图形元素的定位以环境特征为主导。基于相似度匹配的“自适应”的定位方法具体包括以下步骤：

i.取出新页面中标签与目标元素一致的所有元素，形成子集N；

ii.依次取出集合N中的元素n，进行内容特征相似度C和环境特征相似度P的计算：

计算元素n的内容特征相似度C：设n的属性集合为A’，A中元素个数为m，对于A中每个元素ai(i＝1,2,…,m)，与A’中相应的属性进行匹配，特征值为fi，fi为任意正整数，关键属性比非关键属性特征值大，匹配值为bi，且0≤bi≤1，0为完全不匹配，1为完全匹配，计算C的公式如下：

计算元素n的环境特征相似度P：设n的位置序列为L’，长度为l’，L的长度为l，从L转化成L’的最少步数设为d，计算P的公式如下：

iii.计算总体相似度S：根据内容特征相似度C和环境特征相似度P，得到总体相似度S，如果n是表单元素，则设置WC>WP；如果n是图形元素，则设置WC<WP，计算S的公式如下：

S＝WC*C+WP*P

iv.总体相似度S与特征阈值F进行比较，如果总体相似度S超过阈值F，则算法结束，如果总体相似度S不超过特征阈值F，则返回步骤ii，其中，WC为内容特征权重，WP为环境特征权重。

在步骤3)中，图形操作的模拟，在具体实现时，对于内嵌模式通过操作模拟部件与页面相关联；对于扩展模式通过浏览器扩展API的事件发布机制完成。

本发明的优点：

(1)带宽要求低：本发明是基于图形操作的抽象描述，描述的结果是操作序列、以文本的形式存储和传输，因此对于带宽要求低；

(2)时效性高：本发明是基于相似度匹配的定位方法进行建模过程的重现，对网页版本的变化具有一定的适应性，能满足版本演化的时效性；

(3)扩展性强：本发明是基于现有的建模相关的Web应用，所重现的操作都是对于实际模型的真实操作，用户很容易对模型进行修改和扩展，满足多种目的；

(4)通用性强：本发明适用于任何采用在线可缩放矢量图SVG进行开发的Web应用，并且实现的方式有内嵌方式和扩展方式两种，通用性较强。

附图说明

图1为本发明的在线矢量图建模过程的描述与重现方法的流程图，其中，(a)是建模过程的描述的流程图；(b)建模过程的重现的流程图；

图2为本发明的建模过程的重现中的“自适应”的定位方法的流程图。

具体实施方式

下面结合附图，通过实施例对本发明做进一步说明。

一、建模过程的描述，如图1(a)所示：

1)图形操作的监测：监听用户在浏览器上的行为，得到在浏览器上的所有事件，具体包括：

i.安装监听器：对于内嵌方式需要把监听器关联到页面，对于扩展方式需要通过扩展API增加监听器；

ii.对环境初进行始化；

iii.监听器不断捕获事件；

监测到的动作事件序列用E[1],E[2],…,E[t],…表示，其中E[t]表示当前动作事件并随着时间不断推移。

2)图形操作的封装：根据上下文语义，把动作事件封装成高层操作，需要设计一套映射

规则，下表1给出了操作类型的映射表。

表1操作类型映射表ENC(封装阶数k＝3)

*注：事件序列中，t表示当前时刻，E[t]表示当前动作事件，E[t-1]表示前一个动作事件，以此类推

高层操作序列用S[1],S[2],…,S[i],…表示，其中S[i]表示当前高层操作，由元组<A,L,P>描述，A表示属性集合，L表示位置序列，P表示操作类型。操作类型P通过上下文语义映射得到，上下文语义包括动作事件序列E和约束条件C。封装函数ENC(Encapsulation)的定义如下：

其中，k是封装阶数，表示通过最近的k个动作事件序列(包括当前)来决定操作类型P。在本发明中，采用封装阶数k＝3。

3)图形操作的优化：优化器实现图元位置变化的自适应，以及冗余操作的去除。

对于冗余操作的去除，采用优化函数进行描述。优化函数OPT(Optimization)的定义如下：

OPT:S’[i],S[i-1],…,S[i-m]→S[i]

其中，S’[i]表示原始高层操作，S[i]表示优化后的高层操作，m是优化阶数，表示通过最近的m个高层操作序列(不包括当前)来优化当前高层操作。表示操作已被优化合并。

4)判断建模过程是否结束，如果不结束，重复步骤2)和3)，如果结束，停止，建模过程结束。

以上建模过程的描述可以用以下表2算法描述。

表2建模过程描述的算法

二、建模过程的重现，如图1(b)所示：

1)图形操作的解析：将高层操作转化成相应的动作事件，对高层操作进行逆向分解，得到一个或多个事件；在具体实现时，根据表1对高层操作进行逆向分解，得到一个或多个动作事件。

2)图形操作的定位：根据历史图形操作的描述特征，基于相似度匹配的“自适应”的定位方法，定位回放对象；表单元素以内容特征为主导进行定位；图形元素以环境特征为主导进行定位，表单元素定位和图形元素定位可以统一用下表3所述的算法来描述。

表3自适应的元素定位算法

自适应的定位方法的流程图如图2所示。

3)图形操作的模拟：创建事件对象并发布，在目标元素上执行事件；在具体实现时，对于内嵌模式通过操作模拟部件与页面相关联；对于扩展模式通过浏览器扩展API的事件发布机制完成。

最后需要注意的是，公布实施方式的目的在于帮助进一步理解本发明，但是本领域的技术人员可以理解：在不脱离本发明及所附的权利要求的精神和范围内，各种替换和修改都是可能的。因此，本发明不应局限于实施例所公开的内容，本发明要求保护的范围以权利要求书界定的范围为准。

Claims

1.一种在线矢量图建模过程的描述与重现方法，其特征在于，所述的描述与重现方法，包括建模过程的描述以及建模过程的重现两部分，具体包括以下步骤：

一、建模过程的描述

2)图形操作的封装：分析器对已得到的所有动作事件，根据上下文语义，把动作事件封装成高层操作，对图形操作的封装，具体包括以下步骤：

ii.求出当前动作事件的操作类型T；

iii.综合前两步得到的属性集合A、位置序列L和操作类型T，得到原始的高层操作；

在步骤ii中，定义封装阶数k，k＝3，判断得到操作类型，满足映射规则，包括以下七种：

e)左键双击：最近3个动作事件序列依次是鼠标按下、鼠标松开和鼠标双击，同时满足约束条件鼠标按键码＝1，从而得到鼠标的左键双击的操作；

f)输入字母/数字：最近3个动作事件序列依次是鼠标按下、键盘敲击和键盘松开，同时满足约束条件键盘码＝字母/数字，从而得到输入字母/数字的操作；

g)连续输入：最近3个动作事件序列依次是鼠标按下、键盘敲击和键盘松开，同时满足约束条件键盘码＝字母/数字，且连续保持不变，从而得到连续输入的操作，即不松开键盘的操作；

3)图形操作的优化：优化器实现图元位置变化的自适应，以及冗余操作的去除，去除冗余操作具体包括：

a)文本输入：连续文本输入压缩成一个；

b)双击操作：出现一个双击，以前的一系列单击均去除；

c)鼠标移动：只记录起点和终点；

d)聚焦操作：附加到其他的操作中；

4)判断建模过程是否结束，如果建模过程不结束，返回步骤2)，如果建模过程结束，停止，建模过程的描述结束；

二、建模过程的重现

1)图形操作的解析：将高层操作转化成相应的动作事件，对高层操作进行逆向分解，得到一个或多个动作事件，图形操作的解析包括以下七种：

f)输入字母/数字：分解的3个事件依次是鼠标按下、键盘敲击和键盘松开，并设置键盘码＝字母/数字；

g)连续输入：分解的3个事件序列依次是鼠标按下、键盘敲击和键盘松开，并设置文本值＝输入内容；

2.如权利要求1所述的描述与重现方法，其特征在于，在一、建模过程的描述的步骤1)中，监听器监听用户的行为具体包括以下步骤：

ii.对环境初进行始化；

iii.监听器不断捕获事件。

3.如权利要求1所述的描述与重现方法，其特征在于，在二、建模过程的重现的步骤2)中，基于相似度匹配的“自适应”的定位方法具体包括以下步骤：

S＝WC*C+WP*P

4.如权利要求1所述的描述与重现方法，其特征在于，在二、建模过程的重现的步骤3)中，图形操作的模拟，对于内嵌模式通过操作模拟部件与页面相关联；对于扩展模式通过浏览器扩展API的事件发布机制完成。