CN107784000B - 一种标签页展示方法、浏览器及用户设备 - Google Patents

一种标签页展示方法、浏览器及用户设备 Download PDF

Info

Publication number
CN107784000B
CN107784000B CN201610741279.8A CN201610741279A CN107784000B CN 107784000 B CN107784000 B CN 107784000B CN 201610741279 A CN201610741279 A CN 201610741279A CN 107784000 B CN107784000 B CN 107784000B
Authority
CN
China
Prior art keywords
page
area
label
picture
label page
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201610741279.8A
Other languages
English (en)
Other versions
CN107784000A (zh
Inventor
李斌
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Tencent Technology Shenzhen Co Ltd
Original Assignee
Tencent Technology Shenzhen Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Tencent Technology Shenzhen Co Ltd filed Critical Tencent Technology Shenzhen Co Ltd
Priority to CN201610741279.8A priority Critical patent/CN107784000B/zh
Publication of CN107784000A publication Critical patent/CN107784000A/zh
Application granted granted Critical
Publication of CN107784000B publication Critical patent/CN107784000B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation

Abstract

本发明实施例提供一种标签页展示方法、浏览器及用户设备,该方法包括:确定当前操作关联的标签页及所述标签页的相邻标签页;根据所述当前操作的操作类型,从所述当前操作关联的标签页及所述相邻标签页中确定需展示的待处理标签页;确定所述待处理标签页中各标签页间的层叠关系,所述层叠关系指示有所述待处理标签页中具有上下层级关系的标签页;确定所述待处理标签页中的下层标签页被相应的上层标签页覆盖的区域;绘制所述区域被裁剪的标签页图形,以展示所述下层标签页。本发明实施例可保障相邻标签页之间的层叠关系的标识度,便于标签页对相应打开网页的标识。

Description

一种标签页展示方法、浏览器及用户设备
技术领域
本发明涉及数据处理技术领域,具体涉及一种标签页展示方法、浏览器及用户设备。
背景技术
标签页是浏览器管理网页的一种方式,一般展示在浏览器的标签栏中,一个标签页对应浏览器打开的一个网页;标签页的形状有多种,较为经常使用的一种标签页是具有异形边缘的异形标签页,典型的异形标签页如梯形标签页等,梯形标签页即标签页的形状类似梯形形状,如图1所示。
目前在浏览器中展示标签页时,标签页之间一般是层叠显示,且相邻的标签页之间极有可能存在重叠区域,尤其是在采用异形标签页时,相邻的异形标签页之间的重叠区域更为明显;如图2所示,在采用梯形标签页的情况下,相邻的梯形标签页中上层的梯形标签页的边缘将覆盖下层的梯形标签页的边缘,使得相邻的梯形标签页之间存在有重叠区域,重叠区域如图2方框标注区域。
标签页作为浏览器打开网页的一个标识,在浏览器中展示标签页时,应使得标签页之间具有较好的层叠关系的标识度,因此当标签页之间存在重叠区域时,如何优化标签页的展示方法,以保障标签页之间的层叠关系的标识度,从而便于标签页对相应打开网页的标识,显得尤为必要。
发明内容
有鉴于此,本发明实施例提供一种标签页展示方法、浏览器及用户设备,以保障标签页之间的层叠关系的标识度,便于标签页对相应打开网页的标识。
为实现上述目的,本发明实施例提供如下技术方案:
一种标签页展示方法,包括:
确定当前操作关联的标签页及所述标签页的相邻标签页;
根据所述当前操作的操作类型,从所述当前操作关联的标签页及所述相邻标签页中确定需展示的待处理标签页;
确定所述待处理标签页中各标签页间的层叠关系,所述层叠关系指示有所述待处理标签页中具有上下层级关系的标签页;
确定所述待处理标签页中的下层标签页被相应的上层标签页覆盖的区域;
绘制所述区域被裁剪的标签页图形,以展示所述下层标签页。
本发明实施例还提供一种浏览器,包括:
关联标签页及相邻标签页确定模块,用于确定当前操作关联的标签页及所述标签页的相邻标签页;
待处理标签页确定模块,用于根据所述当前操作的操作类型,从所述当前操作关联的标签页及所述相邻标签页中确定需展示的待处理标签页;
层叠关系确定模块,用于确定所述待处理标签页中各标签页间的层叠关系,所述层叠关系指示有所述待处理标签页中具有上下层级关系的标签页;
覆盖区域确定模块,用于确定所述待处理标签页中的下层标签页被相应的上层标签页覆盖的区域;
下层标签页绘制模块,用于绘制所述区域被裁剪的标签页图形,以展示所述下层标签页。
本发明实施例还提供一种用户设备,所述用户设备装载有上述所述的浏览器。
基于上述技术方案,本发明实施例提供的标签页展示方法,可根据当前操作的操作类型,从所述当前操作关联的标签页及该标签页的相邻标签页中确定需展示的待处理标签页;进而可确定所述待处理标签页中各标签页间的层叠关系,所述层叠关系指示有所述待处理标签页中具有上下层级关系的标签页;在确定出所述待处理标签页中的下层标签页被相应的上层标签页覆盖的区域后,本发明实施例可绘制所述区域被裁剪的标签页图形,以展示所述下层标签页,实现具有重叠区域的相邻标签页的展示;由于本发明实施例在展示下层标签页时,是通过在下层标签页的被覆盖区域绘制被裁剪的标签页图形实现,因此具有上下层级关系的标签页的交汇界限清晰,保障了相邻标签页之间的层叠关系的标识度,便于标签页对相应打开网页的标识。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据提供的附图获得其他的附图。
图1为梯形标签页的示意图;
图2为相邻的梯形标签页的重叠区域的示意图;
图3为本发明实施例提供的标签页展示方法的流程图;
图4为标签页的层叠关系的示意图;
图5为标签页的层叠关系的另一示意图;
图6为标签页的绘制效果示意图;
图7为标签页的区域与区域图片划分示意图;
图8为标签页正常绘制的示意图;
图9为本发明实施例提供的展示下层标签页的方法流程图;
图10为左侧区域图片及左侧区域图片裁剪掉左侧覆盖区域后的示意图;
图11为标签页的另一绘制效果示意图;
图12为右侧区域图片及右侧区域图片裁剪掉右侧覆盖区域后的示意图;
图13为标签页的再一绘制效果示意图;
图14为标签页的又一绘制效果示意图;
图15为标签页的动态位移示意图;
图16为本发明实施例提供的绘制左侧覆盖区域被裁剪的左侧区域图片的方法流程图;
图17为本发明实施例提供的绘制右侧覆盖区域被裁剪的右侧区域图片的方法流程图;
图18为标签页的又另一绘制效果示意图;
图19为本发明实施例提供的浏览器的结构框图;
图20为本发明实施例提供的浏览器的另一结构框图;
图21为本发明实施例提供的下层标签页绘制模块的结构框图;
图22为本发明实施例提供的用户设备的硬件结构框图。
具体实施方式
下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。
图3为本发明实施例提供的标签页展示方法的流程图,该方法可应用于装载有浏览器的用户设备中,如装载有浏览器的手机、平板电脑、笔记本电脑等;参照图3,该方法可以包括:
步骤S100、确定当前操作关联的标签页及所述标签页的相邻标签页;
当前操作关联的标签页可以认为是当前操作指向的标签页,如打开一个网页对应关联的标签页,在标签栏中选中的标签页,删除一网页对应关联的标签页等;
用户的当前操作将导致浏览器的标签栏中的标签页的展示状态发生改变,为使得标签页的展示状态发生改变时,保障标签页之间的层叠关系的标识度,本发明实施例可在确定用户的当前操作关联的标签页后,确定当前操作关联的标签页的相邻标签页;
可选的,当前操作关联的标签页的相邻标签页有可能是两个,如当前操作关联的标签页在标签栏的左、右两侧都展示有标签页;当前操作关联的标签页的相邻标签页也可能仅是一个,如当前操作关联的标签页为标签栏首部或尾部排列的标签页。
步骤S110、根据所述当前操作的操作类型,从所述当前操作关联的标签页及所述相邻标签页中确定需展示的待处理标签页;
由于不同的操作将导致标签栏展示的标签页的展示状态发生不同的改变,如在删除一标签页(与删除标签页对应的网页相应)时,标签栏展示的标签页的数量将发生改变;可选的,如果当前操作为删除标签页的操作,则当前操作关联的标签页将不在标签栏中展示,因此所述当前操作关联的标签页及所述相邻标签页中还需展示的标签页为所述相邻标签页,即所述相邻标签页可以作为待处理标签页;而在当前操作不为删除标签页的操作时,可以将所述当前操作关联的标签页及所述相邻标签页作为待处理标签页;
在本发明实施例中,待处理标签页可以认为是用户进行当前操作后,当前操作关联的标签页及所述当前操作关联的标签页的相邻标签页中,还需在标签栏中展示的标签页;在确定待处理标签页后,后续流程将对待处理标签页中相邻标签页间的层叠展示进行优化。
步骤S120、确定所述待处理标签页中各标签页间的层叠关系,所述层叠关系指示有所述待处理标签页中具有上下层级关系的标签页;
可选的,本发明实施例可以用户设备的显示屏幕的横向(如从左到右的方向)作为X轴坐标,以显示屏幕的纵向(如从下到上的方向)为Y轴坐标,而垂直于显示屏幕从里到外的方向为Z轴坐标,从而构建出坐标系;一般而言,层级越大的标签页的Z轴坐标值越大,绘制在越上面;
本发明实施例可预定义层叠关系的递增顺序,如标签页的层级按照标签栏从左到右的顺序递增,又如标签页的层级按照标签栏从左到右的顺序递减,具体层叠关系的递增顺序可视实际应用情况设定;在预定义层叠关系的递增顺序后,本发明实施例依据该层叠关系的递增顺序,确定待处理标签页中各标签页间的层叠关系;
值得注意的是,被用户激活的标签页可设置为是最上层的标签页,如果待处理标签页中存在激活的标签页,则该激活的标签页为最上层的标签页,其他的标签页则可根据预定义的层叠关系的递增顺序,确定层叠关系;
在确定出待处理标签页中各标签页间的层叠关系后,本发明实施例可确定出待处理标签页中具有上下层级关系的标签页,其中具有上下层级关系的标签页中处于下层的标签页可称为下层标签页,处于上层的标签页可称为上层标签页;
可选的,一个标签页是上层标签页还是下层标签页需根据其针对的标签页而言,一个标签页有可能是某一标签页的上层标签页,但可能同时是另一标签页的下层标签页;
如图4所示,待处理的标签页有3个,分别为A1、B1和C1;按照从左到右层叠关系递增的顺序,则B1是A1的上层标签页,同时也是C1的下层标签页,A1的右侧区域被B1的左侧区域覆盖,B1的右侧区域被C1的左侧区域覆盖,图中虚线表示标签页被覆盖的边缘;
又如图5所示,待处理标签页有3个,分别为A2、B2和C2;按照从左到右层叠关系递增的顺序,且B2为激活标签页,则B2不存在被覆盖的区域,A2的右侧被B2覆盖,C2的左侧被B2覆盖;显然,如果A2为激活标签页,按照从左到右层叠关系递增的顺序,则B2的左侧区域被A2覆盖,B2的右侧区域被C2覆盖;而如果A2为非激活标签页,按照从左到右层叠关系递减的顺序,则B2的左侧区域被A2覆盖,C2的左侧区域被B2的右侧区域覆盖。
步骤S130、确定所述待处理标签页中的下层标签页被相应的上层标签页覆盖的区域;
在确定了待处理标签页中具有上下层级关系的标签页后,本发明实施例可确定待处理标签页中的下层标签页被相应的上层标签页覆盖的区域,下层标签页被相应的上层标签页覆盖的区域可能是右侧区域,也可能是左侧区域,具体需视预定义的层叠关系递增顺序而定。
步骤S140、绘制所述区域被裁剪的标签页图形,以展示所述下层标签页。
在确定了待处理标签页中具有上下层级关系的标签页,并确定下层标签页被相应的上层标签页覆盖的区域后,为保障相邻标签页之间的层叠关系的标识度,本发明实施例可在下层标签页的标签页图形中裁剪掉被上层标签页覆盖的区域相应的图形,从而绘制出被覆盖的区域被裁剪的标签页图形,使得下层标签页被上层标签页覆盖的区域在展示效果上,仅能观察到上层标签页在该区域的图形;
以图6所示,标签页B3是标签页A3的上层标签页,标签页A3的右侧区域被标签页B3覆盖,本发明实施例可绘制A3的右侧覆盖区域被裁剪掉的标签页图形,使得A3被B3覆盖的区域展示B3的左侧区域图形,从而实现具有重叠区域的相邻标签页A3和B3的展示;通过这种方式绘制下层标签页,可使得具有上下层级关系的标签页的交汇界限清晰,保障相邻标签页之间的层叠关系的标识度。
本发明实施例提供的标签页展示方法,可根据当前操作的操作类型,从所述当前操作关联的标签页及该标签页的相邻标签页中确定需展示的待处理标签页;进而可确定所述待处理标签页中各标签页间的层叠关系,所述层叠关系指示有所述待处理标签页中具有上下层级关系的标签页;在确定出所述待处理标签页中的下层标签页被相应的上层标签页覆盖的区域后,本发明实施例可绘制所述区域被裁剪的标签页图形,以展示所述下层标签页,实现具有重叠区域的相邻标签页的展示;由于本发明实施例在展示下层标签页时,是通过在下层标签页的被覆盖区域绘制被裁剪的标签页图形实现,因此具有上下层级关系的标签页的交汇界限清晰,保障了相邻标签页之间的层叠关系的标识度,便于标签页对相应打开网页的标识。
本发明实施例在绘制一标签页时,可通过绘制标签页的3个区域来实现:绘制左侧区域的标签页图形,绘制右侧区域的标签页图形、绘制中部区域的标签页图形;
可选的,本发明实施例可预定义标签页的左侧区域相应的左侧区域图片,中部区域相应的中部图片及右侧区域相应的右侧区域图片;以梯形标签页为例,如图7所示,标签页分为R1(左侧区域)、R2(中部区域)、R3(右侧区域)这三个区域;其中,R1区域对应图片P1(左侧区域图片),R2区域对应图片P2(中部图片),R3区域对应图片P3(右侧区域图片);图中白色部分可以是全透明区域,不可见的;
可选的,P1、P2和P3图片的高度都和绘制区域的高度大小相同,如P1的高度与R1的高度相同,P2的高度与R2的高度相同;且P1图片的大小和R1区域的大小相同,P3图片的大小和R3区域的大小相同,即在正常绘制标签页时,P1、P3绘制保持原始大小即可;而由于R2的宽度是变化的,P2图片可以通过重复平铺方式绘制在R2区域内;在进行标签页绘制时,绘制区域的最小值为R1的宽度和R3的宽度之和,当绘制区域在最小值时,R2的宽度为0,R2区域不需要绘制;
在正常绘制标签页时(即标签页不存在被覆盖、遮挡的区域),本发明实施例可直接在标签页的R1区域绘制P1图片,在R3区域绘制P3图片,在R2区域通过重复平铺的方式绘制P2图片,得到如图8所示标签页。
而由于本发明实施例中,相邻的标签页之间存在重叠区域,因此下层标签页的被覆盖区域无法通过绘制原始对应的图片来实现,如下层标签页的左侧区域R1被覆盖,则无法在左侧区域R1直接绘制P1图片,而是需要绘制裁剪掉被覆盖区域的P1图片,来实现下层标签页的左侧区域的绘制;
相应的,图9示出了本发明实施例提供的展示下层标签页的方法流程图,参照图9,该方法可以包括:
步骤S200、确定下层标签页被相应的上层标签页覆盖的区域所在的侧位;
可选的,如果本发明实施例定义标签栏从左到右,标签页的层叠关系依序递增,则标签栏中的第一个标签左侧区域不被覆盖,标签栏上后一个展示的标签页的左侧区域将覆盖前一个展示的标签页的右侧区域;且激活标签页的左、右侧区域均不会被覆盖,而激活标签页的左侧相邻标签页的右侧区域被激活标签页的左侧区域覆盖,激活标签页的右侧相邻标签页的左侧区域被激活标签页的右侧区域覆盖;
可选的,如果本发明实施例定义标签从左到右,标签页的层叠关系依序递减,则标签栏中的第一个标签的左侧区域不被覆盖,标签栏上前一个展示的标签页的右侧区域将覆盖后一个展示的标签页的左侧区域;且激活标签页的左、右侧区域均不会被覆盖,而激活标签页的左侧相邻标签页的右侧区域被激活标签页的左侧区域覆盖,激活标签页的右侧相邻标签页的左侧区域被激活标签页的右侧区域覆盖。
步骤S210、若所述侧位包括左侧,在所述下层标签页的左侧区域绘制左侧覆盖区域被裁剪的左侧区域图片,以绘制出所述下层标签页的左侧图形;
可选的,图10示出了左侧区域图片P1,及P1裁剪掉左侧覆盖区域后的图片P12的可选示意图,可参照;
可选的,如果下层标签页的右侧未被覆盖、遮挡,则下层标签页绘制出的图形可如图11所示;
左侧覆盖区域为下层标签页的左侧区域中被上层标签页覆盖的区域。
步骤S220、若所述侧位包括右侧,在所述下层标签页的右侧区域绘制右侧覆盖区域被裁剪的右侧区域图片,以绘制出所述下层标签页的右侧图形。
可选的,图12示出了右侧区域图片P3,及P3裁剪掉右侧覆盖区域后的图片P32的可选示意图,可参照;
可选的,如果下层标签页的左侧未被覆盖、遮挡,则下层标签页绘制出的图形可如图13所示;
右侧覆盖区域为下层标签页的右侧区域中被上层标签页覆盖的区域。
可选的,下层标签页被上层标签页覆盖的区域所在的侧位也可能是左侧和右侧,即下层标签页的左侧和右侧均为上层标签页所覆盖,因此本发明实施例可在所述下层标签页的左侧区域绘制左侧覆盖区域被裁剪的左侧区域图片,以绘制出所述下层标签页的左侧图形,在下层标签页的右侧区域绘制右侧覆盖区域被裁剪的右侧区域图片,以绘制出所述下层标签页的右侧图形;相应的,图14示出了下层标签页绘制出的图形,可参照。
可见,图9所示流程中,步骤S210和步骤S220可以是择一执行的,也可以是共同执行的,主要视下层标签页被覆盖区域所在的侧位而定。
可选的,在绘制完成所述下层标签页的左侧图形和右侧图形后,可根据所述中部图片绘制所述下层标签页的中部图形。
可选的,在绘制完成下层标签页的左侧图形和右侧图形后(下层标签页的左侧图形和/或右侧图形是被裁剪掉的图片),如果下层标签页的中部区域的大小为零,则取消绘制所述下层标签页的中部图形;
可选的,在绘制完成下层标签页的左侧图形和右侧图形后,如果下层标签页的中部区域的大小不为零,则可将所述中部图片以重复平铺的方式绘制在所述下层标签页的中部区域。
可选的,本发明实施例可通过预先将左侧区域图片进行裁剪,以得到左侧覆盖区域被裁剪的左侧区域图片,左侧覆盖区域被裁剪的左侧区域图片可以称为是左侧区域裁剪图片,本发明实施例可实现左侧区域裁剪图片的预定义;本发明实施例也可通过预先将右侧区域图片进行裁剪,以得到右侧覆盖区域被裁剪的右侧区域图片,右侧覆盖区域被裁剪的右侧区域图片可以称为是右侧区域裁剪图片,本发明实施例可实现右侧区域裁剪图片的预定义;
相应的,本发明实施例在下层标签页的左侧区域绘制左侧覆盖区域被裁剪的左侧区域图片时,可调取预定义的左侧区域裁剪图片,将所述左侧区域裁剪图片绘制在所述下层标签页的左侧区域,以绘制出所述下层标签页的左侧图形;
本发明实施例在下层标签页的右侧区域绘制右侧覆盖区域被裁剪的右侧区域图片时,可调取预定义的右侧区域裁剪图片,将所述右侧区域裁剪图片绘制在所述下层标签页的右侧区域,以绘制出下层标签页的右侧图形。
如果当前操作是触发标签页动态位移的操作,如拖动标签页,或者重新排序标签页,则当前操作关联的标签页及该标签页的相邻标签页中,下层标签页的被覆盖区域是动态变化的,如图15所示;在标签页动态位移的过程中,下层标签页被覆盖区域的宽度是动态变化的,本发明实施例可通过动态的确定(如定时确定)下层标签页被相应的上层标签页覆盖的区域的宽度,以通过所确定的宽度调整下层标签页被覆盖区域的图片像素点的透明度,得到下层标签页的被覆盖区域的图形被裁剪的显示效果;
以下层标签页被相应的上层标签页覆盖的区域所在侧位包括左侧为例,图16示出了本发明实施例提供的绘制左侧覆盖区域被裁剪的左侧区域图片的方法流程图,参照图16,该方法可以包括:
步骤S300、确定下层标签页被相应的上层标签页覆盖的左侧区域的宽度;
可选的,本发明实施例可确定下层标签页相应的上层标签页的右侧X轴坐标值,及下层标签页的左侧X轴坐标值,将所述上层标签页的右侧X轴坐标值减去所述下层标签页的左侧X轴坐标值,得到所述下层标签页被覆盖的左侧区域的宽度。
步骤S310、根据所述宽度,确定所述下层标签页的左侧区域图片被覆盖的像素点,在相应的上层标签页的右侧区域图片中对应的像素点;
可选的,本发明实施例可根据所述宽度,遍历所述下层标签页的左侧区域图片被覆盖的各像素点;对于遍历到的各像素点,将遍历到的像素点的Y轴坐标值,作为相应的上层标签页的右侧区域图片中对应的像素点的Y轴坐标值,将遍历到的像素点的X轴坐标值,减去所述下层标签页被覆盖的左侧区域的宽度,得到所述上层标签页的右侧区域图片中对应的像素点的Z轴坐标值。
步骤S320、根据所述上层标签页的右侧区域图片中的像素点的透明度,调整所述下层标签页的左侧区域图片中对应像素点的透明度,以达到所述下层标签页的左侧区域图片的所述区域被裁剪的效果。
可选的,如果所述上层标签页的右侧区域图片中的像素点的透明度为最大值,则调整所述下层标签页的左侧区域图片对应覆盖的像素点的透明度为零;
如果所述上层标签页的右侧区域图片中的像素点的透明度为零,则所述下层标签页的左侧区域图片对应覆盖的像素点的透明度保持不变;
如果所述上层标签页的右侧区域图片中的像素点的透明度非最大值也非零,则将所述上层标签页的右侧区域图片中的像素点的透明度,与所述下层标签页的左侧区域图片对应覆盖的像素点的透明度进行混合,以混合后的透明度作为所述下层标签页的左侧区域图片对应覆盖的像素点的透明度。
可选的,本发明实施例可设标签栏中第i个标签页的左侧X轴坐标值为Xi,Y轴坐标值为Yi,宽度为Ki,高度为Hi,左侧被覆盖区域的宽度为W1,右侧被覆盖区域的宽度为Wr;i的取值范围为[1,N],N为标签栏中标签页的个数;
则在计算第i个标签页左侧被覆盖区域的宽度Wl时,可通过如下公式实现:
if第i个标签页为激活标签页
then Wl=0
else if i==1
then Wl=0
else
Wl=(Xj+Kj)-Xi;
即第i个标签页为激活标签页,或者第一个标签页时,标签页的左侧未被覆盖,左侧被覆盖区域的宽度W1为0;在第i个标签页不为激活的标签页,也不为第一个标签页时,可设第i个标签页的上层标签页为j,如层叠关系按照从标签栏从左到右的顺序递减,则j=i-1;Kj可以是第i个标签页的上层标签页的宽度,Xj是第i个标签页的上层标签页的左侧X轴坐标值,Xj+Kj是第i个标签页的上层标签页的右侧X轴坐标值,本发明实施例可通过(Xj+Kj)-Xi,即将第i个标签页的上层标签页的右侧X轴坐标值减去第i个标签页的左侧X轴坐标值,得到下层标签页被覆盖的左侧区域的宽度Wl;
在计算出第i个标签页被覆盖的左侧区域的宽度Wl后,如果Wl等于0,则可在R1区域内绘制图片P1,否则,需要对图片P1进行裁剪处理;由于左侧区域是被上层标签页的右侧区域遮挡,而所有的标签页的左、右侧区域都是分别通过绘制图片P1和P3实现,因此,下层标签页的左侧区域的图片P1可以通过其上层标签页的图片P3的遮挡处理实现;
可选的,本发明实施例可提取图片P1和P3的最大Alpha(像素点的透明度)值,其中P1和P3的Alpha值一般是相同的,假设为Amax;而图片P1和P3的宽度(Wp)和高度(Hp)都相同;其中,Wl小于或等于Wp;设定图片P1的像素点p1的坐标为xp1,yp1,图片P3的像素点p3的坐标为xp3,yp3;
则对下层标签页的P1图片进行覆盖、遮挡处理时,本发明实施例可对下层标签页的P1图片的覆盖区域的所有像素点进行遍历处理,具体可通过如下方式实现:
Figure BDA0001094646570000121
可选的,本发明实施例可通过逐行或者逐列扫描,来遍历下层标签页的图片P1被遮挡区域的所有像素点,并得到所遍历的像素点在上层标签页的图片P3对应的像素点;根据P3的透明度a3的值,本发明实施例可分以下情况进行处理:
1、a3是最大透明度,则P1的透明度a1设置为0;
2、a3为0,a1保持原值不变;
3、a3为其他值,a1为a1的原值和a3混合,混合算法为a1=(Amax-a3)*a1/Amax。
以下层标签页被相应的上层标签页覆盖的区域所在侧位包括右侧为例,图17示出了本发明实施例提供的绘制右侧覆盖区域被裁剪的右侧区域图片的方法流程图,参照图17,该方法可以包括:
步骤S400、确定下层标签页被相应的上层标签页覆盖的右侧区域的宽度;
可选的,本发明实施例可确定所述下层标签页的右侧X轴坐标值,及所述下层标签页相应的上层标签页的左侧X轴坐标值,将所述下层标签页的右侧X轴坐标值减去所述上层标签页的左侧X轴坐标值,得到所述下层标签页被覆盖的右侧区域的宽度。
步骤S410、根据所述宽度,确定所述下层标签页的右侧区域图片被覆盖的像素点,在相应的上层标签页的左侧区域图片中对应的像素点;
可选的,本发明实施例可根据所述宽度,遍历所述下层标签页的右侧区域图片被覆盖的各像素点;对于遍历到的各像素点,将遍历到的像素点的Y轴坐标值,作为相应的上层标签页的左侧区域图片中对应的像素点的Y轴坐标值,将遍历到的像素点的X轴坐标值,减去所述下层标签页被覆盖的右侧区域的宽度,得到所述上层标签页的左侧区域图片中对应的像素点的X轴坐标值。
步骤S420、根据所述上层标签页的左侧区域图片中的像素点的透明度,调整所述下层标签页的右侧区域图片中对应像素点的透明度,以达到所述下层标签页的右侧区域图片的所述区域被裁剪的效果。
可选的,如果所述上层标签页的左侧区域图片中的像素点的透明度为最大值,所述下层标签页的右侧区域图片对应覆盖的像素点的透明度调整为零;
如果所述上层标签页的左侧区域图片中的像素点的透明度为零,保持所述下层标签页的右侧区域图片对应覆盖的像素点的透明度不变;
如果所述上层标签页的左侧区域图片中的像素点的透明度非最大值也非零,将所述上层标签页的左侧区域图片中的像素点的透明度,与所述下层标签页的右侧区域图片对应覆盖的像素点的透明度进行混合,以混合后的透明度作为所述下层标签页的右侧区域图片对应覆盖的像素点的透明度。
可选的,本发明实施例可通过公式Wr=(Xi+Ki)-Xj确定下层标签页被相应的上层标签页覆盖的右侧区域的宽度,其中,Ki为第i个标签页(下层标签页)的宽度,则Xi+Ki为第i个标签页的右侧X轴坐标值,j为i+1,相应的,Xj为上层标签页的左侧X轴坐标值,本发明实施例可将下层标签页的右侧X轴坐标值减去上层标签页的左侧X轴坐标值(Xi+Ki)-Xj,得到下层标签页被覆盖的右侧区域的宽度Wr。
在计算出下层标签页被覆盖的右侧区域的宽度Wr后,如果Wr等于0,则可直接把P3图片绘制到下层标签页的R3区域内,否则,对P3图片进行裁剪处理;由于下层标签页的P3图片是被上层标签页(如激活标签页,也可能是层叠关系按照从左到右递增情况下,下层标签页的下一标签页)的P1图片所遮挡,因此需要借助上层标签页的图片P1对下层标签页的图片P3进行裁剪处理;
本发明实施例可对下层标签页的P3图片中覆盖、遮挡区域的所有像素点进行遍历处理,实现过程如下:
Figure BDA0001094646570000141
Figure BDA0001094646570000151
即本发明实施例宽度根据上层标签页的图片P1中对应像素点p1的透明度值a1,对下层标签页的图片P3中对应的像素点p3的透明度值a3进行调整;具体的,
1、上层标签页的a1是最大透明度,下层标签页的a3设置为0;
2、上层标签页的a1为0,下层标签页的a3保持原值不变;
3、上层标签页的a1为其他值,下层标签页的a3为a3的原值和a1混合,混合算法为a3=(Amax-a1)*a3/Amax。
可选的,为了加强相邻标签页间的间隔视觉效果,本发明实施例可以让相邻标签页之前有一定的间隔;此时,只需要再处理P1图片裁剪区域时,把裁剪区域右扩大一定区域,假设偏移量为f;如果只向右偏扩大1个像素的话,处理方式可以如下:
f=1
Wl最终=Wl+1
if Wl大于Wp
then Wl最终=Wp
即覆盖区域的宽度需要加上偏移量,Wl最终=Wl+f,但是,Wl最终的最大值只能是标签的宽度Wp;可选的,本发明实施例在下层标签页的被覆盖区域包括左侧区域,将所述上层标签页的右侧X轴坐标值减去所述下层标签页的左侧X轴坐标值,得到所述下层标签页被覆盖的左侧区域的宽度时,可将所述上层标签页的右侧X轴坐标值减去所述下层标签页的左侧X轴坐标值,将所得结果与预定宽度偏移量相结合,得到所述下层标签页被覆盖的左侧区域的宽度;
可选的,本发明实施例在下层标签页的被覆盖区域包括右侧区域,将所述下层标签页的右侧X轴坐标值减去所述上层标签页的左侧X轴坐标值,得到所述下层标签页被覆盖的右侧区域的宽度时,可将所述下层标签页的右侧X轴坐标值减去所述上层标签页的左侧X轴坐标值,将所得结果与预定宽度偏移量相结合,得到所述下层标签页被覆盖的右侧区域的宽度。
本发明实施例提供的标签页展示方法,可在相邻标签页具有重叠区域时,保障相邻标签页之间的层叠关系的标识度,同时,还可优化相邻标签页之间的重叠区域的显示效果,尤其是在标签页的背景为半透明颜色,提升相邻标签页之间的重叠区域的显示效果;
如图2所示,当标签页为半透明时,相邻标签页之间的重叠区域相比于非重叠区域在视觉上有差异,影响标签页的显示效果,且为用户通过标签页界限标识不同的标签页带来不便;
而通过本发明实施例提供的标签页展示方法,可在相邻标签页的重叠区域为半透明时,通过对下层标签页绘制被覆盖区域被裁剪的标签页图形,来使得下层标签页的重叠区域和非重叠区域保持一致的透明度,降低标签页的重叠区域的视觉差异,为用户通过标签页界限标识不同的标签页提供便于,保障标签页之间的层叠关系的标识度;通过本发明实施例提供的标签页展示方法所展示的可选的标签页效果可如图18所示。
可选的,本发明实施例可在下层标签页被相应的上层标签页覆盖的区域为半透明时,绘制被覆盖区域被裁剪的标签页图形,以展示下层标签页;显然,本发明实施例也可在下层标签页被相应的上层标签页覆盖的区域时,即绘制被覆盖区域被裁剪的标签页图形,以展示下层标签页,而不限于下层标签页的被覆盖区域为半透明的情况;
可选的,在绘制下层标签页的左侧图形时,本发明实施例可确定下层标签页被相应的上层标签页覆盖的区域所在的侧位,在确定侧位包括左侧时,可判断左侧的被覆盖区域是否为半透明的,如果是,则在左侧区域绘制左侧覆盖区域被裁剪的左侧区域图片,如果否,则在左侧区域直接绘制左侧区域图片;
在绘制下层标签页的右侧图形时,处理过程与左侧图形的绘制类似;本发明实施例可确定下层标签页被相应的上层标签页覆盖的区域所在的侧位,在确定侧位包括右侧时,可判断右侧的被覆盖区域是否为半透明的,如果是,则在右侧区域绘制右侧覆盖区域被裁剪的右侧区域图片(即右侧区域裁剪图片),如果否,则在右侧区域直接绘制右侧区域图片;
可选的,在绘制完成左侧图形和右侧图形后,本发明实施例可将下层标签页的整个绘制区域的宽度,减去左侧图形和右侧图形的宽度,剩余宽度的区域作为中部区域的可绘制宽度,中部区域的可绘制宽度可用于绘制中部图形;本发明实施例在绘制完成左侧图形和右侧图形后,可计算中部区域的可绘制宽度,如果可绘制宽度为零,则结束下层标签页的绘制,如果可绘制宽度不为零,则可以重复平铺的方式将中部图片绘制在与所述可绘制宽度相应的中部区域,以绘制出所述下层标签页的中部图形。
可选的,本发明实施例提供的标签页展示方法可应用于异形标签页的展示。
下面对本发明实施例提供的浏览器进行介绍,下文描述的浏览器可与上文描述的标签页展示方法相互对应参照。
图19为本发明实施例提供的浏览器的结构框图,参照图19,该浏览器可以包括:
关联标签页及相邻标签页确定模块100,用于确定当前操作关联的标签页及所述标签页的相邻标签页;
待处理标签页确定模块200,用于根据所述当前操作的操作类型,从所述当前操作关联的标签页及所述相邻标签页中确定需展示的待处理标签页;
层叠关系确定模块300,用于确定所述待处理标签页中各标签页间的层叠关系,所述层叠关系指示有所述待处理标签页中具有上下层级关系的标签页;
覆盖区域确定模块400,用于确定所述待处理标签页中的下层标签页被相应的上层标签页覆盖的区域;
下层标签页绘制模块500,用于绘制所述区域被裁剪的标签页图形,以展示所述下层标签页。
可选的,图20示出了本发明实施例提供的浏览器的另一结构框图,结合图19和图20所示,该浏览器还可以包括:区域图片预定义模块600,用于预定义标签页的左侧区域相应的左侧区域图片,中部区域相应的中部图片及右侧区域相应的右侧区域图片;
相应的,图21示出了本发明实施例提供的下层标签页绘制模块500的可选结构,参照图21,下层标签页绘制模块500可以包括:
覆盖区域侧位确定单元510,用于确定所述下层标签页被相应的上层标签页覆盖的区域所在的侧位;
区域图片绘制单元520,用于若所述侧位包括左侧,在所述下层标签页的左侧区域绘制左侧覆盖区域被裁剪的左侧区域图片,以绘制出所述下层标签页的左侧图形,和/或,若所述侧位包括右侧,在所述下层标签页的右侧区域绘制右侧覆盖区域被裁剪的右侧区域图片,以绘制出所述下层标签页的右侧图形。
可选的,在本发明实施例中,浏览器还可预先将所述左侧区域图片进行裁剪,得到预定义的左侧区域裁剪图片,及预先将所述右侧区域图片进行裁剪,得到预定义的右侧区域裁剪图片;
相应的,区域图片绘制单元520在所述下层标签页的左侧区域绘制左侧覆盖区域被裁剪的左侧区域图片时,具体可用于,调取预定义的左侧区域裁剪图片,将所述左侧区域裁剪图片绘制在所述下层标签页的左侧区域;
区域图片绘制单元520在所述下层标签页的右侧区域绘制右侧覆盖区域被裁剪的右侧区域图片时,具体可用于,调取预定义的右侧区域裁剪图片,将所述右侧区域裁剪图片绘制在所述下层标签页的右侧区域。
可选的,在本发明实施例中,若在绘制完成所述下层标签页的左侧图形和右侧图形后,所述下层标签页的中部区域的大小为零,则浏览器可取消绘制所述下层标签页的中部图形;
或,若在绘制完成所述下层标签页的左侧图形和右侧图形后,所述下层标签页的中部区域的大小不为零,浏览器可将所述中部图片以重复平铺的方式绘制在所述下层标签页的中部区域,以绘制出所述下层标签页的中部图形。
可选的,在对标签页进行动态位移的过程中,所述若所述侧位包括左侧,则区域图片绘制单元520在所述下层标签页的左侧区域绘制左侧覆盖区域被裁剪的左侧区域图片时,具体可用于:
确定所述下层标签页被相应的上层标签页覆盖的左侧区域的宽度;根据所述宽度,确定所述下层标签页的左侧区域图片被覆盖的像素点,在相应的上层标签页的右侧区域图片中对应的像素点;根据所述上层标签页的右侧区域图片中的像素点的透明度,调整所述下层标签页的左侧区域图片中对应像素点的透明度,以达到所述下层标签页的左侧区域图片的所述区域被裁剪的效果。
可选的,区域图片绘制单元520在确定所述下层标签页被相应的上层标签页覆盖的左侧区域的宽度时,具体可用于,确定所述下层标签页相应的上层标签页的右侧X轴坐标值,及所述下层标签页的左侧X轴坐标值,将所述上层标签页的右侧X轴坐标值减去所述下层标签页的左侧X轴坐标值,得到所述下层标签页被覆盖的左侧区域的宽度。
可选的,区域图片绘制单元520在根据所述宽度,确定所述下层标签页的左侧区域图片被覆盖的像素点,在相应的上层标签页的右侧区域图片中对应的像素点时,具体可用于,根据所述宽度,遍历所述下层标签页的左侧区域图片被覆盖的各像素点;对于遍历到的各像素点,将遍历到的像素点的Y轴坐标值,作为相应的上层标签页的右侧区域图片中对应的像素点的Y轴坐标值,将遍历到的像素点的X轴坐标值,减去所述下层标签页被覆盖的左侧区域的宽度,得到所述上层标签页的右侧区域图片中对应的像素点的Z轴坐标值。
可选的,区域图片绘制单元520在将所述上层标签页的右侧X轴坐标值减去所述下层标签页的左侧X轴坐标值,得到所述下层标签页被覆盖的左侧区域的宽度时,具体可用于,将所述上层标签页的右侧X轴坐标值减去所述下层标签页的左侧X轴坐标值,将所得结果与预定宽度偏移量相结合,得到所述下层标签页被覆盖的左侧区域的宽度。
可选的,区域图片绘制单元520在根据所述上层标签页的右侧区域图片中的像素点的透明度,调整所述下层标签页的左侧区域图片中对应像素点的透明度时,具体可用于:
如果所述上层标签页的右侧区域图片中的像素点的透明度为最大值,则调整所述下层标签页的左侧区域图片对应覆盖的像素点的透明度为零;
如果所述上层标签页的右侧区域图片中的像素点的透明度为零,则所述下层标签页的左侧区域图片对应覆盖的像素点的透明度保持不变;
如果所述上层标签页的右侧区域图片中的像素点的透明度非最大值也非零,则将所述上层标签页的右侧区域图片中的像素点的透明度,与所述下层标签页的左侧区域图片对应覆盖的像素点的透明度进行混合,以混合后的透明度作为所述下层标签页的左侧区域图片对应覆盖的像素点的透明度。
可选的,在标签页动态位移的过程中,若所述侧位包括右侧,则区域图片绘制单元520在所述下层标签页的右侧区域绘制所述区域被裁剪的右侧区域图片时,具体可用于:
确定所述下层标签页被相应的上层标签页覆盖的右侧区域的宽度;根据所述宽度,确定所述下层标签页的右侧区域图片被覆盖的像素点,在相应的上层标签页的左侧区域图片中对应的像素点;根据所述上层标签页的左侧区域图片中的像素点的透明度,调整所述下层标签页的右侧区域图片中对应像素点的透明度,以达到所述下层标签页的右侧区域图片的所述区域被裁剪的效果。
可选的,区域图片绘制单元520在确定所述下层标签页被相应的上层标签页覆盖的右侧区域的宽度时,具体可用于,确定所述下层标签页的右侧X轴坐标值,及所述下层标签页相应的上层标签页的左侧X轴坐标值,将所述下层标签页的右侧X轴坐标值减去所述上层标签页的左侧X轴坐标值,得到所述下层标签页被覆盖的右侧区域的宽度。
可选的,区域图片绘制单元520在根据所述宽度,确定所述下层标签页的右侧区域图片被覆盖的像素点,在相应的上层标签页的左侧区域图片中对应的像素点时,具体可用于,根据所述宽度,遍历所述下层标签页的右侧区域图片被覆盖的各像素点;对于遍历到的各像素点,将遍历到的像素点的Y轴坐标值,作为相应的上层标签页的左侧区域图片中对应的像素点的Y轴坐标值,将遍历到的像素点的X轴坐标值,减去所述下层标签页被覆盖的右侧区域的宽度,得到所述上层标签页的左侧区域图片中对应的像素点的X轴坐标值。
可选的,区域图片绘制单元520在将所述下层标签页的右侧X轴坐标值减去所述上层标签页的左侧X轴坐标值,得到所述下层标签页被覆盖的右侧区域的宽度时,具体可用于,将所述下层标签页的右侧X轴坐标值减去所述上层标签页的左侧X轴坐标值,将所得结果与预定宽度偏移量相结合,得到所述下层标签页被覆盖的右侧区域的宽度。
可选的,区域图片绘制单元520在根据所述上层标签页的左侧区域图片中的像素点的透明度,调整所述下层标签页的右侧区域图片中对应像素点的透明度时,具体可用于:
如果所述上层标签页的左侧区域图片中的像素点的透明度为最大值,所述下层标签页的右侧区域图片对应覆盖的像素点的透明度调整为零;
如果所述上层标签页的左侧区域图片中的像素点的透明度为零,保持所述下层标签页的右侧区域图片对应覆盖的像素点的透明度不变;
如果所述上层标签页的左侧区域图片中的像素点的透明度非最大值也非零,将所述上层标签页的左侧区域图片中的像素点的透明度,与所述下层标签页的右侧区域图片对应覆盖的像素点的透明度进行混合,以混合后的透明度作为所述下层标签页的右侧区域图片对应覆盖的像素点的透明度。
可选的,待处理标签页确定模块200具体可用于,若所述操作类型为标签页删除操作,将所述相邻标签页确定为所述待处理标签页;或,若所述操作类型不为标签页删除操作,所述当前操作的标签页及所述相邻标签页确定为所述待处理标签页。
可选的,层叠关系确定模块300具体可用于,根据预定义的层叠关系递增顺序,确定所述待处理标签页中各标签页间的层叠关系,且若所述待处理标签页中存在激活的标签页,则所述激活的标签页为最上层的标签页。
本发明实施例提供的浏览器在展示标签页时,能够保障相邻标签页之间的层叠关系的标识度,便于标签页对相应打开网页的标识。
本发明实施例还提供一种用户设备,该用户设备可以装载有上述所述的浏览器。
图22示出了本发明实施例提供的用户设备的硬件结构框图,参照图22,该用户设备可以包括:处理器1,通信接口2,存储器3和通信总线4;
其中处理器1、通信接口2、存储器3通过通信总线4完成相互间的通信;
可选的,通信接口2可以为通信模块的接口,如GSM模块的接口;
处理器1,用于执行程序;
存储器3,用于存放程序;
程序可以包括程序代码,所述程序代码包括计算机操作指令;在本发明实施例中,程序可以包括上述所述的浏览器对应的程序。
处理器1可能是一个中央处理器CPU,或者是特定集成电路ASIC(ApplicationSpecific Integrated Circuit),或者是被配置成实施本发明实施例的一个或多个集成电路。
存储器3可能包含高速RAM存储器,也可能还包括非易失性存储器(non-volatilememory),例如至少一个磁盘存储器。
其中,程序可具体用于:
确定当前操作关联的标签页及所述标签页的相邻标签页;
根据所述当前操作的操作类型,从所述当前操作关联的标签页及所述相邻标签页中确定需展示的待处理标签页;
确定所述待处理标签页中各标签页间的层叠关系,所述层叠关系指示有所述待处理标签页中具有上下层级关系的标签页;
确定所述待处理标签页中的下层标签页被相应的上层标签页覆盖的区域;
绘制所述区域被裁剪的标签页图形,以展示所述下层标签页。
本说明书中各个实施例采用递进的方式描述,每个实施例重点说明的都是与其他实施例的不同之处,各个实施例之间相同相似部分互相参见即可。对于实施例公开的装置而言,由于其与实施例公开的方法相对应,所以描述的比较简单,相关之处参见方法部分说明即可。
专业人员还可以进一步意识到,结合本文中所公开的实施例描述的各示例的单元及算法步骤,能够以电子硬件、计算机软件或者二者的结合来实现,为了清楚地说明硬件和软件的可互换性,在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行,取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能,但是这种实现不应认为超出本发明的范围。
结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块,或者二者的结合来实施。软件模块可以置于随机存储器(RAM)、内存、只读存储器(ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。
对所公开的实施例的上述说明,使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的,本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下,在其它实施例中实现。因此,本发明将不会被限制于本文所示的这些实施例,而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (18)

1.一种标签页展示方法,其特征在于,包括:
确定当前操作关联的标签页及所述标签页的相邻标签页;
根据所述当前操作的操作类型,从所述当前操作关联的标签页及所述相邻标签页中确定需展示的待处理标签页;
确定所述待处理标签页中各标签页间的层叠关系,所述层叠关系指示有所述待处理标签页中具有上下层级关系的标签页;
确定所述待处理标签页中的下层标签页被相应的上层标签页覆盖的区域;
在所述下层标签页绘制所述区域被裁剪后的标签页图形,以展示所述下层标签页。
2.根据权利要求1所述的标签页展示方法,其特征在于,所述方法还包括:预定义标签页的左侧区域相应的左侧区域图片,中部区域相应的中部图片及右侧区域相应的右侧区域图片;
所述在所述下层标签页绘制所述区域被裁剪后的标签页图形,以展示所述下层标签页包括:
确定所述下层标签页被相应的上层标签页覆盖的区域所在的侧位;
若所述侧位包括左侧,在所述下层标签页的左侧区域绘制左侧覆盖区域被裁剪的左侧区域图片,以绘制出所述下层标签页的左侧图形,和/或,若所述侧位包括右侧,在所述下层标签页的右侧区域绘制右侧覆盖区域被裁剪的右侧区域图片,以绘制出所述下层标签页的右侧图形。
3.根据权利要求2所述的标签页展示方法,其特征在于,所述方法还包括:预先将所述左侧区域图片进行裁剪,得到预定义的左侧区域裁剪图片,及预先将所述右侧区域图片进行裁剪,得到预定义的右侧区域裁剪图片;
所述在所述下层标签页的左侧区域绘制左侧覆盖区域被裁剪后的左侧区域图片包括:
调取预定义的左侧区域裁剪图片,将所述左侧区域裁剪图片绘制在所述下层标签页的左侧区域;
所述在所述下层标签页的右侧区域绘制右侧覆盖区域被裁剪后的右侧区域图片包括:
调取预定义的右侧区域裁剪图片,将所述右侧区域裁剪图片绘制在所述下层标签页的右侧区域。
4.根据权利要求3所述的标签页展示方法,其特征在于,所述方法还包括:
若在绘制完成所述下层标签页的左侧图形和右侧图形后,所述下层标签页的中部区域的大小为零,则取消绘制所述下层标签页的中部图形;
或,若在绘制完成所述下层标签页的左侧图形和右侧图形后,所述下层标签页的中部区域的大小不为零,将所述中部图片以重复平铺的方式绘制在所述下层标签页的中部区域,以绘制出所述下层标签页的中部图形。
5.根据权利要求2所述的标签页展示方法,其特征在于,所述若所述侧位包括左侧,在所述下层标签页的左侧区域绘制左侧覆盖区域被裁剪的左侧区域图片包括:
确定所述下层标签页被相应的上层标签页覆盖的左侧区域的宽度;
根据所述宽度,确定所述下层标签页的左侧区域图片被覆盖的像素点,在相应的上层标签页的右侧区域图片中对应的像素点;
根据所述上层标签页的右侧区域图片中的像素点的透明度,调整所述下层标签页的左侧区域图片中对应像素点的透明度,以达到所述下层标签页的左侧区域图片的所述区域被裁剪的效果。
6.根据权利要求5所述的标签页展示方法,其特征在于,所述确定所述下层标签页被相应的上层标签页覆盖的左侧区域的宽度包括:
确定所述下层标签页相应的上层标签页的右侧X轴坐标值,及所述下层标签页的左侧X轴坐标值,将所述上层标签页的右侧X轴坐标值减去所述下层标签页的左侧X轴坐标值,得到所述下层标签页被覆盖的左侧区域的宽度;
所述根据所述宽度,确定所述下层标签页的左侧区域图片被覆盖的像素点,在相应的上层标签页的右侧区域图片中对应的像素点包括:
根据所述宽度,遍历所述下层标签页的左侧区域图片被覆盖的各像素点;
对于遍历到的各像素点,将遍历到的像素点的Y轴坐标值,作为相应的上层标签页的右侧区域图片中对应的像素点的Y轴坐标值,将遍历到的像素点的X轴坐标值,减去所述下层标签页被覆盖的左侧区域的宽度,得到所述上层标签页的右侧区域图片中对应的像素点的Z轴坐标值。
7.根据权利要求6所述的标签页展示方法,其特征在于,所述将所述上层标签页的右侧X轴坐标值减去所述下层标签页的左侧X轴坐标值,得到所述下层标签页被覆盖的左侧区域的宽度包括:
将所述上层标签页的右侧X轴坐标值减去所述下层标签页的左侧X轴坐标值,将所得结果与预定宽度偏移量相结合,得到所述下层标签页被覆盖的左侧区域的宽度。
8.根据权利要求6或7所述的标签页展示方法,其特征在于,所述根据所述上层标签页的右侧区域图片中的像素点的透明度,调整所述下层标签页的左侧区域图片中对应像素点的透明度,以达到所述下层标签页的左侧区域图片的所述区域被裁剪的效果包括:
如果所述上层标签页的右侧区域图片中的像素点的透明度为最大值,则调整所述下层标签页的左侧区域图片对应覆盖的像素点的透明度为零;
如果所述上层标签页的右侧区域图片中的像素点的透明度为零,则所述下层标签页的左侧区域图片对应覆盖的像素点的透明度保持不变;
如果所述上层标签页的右侧区域图片中的像素点的透明度非最大值也非零,则将所述上层标签页的右侧区域图片中的像素点的透明度,与所述下层标签页的左侧区域图片对应覆盖的像素点的透明度进行混合,以混合后的透明度作为所述下层标签页的左侧区域图片对应覆盖的像素点的透明度。
9.根据权利要求2所述的标签页展示方法,其特征在于,所述若所述侧位包括右侧,在所述下层标签页的右侧区域绘制所述区域被裁剪的右侧区域图片包括:
确定所述下层标签页被相应的上层标签页覆盖的右侧区域的宽度;
根据所述宽度,确定所述下层标签页的右侧区域图片被覆盖的像素点,在相应的上层标签页的左侧区域图片中对应的像素点;
根据所述上层标签页的左侧区域图片中的像素点的透明度,调整所述下层标签页的右侧区域图片中对应像素点的透明度,以达到所述下层标签页的右侧区域图片的所述区域被裁剪的效果。
10.根据权利要求9所述的标签页展示方法,其特征在于,所述确定所述下层标签页被相应的上层标签页覆盖的右侧区域的宽度包括:
确定所述下层标签页的右侧X轴坐标值,及所述下层标签页相应的上层标签页的左侧X轴坐标值,将所述下层标签页的右侧X轴坐标值减去所述上层标签页的左侧X轴坐标值,得到所述下层标签页被覆盖的右侧区域的宽度;
所述根据所述宽度,确定所述下层标签页的右侧区域图片被覆盖的像素点,在相应的上层标签页的左侧区域图片中对应的像素点包括:
根据所述宽度,遍历所述下层标签页的右侧区域图片被覆盖的各像素点;
对于遍历到的各像素点,将遍历到的像素点的Y轴坐标值,作为相应的上层标签页的左侧区域图片中对应的像素点的Y轴坐标值,将遍历到的像素点的X轴坐标值,减去所述下层标签页被覆盖的右侧区域的宽度,得到所述上层标签页的左侧区域图片中对应的像素点的X轴坐标值。
11.根据权利要求10所述的标签页展示方法,其特征在于,所述将所述下层标签页的右侧X轴坐标值减去所述上层标签页的左侧X轴坐标值,得到所述下层标签页被覆盖的右侧区域的宽度包括:
将所述下层标签页的右侧X轴坐标值减去所述上层标签页的左侧X轴坐标值,将所得结果与预定宽度偏移量相结合,得到所述下层标签页被覆盖的右侧区域的宽度。
12.根据权利要求10或11所述的标签页展示方法,其特征在于,所述根据所述上层标签页的左侧区域图片中的像素点的透明度,调整所述下层标签页的右侧区域图片中对应像素点的透明度,以达到所述下层标签页的右侧区域图片的所述区域被裁剪的效果包括:
如果所述上层标签页的左侧区域图片中的像素点的透明度为最大值,所述下层标签页的右侧区域图片对应覆盖的像素点的透明度调整为零;
如果所述上层标签页的左侧区域图片中的像素点的透明度为零,保持所述下层标签页的右侧区域图片对应覆盖的像素点的透明度不变;
如果所述上层标签页的左侧区域图片中的像素点的透明度非最大值也非零,将所述上层标签页的左侧区域图片中的像素点的透明度,与所述下层标签页的右侧区域图片对应覆盖的像素点的透明度进行混合,以混合后的透明度作为所述下层标签页的右侧区域图片对应覆盖的像素点的透明度。
13.根据权利要求1所述的标签页展示方法,其特征在于,所述根据操作类型,从所述当前操作的标签页及所述相邻标签页中确定需展示的待处理标签页包括:
若所述操作类型为标签页删除操作,将所述相邻标签页确定为所述待处理标签页;
或,若所述操作类型不为标签页删除操作,所述当前操作的标签页及所述相邻标签页确定为所述待处理标签页。
14.根据权利要求1所述的标签页展示方法,其特征在于,所述确定所述待处理标签页中各标签页间的层叠关系包括:
根据预定义的层叠关系递增顺序,确定所述待处理标签页中各标签页间的层叠关系,且若所述待处理标签页中存在激活的标签页,则所述激活的标签页为最上层的标签页。
15.一种浏览器,其特征在于,包括:
关联标签页及相邻标签页确定模块,用于确定当前操作关联的标签页及所述标签页的相邻标签页;
待处理标签页确定模块,用于根据所述当前操作的操作类型,从所述当前操作关联的标签页及所述相邻标签页中确定需展示的待处理标签页;
层叠关系确定模块,用于确定所述待处理标签页中各标签页间的层叠关系,所述层叠关系指示有所述待处理标签页中具有上下层级关系的标签页;
覆盖区域确定模块,用于确定所述待处理标签页中的下层标签页被相应的上层标签页覆盖的区域;
下层标签页绘制模块,用于在所述下层标签页绘制所述区域被裁剪后的标签页图形,以展示所述下层标签页。
16.根据权利要求15所述的浏览器,其特征在于,所述浏览器还包括:区域图片预定义模块,用于预定义标签页的左侧区域相应的左侧区域图片,中部区域相应的中部图片及右侧区域相应的右侧区域图片;
所述下层标签页绘制模块包括:
覆盖区域侧位确定单元,用于确定所述下层标签页被相应的上层标签页覆盖的区域所在的侧位;
区域图片绘制单元,用于若所述侧位包括左侧,在所述下层标签页的左侧区域绘制左侧覆盖区域被裁剪的左侧区域图片,以绘制出所述下层标签页的左侧图形,和/或,若所述侧位包括右侧,在所述下层标签页的右侧区域绘制右侧覆盖区域被裁剪的右侧区域图片,以绘制出所述下层标签页的右侧图形。
17.一种用户设备,其特征在于,所述用户设备装载有权利要求15-16任一项所述的浏览器。
18.一种计算机可读存储介质,其特征在于,包括指令,当其在计算机上运行时,使得计算机执行如权利要求1至14中任一项所述的方法。
CN201610741279.8A 2016-08-26 2016-08-26 一种标签页展示方法、浏览器及用户设备 Active CN107784000B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201610741279.8A CN107784000B (zh) 2016-08-26 2016-08-26 一种标签页展示方法、浏览器及用户设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610741279.8A CN107784000B (zh) 2016-08-26 2016-08-26 一种标签页展示方法、浏览器及用户设备

Publications (2)

Publication Number Publication Date
CN107784000A CN107784000A (zh) 2018-03-09
CN107784000B true CN107784000B (zh) 2021-06-29

Family

ID=61441075

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610741279.8A Active CN107784000B (zh) 2016-08-26 2016-08-26 一种标签页展示方法、浏览器及用户设备

Country Status (1)

Country Link
CN (1) CN107784000B (zh)

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109189513A (zh) * 2018-06-29 2019-01-11 深圳市彬讯科技有限公司 基于标签的层叠展示方法、装置、电子设备及存储介质
CN111783402B (zh) * 2019-04-02 2023-08-08 珠海金山办公软件有限公司 一种文档视觉效果的获取方法和装置

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102663075A (zh) * 2012-04-01 2012-09-12 杭州格畅科技有限公司 浏览网页的方法、浏览器及浏览器插件
CN102937996A (zh) * 2012-11-26 2013-02-20 北京奇虎科技有限公司 一种浏览器标签管理系统及方法
CN103970909A (zh) * 2014-05-27 2014-08-06 小米科技有限责任公司 显示浏览器标签的方法及装置
CN104036028A (zh) * 2014-06-27 2014-09-10 吴涛军 一种电子文档信息片段的处理系统与电子文档信息片段的生成、处理、差异化显示的方法
CN105786920A (zh) * 2014-12-26 2016-07-20 阿里巴巴集团控股有限公司 界面标签的展现方法和装置

Family Cites Families (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101650713B (zh) * 2008-08-13 2011-12-07 突触计算机系统(上海)有限公司 在浏览器中实现标签页的方法与装置
US9679332B2 (en) * 2013-02-28 2017-06-13 Lg Electronics Inc. Apparatus and method for processing a multimedia commerce service
US9430635B2 (en) * 2014-10-29 2016-08-30 Square, Inc. Secure display element
CN105740279A (zh) * 2014-12-10 2016-07-06 深圳市腾讯计算机系统有限公司 一种浏览器的标签页处理方法及装置
KR102343361B1 (ko) * 2014-12-17 2021-12-27 삼성전자주식회사 전자 기기 및 이의 웹 페이지 디스플레이 방법
CN105868250A (zh) * 2015-12-16 2016-08-17 乐视移动智能信息技术(北京)有限公司 一种浏览器的页面标签管理方法及装置

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102663075A (zh) * 2012-04-01 2012-09-12 杭州格畅科技有限公司 浏览网页的方法、浏览器及浏览器插件
CN102937996A (zh) * 2012-11-26 2013-02-20 北京奇虎科技有限公司 一种浏览器标签管理系统及方法
CN103970909A (zh) * 2014-05-27 2014-08-06 小米科技有限责任公司 显示浏览器标签的方法及装置
CN104036028A (zh) * 2014-06-27 2014-09-10 吴涛军 一种电子文档信息片段的处理系统与电子文档信息片段的生成、处理、差异化显示的方法
CN105786920A (zh) * 2014-12-26 2016-07-20 阿里巴巴集团控股有限公司 界面标签的展现方法和装置

Also Published As

Publication number Publication date
CN107784000A (zh) 2018-03-09

Similar Documents

Publication Publication Date Title
EP2383636A1 (en) Screen unlocking method and electronic apparatus thereof
JP4770878B2 (ja) 情報表示装置及びプログラム
US20110271181A1 (en) Screen unlocking method and electronic apparatus thereof
EP2386941A2 (en) Information processing apparatus and method, and program
US9092118B2 (en) Display controller, display control method, and computer-readable storage medium
US8743150B2 (en) Display processing device and display control method
US20150187095A1 (en) Method and device for implementing page mask
JP6171643B2 (ja) ジェスチャ入力装置
CN107784000B (zh) 一种标签页展示方法、浏览器及用户设备
DE112013006349T5 (de) Touchscreen mit Verhinderung einer unbeabsichtigter Eingabe
CN104461312A (zh) 一种显示控制方法及电子设备
US20100306695A1 (en) Graphics Stack System and Method
JP2015170343A (ja) 画像表示装置および画像表示方法
CN108139847B (zh) 显示装置
CN109302629B (zh) 一种用于为图片切换画框的方法及显示终端
JP5597441B2 (ja) 手書き文字入力装置
CN106354381B (zh) 图像文件的处理方法及装置
JP6161290B2 (ja) 表示制御装置、表示制御方法及びそのプログラム
CN109766069B (zh) 辅助显示方法、装置、电子设备及计算机可读存储介质
US20170115869A1 (en) Display device
WO2018025339A1 (ja) 表示装置及び表示方法
CN110825282B (zh) 一种图片展示方法、装置、电子设备及存储介质
JP6037744B2 (ja) タッチスクリーンを具備する電子装置で画面サイズを調節するための方法及びその装置
CN104715053B (zh) 网页内容显示的实现方法、装置及浏览器
CN112363787A (zh) 图像处理方法、装置和电子设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant