CN104461476B - 基于Metro的界面元素的重绘方法及装置 - Google Patents

Abstract

一种基于Metro的界面元素的重绘方法，包括：获取界面元素位移的偏移量；获取所述界面元素的变形属性；将所述偏移量赋值给所述界面元素的变形属性；根据所述变形属性调Metro界面渲染引擎对所述界面元素进行重绘。此外，还提供了一种基于Metro的界面元素的重绘装置。上述基于Metro的界面元素的重绘方法及装置减少了CPU的计算量从而提高了响应速度。

Description

基于Metro的界面元素的重绘方法及装置

技术领域

本发明涉及计算机技术领域，特别是涉及一种基于Metro的界面元素的重绘方法及装置。

背景技术

win8操作系统提供了Metro用户界面，在Metro界面中，通常可以在Metro窗口中或该窗口内以div等标签定义的界面元素中展示相应的可视化内容，可视化内容可以是图片、文字或视频。

然而，发明人经研究发现，传统技术中在基于Metro的界面元素在位置发生变化时至少存在如下问题：

基于Metro的界面元素位置发生移动时，通常采用传统技术中窗口移动时的界面重绘方法，即通过跟踪界面元素的位置，由CPU通过计算整个用户界面上所有界面元素的像素点来进行重绘，使得CPU计算量较大，从而造成界面元素中的可视化内容在移动中容易出现卡顿，响应速度较慢。

发明内容

基于此，有必要提供一种能够提高响应速度的基于Metro的界面元素的重绘方法。

一种基于Metro的界面元素的重绘方法，包括：

获取界面元素位移的偏移量；

获取所述界面元素的变形属性；

将所述偏移量赋值给所述界面元素的变形属性；

根据所述变形属性调用Metro界面渲染引擎对所述界面元素进行重绘。

此外，还有必要提供一种能够提高响应速度的基于Metro的界面元素的重绘装置。

一种基于Metro的界面元素的重绘装置，包括：

偏移量获取模块，获取所述界面元素位移的偏移量；

属性获取模块，用于获取所述界面元素的变形属性；

属性设置模块，用于将所述偏移量赋值给所述界面元素的变形属性；

界面重绘模块，用于根据所述变形属性调用Metro界面渲染引擎对所述界面元素进行重绘。

上述基于Metro的界面元素的重绘方法及装置，在界面元素的位置发生变化时，通过设置其变形属性并调用win8系统的Metro界面渲染引擎实现该界面元素所在的独立的显示层的重绘，从而实现了界面元素在metro界面上的移动效果。与传统技术相比，Metro界面渲染引擎重绘界面元素的操作由GPU处理，GPU在进行需要大量浮点计算的重绘操作时比CPU效率高，且Metro界面渲染引擎仅根据该界面元素的变形属性对其所在的独立的显示层进行了重绘，计算量也较小，使得CPU计算量减小，提高了响应速度，特别是在像素点较多的视频应用中不会由于视频应用对应的界面元素发生移动而产生卡顿。

附图说明

图1为一个实施例中基于Metro的界面元素的重绘方法的流程图；

图2为一个实施例中Metro下界面元素移动的界面示意图；

图3为一个实施例中Metro下拖动界面元素时进行重绘的方法的流程图；

图4为一个实施例中Metro下拖动界面元素的界面示意图；

图5为一个实施例中Metro下拖动界面元素的界面示意图；

图6为一个实施例中基于Metro的界面元素的重绘装置的结构示意图；

图7为另一个实施例中基于Metro的界面元素的重绘装置的结构示意图。

具体实施方式

在一个实施例中，如图1所示，一种基于Metro的界面元素的重绘方法，该方法完全依赖于计算机程序，该计算机程序可运行于win8系统上，该方法包括：

步骤S102，获取界面元素位移的偏移量。

Metro为win8系统中提供的图形接口界面，Metro的界面元素包括窗口和窗口元素以div标签定义的层元素。一个win8应用可在一个Metro窗口中或Metro窗口中以div标签定义的层元素中运行并展示可视化内容。例如，可以类型属性为video的div标签在Metro窗口中定义用于展示视频的层元素。

在一个实施例中，可获取与界面元素对应的界面元素移动指令；获取界面元素移动指令对应的移动位移，根据移动位移计算界面元素位移的偏移量。

如图2所示，例如，在win8的照片墙类型的应用中，若要将其对应的Metro窗口中某个展示照片的层元素在Metro窗口中移动，以产生动态效果从而带来更好的用户体验，则可根据预设的逻辑生成与该层元素对应的界面元素移动指令，该指令中可包含移动速度和方向。在接收到该界面元素移动指令后，则可根据移动速度和方向计算得到该层元素的坐标偏移的变化函数。

