CN103679777A

CN103679777A - 一种页面遮罩的实现方法及装置

Info

Publication number: CN103679777A
Application number: CN201210330093.5A
Authority: CN
Inventors: 邹琦; 李榕
Original assignee: Tencent Technology Shenzhen Co Ltd
Current assignee: Tencent Technology Shenzhen Co Ltd
Priority date: 2012-09-07
Filing date: 2012-09-07
Publication date: 2014-03-26
Also published as: WO2014036927A1; US20150187095A1

Abstract

本发明公开了一种页面遮罩的实现方法及装置，属于移动终端领域。方法：获取需显示遮罩的页面的页面信息；页面信息包括，需显示遮罩的页面的高度、宽度、以及至少一个需通过遮罩镂空显示的页面元素在页面中的位置区域；根据页面信息，在页面上绘制相应的镂空的遮罩，以通过遮罩上的镂空位置显示页面元素。装置：获取模块，用于获取需显示遮罩的页面的页面信息；页面信息包括，需显示遮罩的页面的高度、宽度、以及至少一个需通过遮罩镂空显示的页面元素在页面中的位置区域；绘制模块，用于根据页面信息，在页面上绘制相应的镂空的遮罩，以通过遮罩上的镂空位置显示页面元素。本发明通过镂空的遮罩显示页面元素，减少维护工作量；实现方法比较简单。

Description

一种页面遮罩的实现方法及装置

技术领域

本发明涉及移动终端领域，特别涉及一种页面遮罩的实现方法及装置。

背景技术

遮罩式页面为布置有页面遮罩的页面，主要用于将用户的注意力吸引至展示在遮罩之上的内容。页面遮罩的运用非常广泛，其中有一种将页面遮罩运用于引导用户关注页面上展示的特定页面元素。

例如，假设某页面设置了一个新功能，移动光标至用户头像可显示用户的地理位置。在该页面上采用遮罩来引导用户关注该新功能。参见图1，遮罩式页面表现为，除了用户头像外，页面的其他区域被蒙上了半透明度的黑色画布，即遮罩，使得用户首先关注到通过遮罩镂空显示的用户头像。参见图2，现有实现该遮罩的方法具体为，首先，以该页面为背景，绘制覆盖整个页面的遮罩；然后，以遮罩为背景，对应于需通过遮罩镂空显示的页面元素在页面中的位置，绘制页面元素的拷贝，使页面元素的拷贝展示在遮罩上方。

在实现本发明的过程中，发明人发现现有技术至少存在以下问题：

一方面，页面中每更换或增加一个页面元素，均需制作相应的拷贝，增加了维护工作量。另一方面，绘制页面元素的拷贝后，还需使页面元素的拷贝与页面上的页面元素的位置相同，使得该实现方法较为复杂。

发明内容

为了解决现有技术的问题，本发明实施例提供了一种页面遮罩的实现方法及装置。所述技术方案如下：

一方面，提供了一种页面遮罩的实现方法，所述方法包括：

获取需显示遮罩的页面的页面信息；

所述页面信息包括，所述需显示遮罩的页面的高度、宽度、以及至少一个需通过遮罩镂空显示的页面元素在所述页面中的位置区域；

根据所述页面信息，在所述页面上绘制镂空的遮罩，以通过所述遮罩上的镂空位置显示所述页面元素。

其中，所述根据所述页面信息，在所述页面上绘制相应的镂空的遮罩，包括：

在所述页面上绘制高度和宽度分别为所述页面的高度和宽度的遮罩；

获取所述遮罩上与所述至少一个需通过遮罩镂空显示的页面元素在所述页面中的位置区域重叠的区域；

去除所述重叠的区域显示的遮罩，使形成镂空的遮罩。

将所述重叠的区域显示的遮罩的透明度设置为100%。

其中，所述方法还包括：

为获取的所述遮罩上的每一个重叠的区域设置相应的虚拟点击事件。

其中，为获取的所述遮罩上的每一个重叠的区域设置相应的虚拟点击事件之后，还包括：

获取滑动轨迹的最后触点的页面坐标；

判断所述页面坐标是否位于所述重叠的区域；

若是，则响应所述重叠的区域对应的虚拟点击事件。

另一方面，提供了一种页面遮罩的实现装置，所述装置包括：

获取模块，用于获取需显示遮罩的页面的页面信息；

绘制模块，用于根据所述页面信息，在所述页面上绘制相应的镂空的遮罩，以通过所述遮罩上的镂空位置显示所述页面元素。

其中，所述绘制模块包括：

第一绘制单元，用于在所述页面上绘制高度和宽度分别为所述页面的高度和宽度的遮罩；

