CN104978186B - 一种界面皮肤的渲染方法和装置 - Google Patents

Abstract

本发明实施例公开了一种界面皮肤的渲染方法，包括：将目标区域内的子背景图像的颜色模型转换为色调饱和度亮度HSV颜色模型；其中，所述目标区域为目标控件对应的区域；计算所述子背景图像中黑灰像素的比例值；其中，所述黑灰像素为亮度值小于第一阈值的像素；若所述比例值小于第二阈值，确定所述子背景图像的主色调；查询与所述主色调关联的图像混合模式，并根据图像混合模式将所述目标控件与所述子背景图像在所述目标区域内进行混合。本发明实施例还公开了一种界面皮肤的渲染装置。采用本发明，使用户界面上的控件显示更清晰。

Description

一种界面皮肤的渲染方法和装置

技术领域

本发明涉及计算机领域，尤其涉及一种界面皮肤的渲染方法和装置。

背景技术

越来越多的应用程序提供更换用户界面的皮肤的功能，例如浏览器、播放器、安全软件等，皮肤即用户界面的背景图像，应用程序可以在本地或服务器提供多种不同风格的背景图像供用户选择。目前主流的更换皮肤的方式包含两种：第一种是将背景图像作为网页，对用户界面的整个区域进行渲染和绘制。第二种是将背景图像作为用户界面的底层，只对用户界面中的部分区域进行渲染和绘制，例如用户界面的标题栏和菜单栏等。渲染和绘制的过程是：基于操作系统提供的原生窗口确定各个控件的位置，将控件和对应位置的子背景图像进行图像混合，子背景图像对应底层颜色，控件对应对象颜色，通过特定的图像混合算法将底层颜色和对象颜色进行混合。

针对用户选择的背景图像，如果背景图像不是纯色图像，用户界面的不同区域可能呈现不同的色彩风格，例如有些区域是深色系，有些区域为浅色系。在目前的渲染和绘制的过程中，采用一致的图像混合模式对用户界面的指定区域将背景图像进行图像混合，可能会存在背景图像颜色跳变造成的控件显示不清晰的问题。

发明内容

本发明实施例所要解决的技术问题在于，提供一种界面皮肤的渲染方法和装置。可目前的用户界面更换皮肤后存在显示不清晰的问题。

为了解决上述技术问题，本发明实施例提供了一种界面皮肤的渲染方法，包括：

将目标区域内的子背景图像的颜色模型转换为色调饱和度亮度HSV颜色模型；其中，所述目标区域为目标控件对应的区域；

计算所述子背景图像中黑灰像素的比例值；其中，所述黑灰像素为亮度值小于第一阈值的像素；

若所述比例值小于第二阈值，确定所述子背景图像的主色调；

查询与所述主色调关联的图像混合模式，并根据图像混合模式将所述目标控件与所述子背景图像在所述目标区域内进行混合。

相应地，本发明实施例还提供了一种界面皮肤的渲染装置，包括：

其中色彩转换模块，用于将目标区域内的子背景图像的颜色模型转换为色调饱和度亮度HSV颜色模型；其中，所述目标区域为目标控件对应的区域；

比例计算模块，用于计算所述子背景图像中黑灰像素的比例值；其中，所述黑灰像素为亮度值小于第一阈值的像素；

主色调确定模块，用于若所述比例值小于第二阈值，确定所述子背景图像的主色调；

混合模块，用于查询与所述主色调关联的图像混合模式，并根据图像混合模式将所述目标控件与所述子背景图像在所述目标区域内进行混合。

实施本发明实施例，具有如下有益效果：

通过识别目标区域内子背景图像的主色调，根据不同的主色调选择不同的图像混合模式，根据选择的不同混合模式将用户界面上的目标空间和子背景图像在目标区域内进行混合。这样能够根据子背景图像的色调变化选择合适的图像混合模式，避免现有技术中单一的图像混合模式造成的目标控件显示效果不佳的问题。

附图说明

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

图1是本发明实施例提供的一种界面皮肤的渲染方法的流程示意图；

图2是本发明实施例提供的一种界面皮肤的渲染方法的另一流程示意图；