步骤S104，获取界面元素的变形属性。

在win8系统中，界面元素的变形属性即为界面元素的transform属性(3D转化属性)。GPU将具有变形属性的界面元素置于独立的显示层中，当界面元素的变形属性变化时，GPU可对该界面元素对应的显示层进行独立地处理，而不用改动其他的界面元素。

在一个实施例中，还可预先为界面元素初始化变形属性，即可获取界面元素加载事件，获取界面元素加载事件对应的界面元素；为界面元素添加变形属性。

例如，开发人员可在div标签定义的层元素的属性项中加入变形属性项。当该层元素被加载时，即可根据该属性项初始化变形属性。

在本实施例中，对于div标签定义的层元素，可在该div标签的属性项中获取变形属性。对于窗口元素，可在窗口元素的属性项中获取变形属性。

步骤S106，将偏移量赋值给界面元素的变形属性。

可根据偏移量重新确定界面元素的坐标，然后将其赋值给变形属性。界面元素的变形属性(即transform属性)包括移动属性项，即translate属性项，可将偏移量赋值给该变形属性下的translate属性项。而对于持续移动的界面元素，可根据其坐标随时间变化的函数持续调整变形属性。例如，在界面元素持续移动时，可定期抽样获取界面元素的坐标位置，并将该坐标位置赋值给变形属性下的translate属性项。

步骤S108，根据变形属性调用Metro界面渲染引擎对界面元素进行重绘。

将偏移量赋值给界面元素的变形属性后，可触发系统的属性更新事件，属性更新事件的事件响应函数即可调用win8系统的Metro界面渲染引擎(3D转换组件)的接口函数对该界面元素所在的显示层进行重绘，重绘的效果即为该界面元素在Metro界面上产生了移动效果。

在一个实施例中，获取界面元素加载事件对应的界面元素的步骤之后还包括：

为界面元素绑定拖动事件(drag事件)的事件响应函数。

拖动事件即用户通过鼠标按压住界面元素后发生拖动时触发的系统事件，对于配备触摸屏的win8超级本，用户也可以通过触摸按压界面元素进行拖动来触发拖动事件。可在界面元素的onDrag属性中绑定事件响应函数，当拖动事件触发后，则可自动调用该绑定的事件响应函数。

进一步的，获取界面元素位移的偏移量的步骤包括：

监听与界面元素对应的拖动事件；通过调用绑定的事件响应函数获取与拖动事件对应的拖动位移，根据拖动位移计算界面元素位移的偏移量。

在一个实施例中，如图3所示，一种基于Metro的界面元素的重绘方法，包括：

步骤S202，监听拖动事件。

步骤S204，获取拖动事件对应的界面元素，并跟踪获取拖动事件对应的光标位置。

步骤S206，根据拖动事件的光标位置计算界面元素的偏移量，获取界面元素的变形属性，并根据该偏移量持续调整该变形属性。

步骤S208，通过调用基于GPU运算的Metro界面渲染引擎调整界面元素在其对应的显示层上的位置。

如图4所示，对于Metro窗口中的层元素，用户先在层元素上按压鼠标左键并保持，然后，若用户不进行拖动操作而释放鼠标左键，则触发鼠标释放事件(mouseup事件)，而若用户拖动鼠标，则触发拖动事件(drag事件)。

用户触发拖动事件后，则可通过调用前述绑定的事件响应函数获取拖动事件中包含的信息得到拖动位移，然后可按照前述的定期抽样的方式得到层元素的坐标随时间变化函数，根据该坐标随时间变化函数持续调整变形属性。

例如，可跟踪获取拖动事件对应的光标位置从而计算得到偏移值。在Metro界面元素中，以像素坐标系的原点为显示界面的左上角，即若横向的偏移值(x属性)为正值，表示界面元素将向右移动，反之则向左移动；若纵向的偏移值(y属性)为正值，表示界面元素将向下移动，反之则向上移动。

如图5所示，对于Metro窗口，则由于与窗口元素对应的拖动事件已被绑定事件响应函数，因此，不会调用系统的拖动事件响应函数，而仅调用前述绑定的由应用开发人员定义的事件响应函数。

在一个实施例中，如图6所示，一种基于Metro的界面元素的重绘装置，包括：

偏移量获取模块102，获取界面元素位移的偏移量。

属性获取模块104，用于获取界面元素的变形属性；

属性设置模块106，用于将偏移量赋值给界面元素的变形属性；

界面重绘模块108，用于根据变形属性调用Metro界面渲染引擎对界面元素进行重绘。

在本实施例中，如图7所示，基于Metro的界面元素的重绘装置还包括属性添加模块110，用于获取界面元素加载事件，获取界面元素加载事件对应的界面元素；为界面元素添加变形属性。

