CN105739938A - 一种焦点图片显示方法及装置 - Google Patents

Abstract

本申请公开了一种焦点图标显示方法及装置，响应目标焦点区域的图片显示指令，获取预置的焦点图片；确定焦点图片的完全透明的中心矩形区域；确定焦点图片的四个角区域、上下两侧区域和左右两侧区域；确定上下两侧区域和左右两侧区域的最小重复单元，分别为1像素点宽、X像素点高的区域和Y像素点宽、1像素点高的区域，X为上下两侧区域的高度，Y为左右两侧区域的宽度；在绘制与目标焦点区域尺寸一致的目标焦点图片时，四个角区域以及中心矩形区域原样显示，上下两侧区域的最小重复单元沿水平方向平铺显示，左右两侧区域的最小重复单元沿垂直方向平铺显示；将目标焦点图片显示在目标焦点区域上。本申请保证了目标焦点图片的焦点框的粗细不变。

Description

一种焦点图片显示方法及装置

技术领域

本申请涉及图片显示技术领域，更具体地说，涉及一种焦点图片显示方法及装置。

背景技术

现行的应用程序或网页上通常包含多个焦点元素，这些焦点元素可以响应鼠标的点击。而目前的数字电视系统中，一般没有鼠标，只有一个传统的遥控器，用户通过上下左右四个方向键进行控制，这时会有一个“当前焦点”的概念，在无歧义的情况下，也可以直接简称为“焦点”。由于遥控器不像鼠标那样，有鼠标指针在屏幕上显示，所以需要一种方式来明确提示用户焦点的位置。现有技术一般采用焦点框表示。

焦点框可以看作是一个图片。当用户按下方向键时，系统计算出焦点元素，然后将预置的焦点框图片显示到焦点元素上。一般情况下图片都是透明的，只有边框是非透明的。参见图1a-1c。其中，图1a为应用的首页，可以包括多个子栏目选择项。应用初始打开时一般会将焦点定位在左上角，如图1b所示，“栏目一”即为焦点。当用户按下向右方向键时，应用修改焦点图片的位置，将其显示到“栏目二”上，如图1c所示。

为了更好的显示效果，应用页面上的焦点元素所占区域大小不同。现有技术采用一张焦点图片进行显示时，会根据焦点元素所占目标区域的大小对焦点图片进行缩放。而由于目标区域的不同，同一焦点图片在不同缩放情况下所呈现的焦点框的粗细不同。如图2a所示。图2a中示例了原始焦点图片A在不同缩放比例下得到的两幅焦点图片A1和A2。由图可知，原始焦点图片A缩写后得到的焦点图片A1的焦点框比较细；原始焦点图片A放大后得到的焦点图片A2的焦点框比较粗。进一步参见图2b，图2b示例了原始焦点图片A在不同宽高比缩放下得到的两幅焦点图片A3和A4。显然，由于宽度方向和高度方向缩放比例不同，导致两个方向上的焦点框的粗细不同。

由上可知，现有的焦点图片显示方式在对预置焦点图片进行不同比例缩放时，得到的焦点图片的焦点框粗细不同，影响用户视觉体验。

发明内容

有鉴于此，本申请提供了一种焦点图片显示方法及装置，用于解决现有焦点图片显示方法所存在的，针对不同大小的焦点区域所显示的焦点图片的焦点框粗细不均的问题。

为了实现上述目的，现提出的方案如下：

一种焦点图片显示方法，包括：

响应对目标焦点区域的图片显示指令，获取预置的焦点图片；

确定所述焦点图片的中心矩形区域，所述中心矩形区域完全透明；

根据所述中心矩形区域，确定所述焦点图片的四个角区域、上下两侧区域和左右两侧区域，其中，中心矩形区域的宽度与上下两侧区域的宽度相同，中心矩形区域的高度与左右两侧区域的高度相同，上下两侧区域的高度与四个角区域的高度相同，左右两侧区域的宽度与四个角区域的宽度相同；

确定所述上下两侧区域的最小重复单元为1像素点宽、X像素点高的区域，X为上下两侧区域的高度；

确定所述左右两侧区域的最小重复单元为Y像素点宽、1像素点高的区域，Y为左右两侧区域的宽度；

利用所述中心矩形区域、所述四个角区域、所述上下两侧区域的最小重复单元以及所述左右两侧区域的最小重复单元，绘制目标焦点图片，目标焦点图片和目标焦点区域的宽度和高度均一致，其中，所述四个角区域以及所述中心矩形区域原样显示，所述上下两侧区域的最小重复单元沿水平方向平铺显示，所述左右两侧区域的最小重复单元沿垂直方向平铺显示；

将绘制的目标焦点图片显示在所述目标焦点区域上。

优选地，所述确定所述焦点图片的中心矩形区域，包括：

查看所述焦点图片的中心点的透明度；

若中心点完全透明，则从所述中心点沿水平方向，向左和向右扫描连续的完全透明的像素点，直至扫描到首个不完全透明的像素点，得到中心矩形区域的宽度；从所述中心点沿垂直方向，向上和向下扫描连续的完全透明的像素点，直至扫描到首个不完全透明的像素点，得到中心矩形区域的高度。

优选地，所述根据所述中心矩形区域，确定所述焦点图片的四个角区域、上下两侧区域和左右两侧区域，包括：

将所述中心矩形区域的四个边分别延长，直至延长至所述焦点图片的焦点框为止，得到所述焦点图片的四个角区域、上下两侧区域和左右两侧区域。

一种焦点图片显示装置，包括：

指令响应单元，用于响应对目标焦点区域的图片显示指令，获取预置的焦点图片；

第一区域确定单元，用于确定所述焦点图片的中心矩形区域，所述中心矩形区域完全透明；

第二区域确定单元，用于根据所述中心矩形区域，确定所述焦点图片的四个角区域、上下两侧区域和左右两侧区域，其中，中心矩形区域的宽度与上下两侧区域的宽度相同，中心矩形区域的高度与左右两侧区域的高度相同，上下两侧区域的高度与四个角区域的高度相同，左右两侧区域的宽度与四个角区域的宽度相同；

第一最小重复单元确定单元，用于确定所述上下两侧区域的最小重复单元为1像素点宽、X像素点高的区域，X为上下两侧区域的高度；

第二最小重复单元确定单元，用于确定所述左右两侧区域的最小重复单元为Y像素点宽、1像素点高的区域，Y为左右两侧区域的宽度；

目标图片绘制单元，用于利用所述中心矩形区域、所述四个角区域、所述上下两侧区域的最小重复单元以及所述左右两侧区域的最小重复单元，绘制目标焦点图片，目标焦点图片和目标焦点区域的宽度和高度均一致，其中，所述四个角区域以及所述中心矩形区域原样显示，所述上下两侧区域的最小重复单元沿水平方向平铺显示，所述左右两侧区域的最小重复单元沿垂直方向平铺显示；

图片显示单元，用于将绘制的目标焦点图片显示在所述目标焦点区域上。

优选地，所述第一区域确定单元包括：

中心点透明度查看单元，用于查看所述焦点图片的中心点的透明度；

扫描单元，用于在确定中心点完全透明时，从所述中心点沿水平方向，向左和向右扫描连续的完全透明的像素点，直至扫描到首个不完全透明的像素点，得到中心矩形区域的宽度；从所述中心点沿垂直方向，向上和向下扫描连续的完全透明的像素点，直至扫描到首个不完全透明的像素点，得到中心矩形区域的高度。

优选地，所述第二区域确定单元包括：

边线延长处理单元，用于将所述中心矩形区域的四个边分别延长，直至延长至所述焦点图片的焦点框为止，得到所述焦点图片的四个角区域、上下两侧区域和左右两侧区域。

从上述的技术方案可以看出，本申请实施例提供的焦点图片显示方法，响应目标焦点区域的图片显示指令，获取预置的焦点图片，确定焦点图片的中心矩形区域，该区域完全透明，进而据此确定焦点图片的四个角区域、上下两侧区域和左右两侧区域，并确定上下两侧区域的最小重复单元为1像素点宽、X像素点高的区域，X为上下两侧区域的高度，确定左右两侧区域的最小重复单元为Y像素点宽、1像素点高的区域，Y为左右两侧区域的宽度，在绘制与目标焦点区域尺寸一致的目标焦点图片时，四个角区域以及中心矩形区域原样显示，上下两侧区域的最小重复单元沿水平方向平铺显示，左右两侧区域的最小重复单元沿垂直方向平铺显示，最后将绘制的目标焦点图片显示在目标焦点区域上。由于焦点图片的中心矩形区域完全透明，因此在绘制时原样显示即可，四个角区域也可知直接原样显示，仅仅对上下两侧区域和左右两侧区域以最下重复单元进行平铺显示，保证了绘制好的目标焦点图片的焦点框的粗细不变，提升用户视觉体验。

附图说明

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

图1a-1c为本申请实施例公开的一种焦点图标显示方式示意图；

图2a-2b为现有焦点图标以不同缩放比例缩放后得到的焦点图标示意图；

图3为本申请实施例公开的一种焦点图片显示方法流程图；

图4为本申请实施例公开的一种焦点图片划分方式示意图；

图5为本申请实施例公开的一种确定焦点图片的中心矩形区域的方法流程图；

图6为本申请实施例公开的一种焦点图片显示装置结构示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

参见图3，图3为本申请实施例公开的一种焦点图片显示方法流程图。

如图3所示，该方法包括：

步骤S300、响应对目标焦点区域的图片显示指令，获取预置的焦点图片；

具体地，本申请预置有焦点图片，该焦点图片的尺寸是固定的。

一般性的，焦点区域和焦点图片都是矩形的，或者是仅仅改变矩形的四个角的形状，例如将四个角改成圆滑过渡的曲线等。本申请以焦点图片和目标焦点区域均为矩形为例进行说明。

步骤S310、确定所述焦点图片的中心矩形区域；

其中，所述中心矩形区域完全透明。

参见图4，图4为本申请实施例公开的一种焦点图片划分方式示意图。图4示例了一幅焦点图片，其宽度为W高德为H。编号为5的矩形区域为中心矩形区域，该区域完全透明。

步骤S320、根据所述中心矩形区域，确定所述焦点图片的四个角区域、上下两侧区域和左右两侧区域；

其中，中心矩形区域的宽度与上下两侧区域的宽度相同，中心矩形区域的高度与左右两侧区域的高度相同，上下两侧区域的高度与四个角区域的高度相同，左右两侧区域的宽度与四个角区域的宽度相同。

仍参照图4可知，其中编号为1、3、7和9的四个区域为角区域，编号为2的区域为上侧区域，编号为8的区域为下侧区域，编号为4的区域为左侧区域，编号为6的区域为右侧区域。

步骤S330、确定所述上下两侧区域的最小重复单元为1像素点宽、X像素点高的区域，X为上下两侧区域的高度；

具体地，针对上下两侧区域，分别确定其最小重复单元。若上侧区域的高度为X1，则上侧区域的最小重复单元为1像素点宽、X1像素点高的区域；若下侧区域的高度为X2，则下侧区域的最小重复单元为1像素点宽、X2像素点高的区域。

步骤S340、确定所述左右两侧区域的最小重复单元为Y像素点宽、1像素点高的区域，Y为左右两侧区域的宽度；

具体地，针对左右两侧区域，分别确定其最小重复单元。若左侧区域的宽度为Y1，则左侧区域的最小重复单元为Y1像素点宽、1像素点高的区域；若右侧区域的宽度为Y2，则右侧区域的最小重复单元为Y2像素点宽、1像素点高的区域。

步骤S350、利用所述中心矩形区域、所述四个角区域、所述上下两侧区域的最小重复单元以及所述左右两侧区域的最小重复单元，绘制目标焦点图片；

其中，绘制的目标焦点图片和目标焦点区域的宽度和高度均一致。在绘制目标焦点图片时，所述四个角区域以及所述中心矩形区域原样显示，所述上下两侧区域的最小重复单元沿水平方向平铺显示，所述左右两侧区域的最小重复单元沿垂直方向平铺显示。

可以理解的是，无论是对预置的焦点图片进行缩小还是放大，其四个角区域都可以保持不变，因此原样进行显示。而中心矩形区域为完全透明区域，因此可以直接原样显示。上下两侧区域的最小重复单元沿水平方向平铺显示，左右两侧区域的最小重复单元沿垂直方向平铺显示，平铺显示时不会改变焦点框的粗细。

进一步可选的，中心矩形区域是完全透明的区域，即便原样进行显示，对于显示程序来说，还是会运行到透明融合的逻辑，浪费CPU时间。因此，可以不对中心矩形区域进行显示。

步骤S360、将绘制的目标焦点图片显示在所述目标焦点区域上。

本申请实施例提供的焦点图片显示方法，响应目标焦点区域的图片显示指令，获取预置的焦点图片，确定焦点图片的中心矩形区域，该区域完全透明，进而据此确定焦点图片的四个角区域、上下两侧区域和左右两侧区域，并确定上下两侧区域的最小重复单元为1像素点宽、X像素点高的区域，X为上下两侧区域的高度，确定左右两侧区域的最小重复单元为Y像素点宽、1像素点高的区域，Y为左右两侧区域的宽度，在绘制与目标焦点区域尺寸一致的目标焦点图片时，四个角区域以及中心矩形区域原样显示，上下两侧区域的最小重复单元沿水平方向平铺显示，左右两侧区域的最小重复单元沿垂直方向平铺显示，最后将绘制的目标焦点图片显示在目标焦点区域上。由于焦点图片的中心矩形区域完全透明，因此在绘制时原样显示即可，四个角区域也可知直接原样显示，仅仅对上下两侧区域和左右两侧区域以最下重复单元进行平铺显示，保证了绘制好的目标焦点图片的焦点框的粗细不变，提升用户视觉体验。

在本申请的另一个实施例中，介绍确定焦点图片的中心矩形区域的过程。参见图5，图5为本申请实施例公开的一种确定焦点图片的中心矩形区域的方法流程图。

如图5所示，该方法包括：

步骤S500、查看所述焦点图片的中心点的透明度；若中心点完全透明，则执行步骤S510；

步骤S510、从所述中心点沿水平方向，向左和向右扫描连续的完全透明的像素点，直至扫描到首个不完全透明的像素点，得到中心矩形区域的宽度；

步骤S520、从所述中心点沿垂直方向，向上和向下扫描连续的完全透明的像素点，直至扫描到首个不完全透明的像素点，得到中心矩形区域的高度。

可选的，上述步骤S510和步骤S520的执行顺序可以调换，或者同时执行。

可选的，在上述确定中心矩形区域的宽度和高度之后，还可以进一步计算中心矩形区域占焦点图片的面积比例P：

P＝(CW*CH)/(W*H)

其中，CW和CH分别为中心矩形区域的宽度和高度，W和H分别为焦点图片的宽度和高度。

在计算得到面积比例P之后，进一步判断该P值是否大于预置比例阈值，若是，则进一步执行步骤S330-S370的过程。

进一步可选的，上述根据所述中心矩形区域，确定所述焦点图片的四个角区域、上下两侧区域和左右两侧区域的过程可以包括：

将所述中心矩形区域的四个边分别延长，直至延长至所述焦点图片的焦点框为止，得到所述焦点图片的四个角区域、上下两侧区域和左右两侧区域。

仍以图4为例进行说明：

本申请设定焦点图片的左上角为原点，从原点向右为X轴正向，从原点右下为Y轴正向。