第一获取单元，用于获取所述遮罩上与所述至少一个需通过遮罩镂空显示的页面元素在所述页面中的位置区域重叠的区域；

去除单元，用于去除所述重叠的区域显示的遮罩，使形成镂空的遮罩。

其中，所述绘制模块包括：

第二绘制单元，用于在所述页面上绘制高度和宽度分别为所述页面的高度和宽度的遮罩；

第二获取单元，用于获取所述遮罩上与所述至少一个需通过遮罩镂空显示的页面元素在所述页面中的位置区域重叠的区域；

设置单元，用于将所述重叠的区域显示的遮罩的透明度设置为100%。

其中，所述装置还包括：

事件模块，用于获取所述遮罩上与所述至少一个需通过遮罩镂空显示的页面元素在所述页面中的位置区域重叠的区域；

其中，所述装置还包括：

响应模块，用于获取滑动轨迹的最后触点的页面坐标；

判断所述页面坐标是否位于所述重叠的区域；

若是，则响应所述重叠的区域对应的虚拟点击事件。

本发明实施例提供的技术方案带来的有益效果是：通过先获取需显示遮罩的页面的页面信息；所述页面信息包括，所述需显示遮罩的页面的高度、宽度、以及至少一个需通过遮罩镂空显示的页面元素在所述页面中的位置区域；然后根据所述页面信息，在所述页面上绘制相应的镂空的遮罩，以通过所述遮罩上的镂空位置显示所述页面元素；能够不必拷贝页面元素，仅通过镂空的遮罩来实现在遮罩上显示页面的页面元素，减少了维护工作量；且该实现方法比较简单。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明背景技术提供的遮罩式页面的示意图；

图2是本发明背景技术提供的现有页面遮罩的示意图；

图3是本发明实施例一提供的一种页面遮罩的实现方法的流程图；

图4是本发明实施例二提供的一种页面遮罩的实现方法的流程图；

图5是本发明实施例二提供的页面遮罩的示意图；

图6是本发明实施例三提供的一种页面遮罩的实现方法的流程图；

图7是本发明实施例四提供的一种页面遮罩的实现装置的示意图；

图8是本发明实施例五提供的一种页面遮罩的实现装置的示意图；

图9是本发明实施例六提供的一种页面遮罩的实现装置的示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明实施方式作进一步地详细描述。

实施例一

本发明实施例提供了一种页面遮罩的实现方法，参见图3，方法流程包括：

101：获取需显示遮罩的页面的页面信息。

其中，该页面信息包括，该需显示遮罩的页面的高度、宽度、以及至少一个需通过遮罩镂空显示的页面元素在该页面中的位置区域。

102：根据该页面信息，在该页面上绘制相应的镂空的遮罩，以通过该遮罩上的镂空位置显示该页面元素。

本实施例提供的上述方法带来的有益效果是：通过先获取需显示遮罩的页面的页面信息；所述页面信息包括，所述需显示遮罩的页面的高度、宽度、以及至少一个需通过遮罩镂空显示的页面元素在所述页面中的位置区域；然后根据所述页面信息，在所述页面上绘制相应的镂空的遮罩，以通过所述遮罩上的镂空位置显示所述页面元素；能够不必拷贝页面元素，仅通过镂空的遮罩来实现在遮罩上显示页面的页面元素，减少了维护工作量；且该实现方法比较简单。

实施例二

本发明实施例提供了一种页面遮罩的实现方法，参见图4～图5，方法流程包括：

201：获取需显示遮罩的页面的页面信息。

其中，需显示遮罩的页面可以为应用客户端（例如浏览器）显示的任一页面。一般地，页面遮罩适于布置在应用客户端显示的首页。具体地，可以在应用的页面文件中获取该需显示遮罩的页面的高度和宽度。

其中，每一个页面包括若干页面元素，例如背景、标题栏、动作按钮、标签和图标等。根据实际需要，在需显示遮罩的页面中，选择至少一个需通过遮罩镂空显示的页面元素。获取这些页面元素在需显示遮罩的页面中的位置区域。该位置区域具体为页面元素在页面中的页面坐标。

202：根据该页面信息，在该页面上绘制相应的镂空的遮罩，以通过该遮罩上的镂空位置显示页面元素。

进一步地，本步骤包括：

2021：在该页面上绘制高度和宽度分别为该页面的高度和宽度的遮罩。

其中，遮罩需将整个页面覆盖。因此，遮罩的高度和宽度与该页面的高度和宽度相同。具体地，可采用HTML中<canvas>标签和相应的脚本绘制遮罩。还可以采用其他现有技术手段绘制遮罩，在此不再详述。值得说明的是，本发明实施例中不限定遮罩的色彩和明度。但是，遮罩的透明度最好应不大于50%。