在本实施例中，如图7所示，基于Metro的界面元素的重绘装置还包括事件绑定模块112，用于为界面元素绑定拖动事件的事件响应函数。

在本实施例中，偏移量获取模块102还用于监听与界面元素对应的拖动事件；通过调用绑定的事件响应函数获取与拖动事件对应的拖动位移，根据拖动位移计算界面元素位移的偏移量。

在一个实施例中，偏移量获取模块102还用于获取与界面元素对应的界面元素移动指令；获取界面元素移动指令对应的移动位移，根据移动位移计算界面元素位移的偏移量。

上述基于Metro的界面元素的重绘方法及装置，在界面元素的位置发生变化时，通过设置其变形属性并调用win8系统的Metro界面渲染引擎实现该界面元素所在的独立的显示层的重绘，从而实现了界面元素在metro界面上的移动效果。与传统技术相比，Metro界面渲染引擎重绘界面元素的操作由GPU处理，GPU在进行需要大量浮点计算的重绘操作时比CPU效率高，且Metro界面渲染引擎仅根据该界面元素的变形属性对其所在的独立的显示层进行了重绘，计算量也较小，使得CPU计算量减小，提高了响应速度，特别是在像素点较多的视频应用中不会由于视频应用对应的界面元素发生移动而产生卡顿。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random AccessMemory，RAM)等。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种基于Metro的界面元素的重绘方法，包括：

获取界面元素位移的偏移量；

获取所述界面元素的变形属性，所述界面元素的变形属性为所述界面元素的3D转化属性，图像处理器GPU将具有所述变形属性的所述界面元素置于独立的显示层，当所述界面元素的所述变形属性变化时，所述GPU可对所述界面元素对应的显示层进行独立地处理；

将所述偏移量赋值给所述界面元素的变形属性；

根据所述变形属性调用Metro界面渲染引擎对所述界面元素进行重绘。

2.根据权利要求1所述的基于Metro的界面元素的重绘方法，其特征在于，所述方法还包括：

获取界面元素加载事件，获取所述界面元素加载事件对应的界面元素；

为所述界面元素添加变形属性。

3.根据权利要求2所述的基于Metro的界面元素的重绘方法，其特征在于，所述获取所述界面元素加载事件对应的界面元素的步骤之后还包括：

为所述界面元素绑定拖动事件的事件响应函数。

4.根据权利要求3所述的基于Metro的界面元素的重绘方法，其特征在于，获取所述界面元素位移的偏移量的步骤包括：

监听与所述界面元素对应的拖动事件；

通过调用所述绑定的事件响应函数获取与所述拖动事件对应的拖动位移，根据所述拖动位移计算所述界面元素位移的偏移量。

5.根据权利要求1所述的基于Metro的界面元素的重绘方法，其特征在于，获取所述界面元素位移的偏移量的步骤包括：

获取与所述界面元素对应的界面元素移动指令；

获取所述界面元素移动指令对应的移动位移，根据所述移动位移计算所述界面元素位移的偏移量。

6.一种基于Metro的界面元素的重绘装置，其特征在于，包括：

偏移量获取模块，获取所述界面元素位移的偏移量；

属性获取模块，用于获取所述界面元素的变形属性，所述界面元素的变形属性为所述界面元素的3D转化属性，图像处理器GPU将具有所述变形属性的所述界面元素置于独立的显示层，当所述界面元素的所述变形属性变化时，所述GPU可对所述界面元素对应的显示层进行独立地处理；

属性设置模块，用于将所述偏移量赋值给所述界面元素的变形属性；

界面重绘模块，用于根据所述变形属性调用Metro界面渲染引擎对所述界面元素进行重绘。

7.根据权利要求6所述的基于Metro的界面元素的重绘装置，其特征在于，所述装置还包括属性添加模块，用于获取界面元素加载事件，获取所述界面元素加载事件对应的界面元素；为所述界面元素添加变形属性。

8.根据权利要求7所述的基于Metro的界面元素的重绘装置，其特征在于，所述装置还包括事件绑定模块，用于为所述界面元素绑定拖动事件的事件响应函数。

9.根据权利要求8所述的基于Metro的界面元素的重绘装置，其特征在于，所述偏移量获取模块还用于监听与所述界面元素对应的拖动事件；通过调用所述绑定的事件响应函数获取与所述拖动事件对应的拖动位移，根据所述拖动位移计算所述界面元素位移的偏移量。

10.根据权利要求6所述的基于Metro的界面元素的重绘装置，其特征在于，所述偏移量获取模块还用于获取与所述界面元素对应的界面元素移动指令；获取所述界面元素移动指令对应的移动位移，根据所述移动位移计算所述界面元素位移的偏移量。