图3是本发明实施例提供的一种用户界面的示意图；

图4是本发明实施例提供的一种界面皮肤的渲染装置的结构示意图；

图5是本发明实施例提供的一种界面皮肤的渲染装置的另一结构示意图；

图6是图5中比例计算模块的结构示意图；

图7是图5中主色调确定模块的结构示意图。

具体实施方式

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

参见图1，为本发明实施例提供的一种界面皮肤的渲染方法的流程示意图，在本发明实施例中，所述方法包括：S101-S104。

S101、将目标区域内的子背景图像的颜色模型转换为色调饱和度亮度HSV颜色模型；其中，所述指定区域为目标控件对应的区域。

具体的，目标控件为用户界面上的文字和/或图像，例如，浏览器用户界面上的前进按钮、后退按钮和停止按钮，上述按钮可以为文字和/或图片。用户界面上包含多个控件，每个控件的位置是固定的，控件的形状一般为规则的圆形或矩形，当需要更换用户界面的皮肤时，将预先准备的背景图像设置在用户界面的底层，背景图像的形状与用户界面的形状相匹配，这样每个控件对应的区域内分割出一个子背景图像，渲染装置需要对每个控件和关联的子背景图像进行图像混合后得到最终的显示效果。其中，渲染装置对控件进行渲染时可以依据一定的顺序进行，例如从上到下，从左到右的顺序依次对用户界面中的控件进行渲染。

目标控件为用户界面包含的所有控件中的任意一个，目标控件对应的区域为目标区域，目标区域内对应子背景图像，子背景图像为用户界面的背景图像的一部分，一般而言，显示器上显示的背景图像的颜色模型不为HSV颜色模型，例如为RGB颜色模型，作为背景图像的一部分的子背景图像的颜色模型也为RGB颜色模型，为了便于后续处理，渲染装置需要将子背景图像的颜色模型转换为HSV颜色模型。其中，其他颜色模型到HSV颜色模型的转换过程现有技术已作披露，此处不再赘述。

S102、计算所述子背景图像中黑灰像素的比例值；其中，所述黑灰像素为亮度值小于第一阈值的像素。

具体的，渲染装置确定子背景图像包含的各个像素的亮度值，将亮度值小于第一阈值的像素作为黑灰像素，计算子背景图像中黑灰像素的数量占所有的像素的数量的比例值。

S103、若所述比例值小于第二阈值，确定所述子背景图像的主色调。

具体的，如果S102计算得到的比例值小于第二阈值，根据子背景图像中包含的所有的像素的色调值确定子背景图像的主色调。

S104、查询与所述主色调关联的图像混合模式，并根据图像混合模式将所述目标控件与所述子背景图像在所述目标区域内进行混合。

具体的，渲染装置查询子背景图像的主色调关联的图像混合模式，根据查询到的图像混合模型将目标控件和子背景图像在目标区域内进行混合。

实施本发明的实施例，通过识别目标区域内子背景图像的主色调，根据不同的主色调选择不同的图像混合模式，根据选择的不行混合模式将用户界面上的目标空间和子背景图像在目标区域内进行混合。这样能够根据子背景图像的色调变化选择合适的图像混合模式，避免现有技术中单一的图像混合模式造成的目标控件显示效果不佳的问题。

参见图2，为本发明实施例提供的一种界面皮肤的渲染方法的另一流程示意图，在本发明实施例中，所述方法包括：

S201、接收用于切换用户界面的皮肤的切换指令后，获取所述切换指令对应的背景图像和所述用户界面上的所有控件对应的区域。

具体的，应用软件提供更换用户界面的皮肤的功能，当渲染装置接收用于切换用户界面的皮肤的切换指令后，将当前背景图像切换为需要的背景图像，背景图像为预先设置在本地或从服务器中获取的，背景图像可以是纯色的图像也可以是人物或风景等非纯色的图像。用户界面和背景图像的形状相同，用户界面上设有若干个控件，例如播放器软件的用户界面上设有开始、暂停、快进和快退等控件，点击控件后软件执行对应的功能，控件在用户界面上表现为图像和/或文字，渲染装置获取用户界面上所有的控件对应的区域，控件对应的区域一般规则的形状，例如为圆形或矩形。