2022：获取遮罩上与至少一个需通过遮罩镂空显示的页面元素在页面中的位置区域重叠的区域。

其中，完成绘制遮罩后，获取遮罩上与需通过遮罩镂空显示的页面元素在页面中的位置区域重叠的区域。具体地，在遮罩上选取与需通过遮罩镂空显示的页面元素在页面中的页面坐标相同的页面坐标，页面坐标围成的区域即为重叠的区域。

2023：去除该重叠的区域显示的遮罩，使形成镂空的遮罩。

其中，选定该区域显示的遮罩后，删除这部分遮罩，使遮罩上分布镂空位置。这时，需通过遮罩镂空显示的页面元素能够通过相应的镂空位置被呈现出来。具体地，可利用<canvas>标签的Compositing属性，将该重叠的区域显示的遮罩去除。首先勾勒重叠区域的轮廓，并进行实色的填充；然后把每一个填充后的重叠区域的Compositing属性调为destination-out，这样就能够实现镂空的效果。

此处还有一个细节，采用<canvas>标签绘制的遮罩虽然是采用矢量绘制，但显示在屏幕上却是按像素显示的。为了使<canvas>标签绘制的遮罩能在高分辨率设备上不出现模糊，必须把<canvas>标签绘制的遮罩使用2倍大小渲染，然后再把<canvas>标签缩小为0.5倍，这样就可以在高分辨率设备上获得较为完美的现实效果。

203：在遮罩上设置虚拟点击事件。

进一步地，本步骤包括：

2031：获取遮罩上与至少一个需通过遮罩镂空显示的页面元素在页面中的位置区域重叠的区域。

具体地，本步骤同2022，在此不再详述。

2032：为获取的遮罩上每一个重叠的区域设置相应的虚拟点击事件。

其中，虚拟点击事件用于人机交互。屏幕显示遮罩页面后，用户能够通过触屏等现有方式点击遮罩镂空显示的页面元素。这时，需要给用户一个回应，例如一个提示窗口。因此，需为遮罩上镂空显示页面元素的镂空区域设置相应的虚拟点击事件。具体地，设置方式为现有技术，在此不再详述。

值得说明的是，本步骤可在2022后执行。

204：响应区域对应的点击事件。

进一步地，本步骤包括：

2041：获取滑动轨迹的最后触点的页面坐标。

具体地，显示遮罩后，实时检测用户在屏幕上的滑动轨迹，该滑动轨迹包括最后触点。获取该最后触点的页面坐标。

2042：判断该页面坐标是否位于遮罩上与至少一个需通过遮罩镂空显示的页面元素在页面中的位置区域重叠的区域。

若是，则响应该区域对应的虚拟点击事件；若否，则检测滑动轨迹。

具体地，将该页面坐标与镂空区域的页面坐标进行比对。若该页面坐标落入了镂空区域，则响应该镂空区域对应的虚拟点击事件。若该页面坐标未落入镂空区域，则检测下一个滑动轨迹。

实施例三

本发明实施例提供了一种页面遮罩的实现方法，参见图6，方法流程包括：

301：同本发明实施例二中201，在此不再详述。

302：根据该页面信息，在该页面上绘制相应的镂空的遮罩，以通过该遮罩上的镂空位置显示页面元素。

进一步地，本步骤包括：

3021：在该页面上绘制高度和宽度分别为该页面的高度和宽度的遮罩。

具体地，本步骤同本发明实施例二中2021，在此不再详述。

3022：获取遮罩上与至少一个需通过遮罩镂空显示的页面元素在页面中的位置区域重叠的区域。

具体地，本步骤同本发明实施例二中2022，在此不再详述。

3023：将该重叠的区域显示的遮罩的透明度设置为100%。

具体地，可采用HTML中<img>标签的border属性，将该重叠的区域显示的遮罩的透明度设置为100%。把border属性设置为一个rgba色的超大值；该重叠的区域则用border-radius等于50%来实现。这样，重叠的区域为透明的，遮罩部分与透明的重叠的区域本来就是一体，自然就产生了页面元素通过透明的重叠区域穿透遮罩的假象，达到了镂空的效果。

303～304，同本发明实施例二中203～204，在此不再详述。

实施例四

参见图7，本发明实施例提供了一种页面遮罩的实现装置，该装置包括：

获取模块401，用于获取需显示遮罩的页面的页面信息。

绘制模块402，用于根据该页面信息，在该页面上绘制相应的镂空的遮罩，以通过该遮罩上的镂空位置显示该页面元素。