用(x,y,w,h)的形式表示区域坐标范围，其中x,y代表区域左上角点的坐标，w,h代表区域的宽度和高度。则中心矩形区域为CX，CY,CW,CH。

如图4中的9个区域的坐标范围可以参照下表1所示：

表1

下面对本申请实施例提供的焦点图片显示装置进行描述，下文描述的焦点图片显示装置与上文描述的焦点图片显示方法可相互对应参照。

参见图6，图6为本申请实施例公开的一种焦点图片显示装置结构示意图。

如图6所示，该装置包括：

指令响应单元61，用于响应对目标焦点区域的图片显示指令，获取预置的焦点图片；

第一区域确定单元62，用于确定所述焦点图片的中心矩形区域，所述中心矩形区域完全透明；

第二区域确定单元63，用于根据所述中心矩形区域，确定所述焦点图片的四个角区域、上下两侧区域和左右两侧区域，其中，中心矩形区域的宽度与上下两侧区域的宽度相同，中心矩形区域的高度与左右两侧区域的高度相同，上下两侧区域的高度与四个角区域的高度相同，左右两侧区域的宽度与四个角区域的宽度相同；

第一最小重复单元确定单元64，用于确定所述上下两侧区域的最小重复单元为1像素点宽、X像素点高的区域，X为上下两侧区域的高度；

第二最小重复单元确定单元65，用于确定所述左右两侧区域的最小重复单元为Y像素点宽、1像素点高的区域，Y为左右两侧区域的宽度；

目标图片绘制单元66，用于利用所述中心矩形区域、所述四个角区域、所述上下两侧区域的最小重复单元以及所述左右两侧区域的最小重复单元，绘制目标焦点图片，目标焦点图片和目标焦点区域的宽度和高度均一致，其中，所述四个角区域以及所述中心矩形区域原样显示，所述上下两侧区域的最小重复单元沿水平方向平铺显示，所述左右两侧区域的最小重复单元沿垂直方向平铺显示；

图片显示单元67，用于将绘制的目标焦点图片显示在所述目标焦点区域上。

由于焦点图片的中心矩形区域完全透明，因此在绘制时原样显示即可，四个角区域也可知直接原样显示，仅仅对上下两侧区域和左右两侧区域以最下重复单元进行平铺显示，保证了绘制好的目标焦点图片的焦点框的粗细不变，提升用户视觉体验。

可选的，所述第一区域确定单元可以包括：

中心点透明度查看单元，用于查看所述焦点图片的中心点的透明度；

扫描单元，用于在确定中心点完全透明时，从所述中心点沿水平方向，向左和向右扫描连续的完全透明的像素点，直至扫描到首个不完全透明的像素点，得到中心矩形区域的宽度；从所述中心点沿垂直方向，向上和向下扫描连续的完全透明的像素点，直至扫描到首个不完全透明的像素点，得到中心矩形区域的高度。

可选的，所述第二区域确定单元可以包括：

边线延长处理单元，用于将所述中心矩形区域的四个边分别延长，直至延长至所述焦点图片的焦点框为止，得到所述焦点图片的四个角区域、上下两侧区域和左右两侧区域。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本申请。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本申请的精神或范围的情况下，在其它实施例中实现。因此，本申请将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (6)

1.一种焦点图片显示方法，其特征在于，包括：

响应对目标焦点区域的图片显示指令，获取预置的焦点图片；

确定所述焦点图片的中心矩形区域，所述中心矩形区域完全透明；

根据所述中心矩形区域，确定所述焦点图片的四个角区域、上下两侧区域和左右两侧区域，其中，中心矩形区域的宽度与上下两侧区域的宽度相同，中心矩形区域的高度与左右两侧区域的高度相同，上下两侧区域的高度与四个角区域的高度相同，左右两侧区域的宽度与四个角区域的宽度相同；

确定所述上下两侧区域的最小重复单元为1像素点宽、X像素点高的区域，X为上下两侧区域的高度；

确定所述左右两侧区域的最小重复单元为Y像素点宽、1像素点高的区域，Y为左右两侧区域的宽度；

利用所述中心矩形区域、所述四个角区域、所述上下两侧区域的最小重复单元以及所述左右两侧区域的最小重复单元，绘制目标焦点图片，目标焦点图片和目标焦点区域的宽度和高度均一致，其中，所述四个角区域以及所述中心矩形区域原样显示，所述上下两侧区域的最小重复单元沿水平方向平铺显示，所述左右两侧区域的最小重复单元沿垂直方向平铺显示；

将绘制的目标焦点图片显示在所述目标焦点区域上。

2.根据权利要求1所述的方法，其特征在于，所述确定所述焦点图片的中心矩形区域，包括：

查看所述焦点图片的中心点的透明度；

若中心点完全透明，则从所述中心点沿水平方向，向左和向右扫描连续的完全透明的像素点，直至扫描到首个不完全透明的像素点，得到中心矩形区域的宽度；从所述中心点沿垂直方向，向上和向下扫描连续的完全透明的像素点，直至扫描到首个不完全透明的像素点，得到中心矩形区域的高度。

3.根据权利要求1所述的方法，其特征在于，所述根据所述中心矩形区域，确定所述焦点图片的四个角区域、上下两侧区域和左右两侧区域，包括：

将所述中心矩形区域的四个边分别延长，直至延长至所述焦点图片的焦点框为止，得到所述焦点图片的四个角区域、上下两侧区域和左右两侧区域。

4.一种焦点图片显示装置，其特征在于，包括：

指令响应单元，用于响应对目标焦点区域的图片显示指令，获取预置的焦点图片；

第一区域确定单元，用于确定所述焦点图片的中心矩形区域，所述中心矩形区域完全透明；

第二区域确定单元，用于根据所述中心矩形区域，确定所述焦点图片的四个角区域、上下两侧区域和左右两侧区域，其中，中心矩形区域的宽度与上下两侧区域的宽度相同，中心矩形区域的高度与左右两侧区域的高度相同，上下两侧区域的高度与四个角区域的高度相同，左右两侧区域的宽度与四个角区域的宽度相同；

第一最小重复单元确定单元，用于确定所述上下两侧区域的最小重复单元为1像素点宽、X像素点高的区域，X为上下两侧区域的高度；

第二最小重复单元确定单元，用于确定所述左右两侧区域的最小重复单元为Y像素点宽、1像素点高的区域，Y为左右两侧区域的宽度；

目标图片绘制单元，用于利用所述中心矩形区域、所述四个角区域、所述上下两侧区域的最小重复单元以及所述左右两侧区域的最小重复单元，绘制目标焦点图片，目标焦点图片和目标焦点区域的宽度和高度均一致，其中，所述四个角区域以及所述中心矩形区域原样显示，所述上下两侧区域的最小重复单元沿水平方向平铺显示，所述左右两侧区域的最小重复单元沿垂直方向平铺显示；

图片显示单元，用于将绘制的目标焦点图片显示在所述目标焦点区域上。

5.根据权利要求4所述的装置，其特征在于，所述第一区域确定单元包括：

中心点透明度查看单元，用于查看所述焦点图片的中心点的透明度；

扫描单元，用于在确定中心点完全透明时，从所述中心点沿水平方向，向左和向右扫描连续的完全透明的像素点，直至扫描到首个不完全透明的像素点，得到中心矩形区域的宽度；从所述中心点沿垂直方向，向上和向下扫描连续的完全透明的像素点，直至扫描到首个不完全透明的像素点，得到中心矩形区域的高度。

6.根据权利要求4所述的装置，其特征在于，所述第二区域确定单元包括：

边线延长处理单元，用于将所述中心矩形区域的四个边分别延长，直至延长至所述焦点图片的焦点框为止，得到所述焦点图片的四个角区域、上下两侧区域和左右两侧区域。