示例性的，用户界面的当前背景图像为纯黑色图像，用户界面上设有3个控件，分别为控件1、控件2和控件3，每个控件的形状为矩形，每个控件对应的区域为一个矩形区域，每个控件的位置可以利用用户界面中的相对坐标来表示。渲染装置接收用户切换用户界面的皮肤的切换指令后，显示供用户选择的背景图像的列表，列表中显示各种背景图像的缩略图，当用户选择列表中的某个背景图像时，渲染装置获取选择的背景图像。

S202、确定目标控件对应的目标区域，以及所述目标区域内的子背景图像；其中，所述目标控件为所述用户界面上的所有控件中的任意一个。

具体的，目标控件为用户界面上的任意一个控件，目标控件对应的目标区域中的子背景图像为背景图像的一部分，背景图像和用户界面的形状和大小相同，子背景图像可根据目标控件的位置从背景图像中确定。

示例性的，目标控件为S201中的控件1，控件1在用户界面上的位置确定对应的目标区域和子背景图像。

S203、将目标区域内的子背景图像的颜色模型转换为色调饱和度亮度HSV颜色模型；其中，所述目标区域为目标控件对应的区域。

目标控件对应的区域为目标区域，目标区域内对应子背景图像，子背景图像为用户界面的背景图像的一部分，一般而言，显示器上显示的背景图像的颜色模型不为HSV颜色模型，例如为RGB颜色模型，原因是Windows应用程序实现过程中主要使用RGB颜色模型。作为背景图像的一部分的子背景图像的颜色模型也为RGB颜色模型，为了便于后续处理，渲染装置需要将子背景图像的颜色模型转换为HSV颜色模型。其中，其他颜色模型到HSV颜色模型的转换过程现有技术已作披露，此处不再赘述。

S204、生成第一像素集合；其中，所述第一像素集合包含所述子背景图像的所有像素。

具体的，S204中的子背景图像的像素为HSV颜色模型的像素，每个子背景中的每个像素携带的参数包括色调值、饱和度值、亮度值和透明度值，渲染装置获取转换颜色模型后的子背景图像的分辨率生成第一像素集合。例如，控件1对应的子背景图像的分辨率为20*24，则渲染装置生成的第一像素集合中包含480个像素。

S205、剔除所述第一像素集合中的透明像素；其中，所述透明像素为透明度值小于第三阈值的像素。

具体的，在HSV颜色模型的图像中，图像中的每个像素不仅具有亮度值、饱和度值和色调值的属性，还具有透明度值的属性，透明度用于表示像素不可见的程度。透明像素对于用户而言不可见，不影响显示效果，可以剔除第一像素集合中的透明像素，以达到减少运算量的目的，渲染装置剔除第一像素集合中的透明像素，透明像素为透明度值小于第三阈值的像素，第三阈值根据经验值进行设定，像素的透明度可以采用数值或百分比来表示。例如，透明度值可以用数值来表示，像素的透明度的最小值为0，表示完全透明，透明度为255表示完全不透明，由于人眼的分辨率有限，可以将第三阈值设置为大于0，如设置第三阈值设置为180，渲染装置依次获取第一像素集合中各个像素的透明度值，当像素的透明度值小于180时，判断该像素为透明像素，从第一像素集合中剔除该像素，直到第一像素集合中所有的透明像素被剔除。

S206、计算所述第一像素集合中包含的像素的总数量，以及计算所述第一像素集合中包含的黑灰像素的数量；其中，所述黑灰像素为亮度值小于第一阈值的像素。

具体的，执行透明像素的剔除操作后，第一像素集合中的像素的总数量将会减少，渲染装置计算执行剔除操作后的第一像素集合中的像素的总数据，计算第一像素集合中黑灰像素的数量，黑灰像素为亮度值小于第一阈值的像素。