本实施例提供的上述装置带来的有益效果是：通过获取模块先获取需显示遮罩的页面的页面信息；所述页面信息包括，所述需显示遮罩的页面的高度、宽度、以及至少一个需通过遮罩镂空显示的页面元素在所述页面中的位置区域；然后绘制模块根据所述页面信息，在所述页面上绘制相应的镂空的遮罩，以通过所述遮罩上的镂空位置显示所述页面元素；能够不必拷贝页面元素，仅通过镂空的遮罩来实现在遮罩上显示页面的页面元素，减少了维护工作量；且该实现方法比较简单。

实施例五

参见图8，本发明实施例提供了一种页面遮罩的实现装置，该装置包括：

获取模块501，用于获取需显示遮罩的页面的页面信息。

绘制模块502，用于根据该页面信息，在该页面上绘制相应的镂空的遮罩，以通过该遮罩上的镂空位置显示该页面元素。

其中，该绘制模块502包括：

第一绘制单元5021，用于在该页面上绘制高度和宽度分别为该页面的高度和宽度的遮罩。

第一获取单元5022，用于获取遮罩上与至少一个需通过遮罩镂空显示的页面元素在页面中的位置区域重叠的区域。

去除单元5023，用于去除该重叠的区域显示的遮罩，使形成镂空的遮罩。

其中，该装置还包括：

事件模块503，用于获取遮罩上与至少一个需通过遮罩镂空显示的页面元素在页面中的位置区域重叠的区域；并为获取的遮罩上每一个重叠的区域设置相应的虚拟点击事件。

其中，该装置还包括：

响应模块504，用于获取滑动轨迹的最后触点的页面坐标；判断该页面坐标是否位于遮罩上与至少一个需通过遮罩镂空显示的页面元素在页面中的位置区域重叠的区域；若是，则响应该区域对应的虚拟点击事件；若否，则检测滑动轨迹。

实施例六

参见图9，本发明实施例提供了一种页面遮罩的实现装置，该装置包括：

获取模块601，同本发明实施例五中描述的获取模块501，在此不再详述。

绘制模块602，用于根据该页面信息，在该页面上绘制相应的镂空的遮罩，以通过该遮罩上的镂空位置显示该页面元素。

其中，该绘制模块602包括：

第二绘制单元6021，用于在该页面上绘制高度和宽度分别为该页面的高度和宽度的遮罩。

第二获取单元6022，用于获取遮罩上与至少一个需通过遮罩镂空显示的页面元素在页面中的位置区域重叠的区域。

设置单元6023，用于将该重叠的区域显示的遮罩的透明度设置为100%。

其中，该装置还包括：

事件模块603，同本发明实施例五中描述的事件模块503，在此不再详述。

响应模块604，同本发明实施例五中描述的响应模块504，在此不再详述。

本实施例提供的上述装置带来的有益效果是：通过获取模块先获取需显示遮罩的页面的页面信息；所述页面信息包括，所述需显示遮罩的页面的高度、宽度、以及至少一个需通过遮罩镂空显示的页面元素在所述页面中的位置区域；然后绘制模块根据所述页面信息，在所述页面上绘制相应的镂空的遮罩；能够不必拷贝页面元素，仅通过镂空的遮罩来实现在遮罩上显示页面的页面元素，减少了维护工作量；且该实现方法比较简单。

需要说明的是：上述实施例提供的实现页面遮罩的装置在实现页面遮罩时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将设备的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的实现页面遮罩的装置与实现页面遮罩的方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims

1.一种页面遮罩的实现方法，其特征在于，所述方法包括：

获取需显示遮罩的页面的页面信息；

根据所述页面信息，在所述页面上绘制相应的镂空的遮罩，以通过所述遮罩上的镂空位置显示所述页面元素。

2.根据权利要求1所述的方法，其特征在于，所述根据所述页面信息，在所述页面上绘制相应的镂空的遮罩，包括：

去除所述重叠的区域显示的遮罩，使形成镂空的遮罩。

3.根据权利要求1所述的方法，其特征在于，所述根据所述页面信息，在所述页面上绘制相应的镂空的遮罩，包括：

将所述重叠的区域显示的遮罩的透明度设置为100%。

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

5.根据权利要求4所述的方法，其特征在于，为获取的所述遮罩上的每一个重叠的区域设置相应的虚拟点击事件之后，还包括：

获取滑动轨迹的最后触点的页面坐标；

判断所述页面坐标是否位于所述重叠的区域；

若是，则响应所述重叠的区域对应的虚拟点击事件。

6.一种页面遮罩的实现装置，其特征在于，所述装置包括：

获取模块，用于获取需显示遮罩的页面的页面信息；

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

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

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

10.根据权利要求9所述的装置，其特征在于，所述装置还包括：

响应模块，用于获取滑动轨迹的最后触点的页面坐标；

判断所述页面坐标是否位于所述重叠的区域；

若是，则响应所述重叠的区域对应的虚拟点击事件。