示例性的，子背景图像的数量为480，S204中剔除的透明像素的数量为50，则此时第一像素集合中的像素的总数量为480-50＝430，假设亮度值用数值来表示，亮度值的范围为0-255，0表示像素的亮度最小，255表示像素的亮度最大。第一阈值为100，渲染装置依次获取第一像素集合中的各个像素的亮度值，如果像素的亮度值小于100，则判断该像素为黑灰像素，将黑灰像素的数量加1，按照上述方法，统计出第一像素集合中黑灰像素的数量。

S207、将所述黑灰像素的数量除以所述像素的总数量得到所述比例值。

具体的，渲染装置将S206中统计的黑灰像素的数量和执行剔除操作的第一像素集合包含的像素的总数量的商，得到子背景图像中黑灰像素的比例值。

示例性的，黑灰像素的数量为100个，执行剔除操作后的第一像素集合中包含的像素的总数量为430个，则子背景图像中黑灰像素的比例值为(100/430)*100％＝23.3％。

S208、判断所述比例值是否小于第二阈值。

具体的，渲染装置判断S207计算得到的比例值是否小于第二阈值，如果是，执行S209，否则执行S210。第二阈值根据经验值进行设定，比例值大于第一阈值表明子背景图像为黑灰色调。

S209、确定所述子背景图像的主色调。

具体的，渲染装置根据子背景图像中各个像素的色调值来确定子背景图像的主色调，例如可以将色调区域划分为若干个子色调区间，每个子色调区间对应一种色调，确定子背景图像的各个像素的色调落入到哪个色调区间，其中，子背景图像的像素为剔除了透明像素后的像素，判断哪个子色调区间中落入的像素的数量，将像素数量最多的子色调区间对应的色调作为子背景图像的主色调。

示例性的，子背景图像对应第一像素集合，剔除透明像素后的第一像素集合中的像素的数量为430，色调区间的范围为0-255，将色调区间划分为7个子色调区间，假设0-40的子色调区1间对应红色，40-80的子色调区间2对应橙色，80-120的子色调区间3对应黄色，120-160的子色调区间4对应绿色，160-200的子色调区间5对应青色，200-240的子色调区间6对应蓝色，240-255的子色调区间7对应紫色。依次获取剔除透明像素的第一像素集合中各个像素的色调值，确定像素落入哪个子色调区间，最后统计每个子色调区间中落入的像素的数量，假设落入子色调区间1的像素的数量最多，将子色调区间1对应的色调红色作为子背景图像的主色调。

需要说明的是，子色调区间的划分不限于本发明实施例的划分方法，可以根据需要进行划分。

S210、采用线性减淡模式将所述目标控件与所述子背景图像在所述目标区域内进行混合。

具体的，子背景图像中黑灰像素占大多数，子背景图像整体呈现出暗淡的显示效果，渲染装置采用线性减淡模式将目标控件和子背景图像进行混合，目标区间内的目标控件显示效果更加清晰。

S211、查询与所述主色调关联的图像混合模式，并根据图像混合模式将所述目标控件与所述子背景图像在所述目标区域内进行混合。

具体的，每种主色调预先关联有对应的图像混合模式，主色调和关联的图像混合模式组合，能使目标控件的显示效果更加清晰，具体哪种主色调和哪种图像混合模式关联，可由用户界面开发人员根据需要进行设定。渲染装置根据预设的关联关系查询主色调关联的图像混合模式，根据查询到的图像混合模式将目标控件和子背景图像进行混合。

需要说明的是，用户界面上的其他控件也采用上述渲染方式和对应的子背景图像进行混合，用户界面上控件以外的区域不需要进行图像混合处理，可直接采用该区域对应的子背景图像进行显示。

实施本发明的实施例，通过识别目标区域内子背景图像的主色调，根据不同的主色调选择不同的图像混合模式，根据选择的不行混合模式将用户界面上的目标空间和子背景图像在目标区域内进行混合。这样能够根据子背景图像的色调变化选择合适的图像混合模式，避免现有技术中单一的图像混合模式造成的目标控件显示效果不佳的问题。

参见图4，为本发明实施例提供的一种用户界面的渲染方法的示意图，在本实施例中，用户界面3设置有3个控件，6个控件从左往右分别表示前进、后退、主页，窗口最大化、窗口最小化和关闭窗口的功能，每个控件所在的区域为矩形区域。设目标控件为用户界面中的31，当渲染装置接收到更换用户界面皮肤的切换指令时，将用户界面的当前背景切换为需要的背景图像，背景图像和用户界面的形状和大小相同，图4中的用户界面为矩形，则需要的背景图像的形状也为矩形，目标控件31在用户界面上的位置是预先确定的，目标控件31对应的目标区域为33，目标区域33对应的子背景图像为32。渲染装置将子背景图像32的像素的颜色模型转换为HSV颜色模型，再剔除子背景图像中的透明像素，技术子背景图像32中黑灰像素的比例值，如果比例值大于预设阈值，根据线性减淡混合模式将目标控件31和子背景图像32在目标区域33内进行混合。如果比例值不大于预设阈值，确定子背景图像32的主色调，根据主色调查询关联的图像混合模式，使用查询到的图像混合模式将目标控件31和子背景图像32在目标区域33内进行混合。

参见图4，为本发明实施例提供的一种界面皮肤的渲染装置的结构示意图，在本发明实施例中，所述渲染装置包括：色彩转换模块10、比例计算模块11、主色调确定模块12和混合模块13。

色彩转换模块，用于将目标区域内的子背景图像的颜色模型转换为色调饱和度亮度HSV颜色模型；其中，所述目标区域为目标控件对应的区域；

比例计算模块，用于计算所述子背景图像中黑灰像素的比例值；其中，所述黑灰像素为亮度值小于第一阈值的像素；

主色调确定模块，用于若所述比例值小于第二阈值，确定所述子背景图像的主色调；

混合模块，用于查询与所述主色调关联的图像混合模式，并根据图像混合模式将所述目标控件与所述子背景图像在所述目标区域内进行混合。

本发明实施例和方法实施例一基于同一构思，其带来的技术效果也相同，具体原理请参照方法实施例一的描述，此处不再赘述。

进一步的，参见图5-图7，为本发明实施例提供的一种界面皮肤的渲染装置的另一结构示意图，在本发明实施例中，所述渲染装置除包括：色彩转换模块10、比例计算模块11、主色调确定模块12和混合模块13，还包括：获取模块14和确定模块15。

获取模块14，用于接收用于切换用户界面的皮肤的切换指令后，获取所述切换指定对应的背景图像和所述用户界面上的所有控件对应的区域。

确定模块，用于确定所述目标控件对应的目标区域，以及所述目标区域内的子背景图像；其中，所述目标控件为所述用户界面上的所有控件中的任意一个控件。

其中，比例计算模块11包括：生成单元111、计算单元113和求商单元114。

生成单元111，用于生成第一像素集合；其中，所述第一像素集合包含所述子背景图像的所有像素。

计算单元113，用于计算第一像素集合中包含的像素的总数量，以及计算所述第一像素集合中包含的黑灰像素的数量。

求商单元114，用于将所述黑灰像素的数量除以所述像素的总数量得到所述比例值。

可选的，比例计算模块11还包括剔除单元112。

剔除单元，用于剔除所述第一像素集合的透明像素；其中，所述透明像素为透明度值小于第三阈值的像素。

其中，所述主色调确定模块12包括：划分单元121和统计单元122。

划分单元，用于将总色调区间划分为若干个子色调区间。

统计单元，用于根据所述第一像素集合统计落入各个子色调区间的像素的数量，并将落入像素的数量最多的子色调区间关联的主色调作为所述子背景图像的主色调。

本发明实施例和方法实施例二基于同一构思，其带来的技术效果也相同，具体原理请参照方法实施例二的描述，此处不再赘述。

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

以上所揭露的仅为本发明一种较佳实施例而已，当然不能以此来限定本发明之权利范围，本领域普通技术人员可以理解实现上述实施例的全部或部分流程，并依本发明权利要求所作的等同变化，仍属于发明所涵盖的范围。

Claims (8)

1.一种界面皮肤的渲染方法，其特征在于，包括：

接收用于切换用户界面的皮肤的切换指令后，获取所述切换指令对应的背景图像和所述用户界面上的所有控件对应的区域；

确定目标控件对应的目标区域，以及所述目标区域内的子背景图像；其中，所述目标控件为所述用户界面上的所有控件中的任意一个控件；

将所述目标区域内的子背景图像的颜色模型转换为色调饱和度亮度HSV颜色模型；其中，所述目标区域为目标控件对应的区域；

计算所述子背景图像中黑灰像素的比例值；其中，所述黑灰像素为亮度值小于第一阈值的像素，所述比例值表示黑灰像素的数量和所述子背景图像中所有像素的数量的比例；

若所述比例值不大于预设阈值，确定所述子背景图像的主色调；

查询与所述主色调关联的图像混合模式，并根据图像混合模式将所述目标控件与所述子背景图像在所述目标区域内进行混合；

若所述比例值大于预设阈值，根据线性减淡模式将所述目标控件与所述子背景图像在所述目标区域内进行混合。

2.如权利要求1所述的方法，其特征在于，所述计算所述子背景图像中黑灰像素的比例值包括：

生成第一像素集合；其中，所述第一像素集合包含所述子背景图像的所有像素；

计算第一像素集合中包含的像素的总数量，以及计算所述第一像素集合中包含的黑灰像素的数量；

将所述黑灰像素的数量除以所述像素的总数量得到所述比例值。

3.如权利要求2所述的方法，其特征在于，所述生成第一像素集合之后，还包括：

获取所述第一像素集合中的透明像素，并剔除所述第一像素集合的透明像素；其中，所述透明像素为透明度值小于第三阈值的像素。

4.如权利要求3所述的方法，其特征在于，所述确定子背景图像的主色调包括：

将总色调区间划分为若干个子色调区间；

根据所述第一像素集合统计落入各个子色调区间的像素的数量，并将落入像素的数量最多的子色调区间关联的主色调作为所述子背景图像的主色调。

5.一种界面皮肤的渲染装置，其特征在于，包括：

获取模块，用于接收用于切换用户界面的皮肤的切换指令后，获取所述切换指令对应的背景图像和所述用户界面上的所有控件对应的区域；

确定模块，用于确定目标控件对应的目标区域，以及所述目标区域内的子背景图像；其中，所述目标控件为所述用户界面上的所有控件中的任意一个控件；

色彩转换模块，用于将所述目标区域内的子背景图像的颜色模型转换为色调饱和度亮度HSV颜色模型；其中，所述目标区域为目标控件对应的区域；

比例计算模块，用于计算所述子背景图像中黑灰像素的比例值；其中，所述黑灰像素为亮度值小于第一阈值的像素，所述比例值表示黑灰像素的数量和所述子背景图像中所有像素的数量的比例；

主色调确定模块，用于若所述比例值不大于预设阈值，确定所述子背景图像的主色调；

混合模块，用于查询与所述主色调关联的图像混合模式，并根据图像混合模式将所述目标控件与所述子背景图像在所述目标区域内进行混合；

若所述比例值大于预设阈值，根据线性减淡模式将所述目标控件与所述子背景图像在所述目标区域内进行混合。

6.如权利要求5所述的渲染装置，其特征在于，所述比例计算模块包括：

生成单元，用于生成第一像素集合；其中，所述第一像素集合包含所述子背景图像的所有像素；

计算单元，用于计算第一像素集合中包含的像素的总数量，以及计算所述第一像素集合中包含的黑灰像素的数量；

求商单元，用于将所述黑灰像素的数量除以所述像素的总数量得到所述比例值。

7.如权利要求6所述的渲染装置，其特征在于，还包括：

剔除单元，用于获取所述第一像素集合中的透明像素，并剔除所述第一像素集合的透明像素；其中，所述透明像素为透明度值小于第三阈值的像素。

8.如权利要求6或7所述的渲染装置，其特征在于，所述主色调确定模块包括：

划分单元，用于将总色调区间划分为若干个子色调区间；

统计单元，用于根据所述第一像素集合统计落入各个子色调区间的像素的数量，并将落入像素的数量最多的子色调区间关联的主色调作为所述子背景图像的主色调。