CN106033334B - 绘制界面元素的方法和装置 - Google Patents

Abstract

本发明提供了一种绘制界面元素的方法和装置，所述方法包括：获取界面元素的前景基准图和相应的背景图像；确定所述前景基准图和所述背景图像的图像混合模式；根据所述确定的图像混合模式所对应的计算方式，对所述前景基准图进行像素置换，获得待绘制的前景图像；绘制所述待绘制的前景图像。采用本发明提供的绘制界面元素的方法和装置，通过图像混合可以获得与交互界面当前色彩风格更一致的视觉效果，不再需要为各种色彩风格的界面预先设计各种贴图资源，克服了贴图资源占用的存储资源不可控的问题，而且可以节省设计各种贴图资源所需的人力成本。

Description

绘制界面元素的方法和装置

技术领域

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

背景技术

在计算机应用程序中，控件或称为部件，是交互界面的一种界面元素，控件为给定的数据的直接操作(direct manipulation)提供单独的互动点。用户可通过控件实现与应用程序的交互。

目前主要通过贴图方式来实现绘制控件。绘制一个控件包括控件展示内容和背景两个组成部分，展示内容包括文字和图标等。通常绘制控件时所需贴图资源会包含到应用程序的皮肤资源中，在应用程序的交互界面的指定区域上，根据需要绘制上对应的贴图资源便实现了控件的绘制。

然而，应用程序的交互界面具有各种色彩风格，这里的色彩风格是指交互界面上各个界面元素的色彩搭配所体现出的整体效果。通过贴图方式来绘制控件，由于贴图资源是事先设计好的，需要在应用程序的皮肤资源中准备若干组贴图资源来应对不同色彩风格下的控件绘制。在具体实现绘制控件时，根据需要从应用程序的皮肤资源中选择所需的贴图资源进行控件绘制，欠缺灵活性。而且由于应用程序的色彩风格难以预期，为实现不同的色彩风格下的交互界面，需要不断重新设计和更新皮肤资源，这样又会导致应用程序所需的皮肤资源数量不可控，进而导致占用的存储资源不可控。

发明内容

基于此，有必要针对目前通过贴图方式来绘制控件占用的存储资源不可控的问题，提供一种绘制界面元素的方法和装置。

一种绘制界面元素的方法，所述方法包括：

获取界面元素的前景基准图和相应的背景图像；

确定所述前景基准图和所述背景图像的图像混合模式；

根据所述确定的图像混合模式所对应的计算方式，对所述前景基准图进行像素置换，获得待绘制的前景图像；

绘制所述待绘制的前景图像。

一种绘制界面元素的装置，所述装置包括：

获取模块，用于获取界面元素的前景基准图和相应的背景图像；

模式确定模块，用于确定所述前景基准图和所述背景图像的图像混合模式；

待绘制的前景图像生成模块，用于根据所述确定的图像混合模式所对应的计算方式，对所述前景基准图进行像素置换，获得待绘制的前景图像；

绘制模块，用于绘制所述待绘制的前景图像。

上述绘制界面元素的方法和装置，为绘制控件这样的界面元素，仅需要准备前景基准图，通过图像混合获得待绘制的前景图像并绘制，从而得到所需的界面元素效果。这样通过图像混合可以获得与交互界面当前色彩风格更一致的视觉效果，不再需要为各种色彩风格的界面预先设计各种贴图资源，克服了贴图资源占用的存储资源不可控的问题，而且可以节省设计各种贴图资源所需的人力成本。

附图说明

图1为一个实施例中用于实现绘制界面元素的方法的电子设备的内部结构图；

图2为一个实施例中绘制界面元素的方法的流程示意图；

图3为一个实施例中一个界面元素的示意图；

图4为一个实施例中根据确定的图像混合模式所对应的计算方式，对前景基准图进行像素置换，获得待绘制的前景图像的步骤的流程示意图；

图5为一个实施例中切换界面元素的状态的步骤的流程示意图；

图6为一个实施例中用户操作界面元素导致界面元素状态发生变化的示意图；

图7为一个实施例中将界面元素原始状态的前景图像重绘为期望状态的前景图像的步骤的流程示意图；

图8为一个实施例中绘制界面元素的装置的结构框图；

图9为一个实施例中图8中的待绘制的前景图像生成模块的结构框图；

图10为另一个实施例中绘制界面元素的装置的结构框图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

如图1所示，在一个实施例中，提供了一种用于实现绘制界面元素的方法的电子设备100，包括通过系统总线连接的处理器、内存、存储介质和显示屏幕。其中，该电子设备100的存储介质存储有操作系统和一种绘制界面元素的装置，该绘制界面元素的装置用于实现一种绘制界面元素的方法。该电子设备的处理器具有计算和控制能力，该处理器被配置为执行一种绘制界面元素的方法。该电子设备100可以是台式计算机，也可以是诸如手机、平板电脑的移动终端。

如图2所示，在一个实施例中，提供了一种绘制界面元素的方法，本实施例以该方法应用于上述图1中的电子设备100来举例说明。该方法具体包括如下步骤：

步骤202，获取界面元素的前景基准图和相应的背景图像。

具体地，可以在生成操作系统或者应用程序的交互界面时，或者在根据用户操作切换交互界面中的界面元素的状态时执行步骤202。界面元素是构成操作系统或者应用程序的交互界面的组成部分，比如一个可视的控件或者一个单纯的图标。应用程序可以是网页浏览器、阅读软件、即时通信软件等任意应用程序。从应用程序类型上分，应用程序可以是原生应用程序、网页应用程序以及轻应用程序等。

背景是交互界面的底层，前景则在交互界面的背景之上，是需要展示的内容。前景的颜色一般与背景的颜色不同，从而与交互界面其它部分区分开。界面元素与前景基准图对应，该前景基准图作为绘制相应的界面元素的基础，各种效果的界面元素均可根据该前景基准图生成。背景图像则是指交互界面中用来绘制相应的界面元素的位置处的底层图像。举例来说，如图3所示，一个界面元素300，其前景图像为302，对应的背景图像为304。

步骤204，确定前景基准图和背景图像的图像混合模式。

图像混合模式是指将某图像对象的颜色与底层对象的颜色混合的方式，这里具体是将前景基准图和背景图像混合的方式。通过图像混合，可以使得绘制出的界面元素与交互界面的背景风格保持一致。

图像混合模式包括但不限于：线性加深模式、线性减淡模式、颜色减淡模式以及颜色加深模式等。其中，线性加深模式是指通过降低亮度使底层的颜色变暗来反映绘图色的图像混合模式。线性减淡模式是指通过增加亮度使底层的颜色变亮来反映绘图色的图像混合模式。颜色加深模式是指通过增加对比度使底色变暗来反映绘图色的图像混合模式。颜色减淡模式则是通过减少对比度使底色变亮来反映绘图色的图像混合模式。

具体地，可以采用预先设定的图像混合模式作为前景基准图和背景图像的图像混合模式。这里预先设定的图像混合模式可以是在编写应用程序时设定的，也可以是根据用户选择操作从预设的图像混合模式的集合中选定的。比如应用程序可以提供图像混合模式配置界面，并将预设的图像混合模式的集合展示为相应数量的选项，根据用户对选项的选择操作设定当前采用的图像混合模式。

步骤206，根据确定的图像混合模式所对应的计算方式，对前景基准图进行像素置换，获得待绘制的前景图像。

具体地，每种图像混合模式对应一种计算方式，该计算方式是实现图像混合操作的函数，用来对前景基准图进行像素置换。这里对前景基准图进行像素置换是指根据计算方式，将前景基准图中需要变更颜色的像素的色值替换成所需的色值的操作，这样可以与各种色彩风格的交互界面在风格上保持一致。对前景基准图进行了像素置换后所得到的图像就是待绘制的前景图像。

步骤208，绘制待绘制的前景图像。具体地，可将待绘制的前景图像绘制到交互界面的指定区域。

上述绘制界面元素的方法，为绘制控件这样的界面元素，仅需要准备前景基准图，通过图像混合获得待绘制的前景图像并绘制，从而得到所需的界面元素效果。这样通过图像混合可以获得与交互界面当前色彩风格更一致的视觉效果，不再需要为各种色彩风格的界面预先设计各种贴图资源，克服了贴图资源占用的存储资源不可控的问题，而且可以节省设计各种贴图资源所需的人力成本。

如图4所示，在一个实施例中，步骤206具体包括如下步骤：

步骤402，根据确定的图像混合模式所对应的计算方式，代入前景基准图每个像素点的色值以及相应的背景色值，计算获得相应的目标色值。

具体地，一个像素点的色值是指用来表示该像素点的色彩的数值，在RGB颜色模式下，一个色值可由红色、绿色和蓝色三部分来定义，每部分可在0～255内取值。色值在参与计算时，将色值的每个部分分别进行计算后再组合。

在某些图像混合模式下，除了代入前景基准图每个像素点的色值以及相应的背景色值，还需要代入指定的透明度。所谓透明度是指一个像素点的透明程度，若透明度为0％，则相应的像素点是完全透明的，若透明度为100％，则相应的像素点是完全不透明的。

在一个实施例中，若图像混合模式为线性加深模式，则可采用公式(1)所表示的计算方式来计算目标色值：

公式(1)：Color_Obj＝(Color_Back+Color_Front)×Degree_Trans。

公式(1)中，Color_Obj表示目标色值，Color_Front表示前景基准图一个像素点的色值，Color_Back表示具有该Color_Front色值的像素点所对应的背景图像中的像素点的色值，Degree_Trans表示透明度。公式(1)中当计算出的Color_Obj＞255时，令Color_Obj＝255。Color_Obj值域为[0，255]。

在一个实施例中，若图像混合模式为线性减淡模式，则可采用公式(2)所表示的计算方式来计算目标色值：

公式(2)：

Color_Obj＝Color_Back-(255-Color_Front)×Degree_Trans,(Color_Front+Color_Back>255)。

Color_Obj＝Color_Back×(1-Degree_Trans),(Color_Front+Color_Back<255)

公式(2)中，Color_Obj表示目标色值，Color_Front表示前景基准图一个像素点的色值，Color_Back表示具有该Color_Front色值的像素点所对应的背景图像中的像素点的色值，Degree_Trans表示透明度。Color_Obj值域为[0，255]。

在一个实施例中，若图像混合模式为颜色减淡模式，则可采用公式(3)所表示的计算方式来计算目标色值：

公式(3)：Color_Obj＝Color_Back+[(Color_Front×Color_Back)÷(255-Color_Front)]。

公式(3)中，Color_Obj表示目标色值，Color_Front表示前景基准图一个像素点的色值，Color_Back表示具有该Color_Front色值的像素点所对应的背景图像中的像素点的色值。Color_Obj值域为[0，255]。

在一个实施例中，若图像混合模式为颜色加深模式，则可采用公式(4)所表示的计算方式来计算目标色值：

公式(4)：Color_Obj＝(Color_Back+Color_Front-255)×255÷Color_Front。

公式(4)中，Color_Obj表示目标色值，Color_Front表示前景基准图一个像素点的色值，Color_Back表示具有该Color_Front色值的像素点所对应的背景图像中的像素点的色值。Color_Obj值域为[0，255]。可以理解的是，上述公式(1)～(4)计算出的结果取整。

步骤404，将前景基准图各个像素点所对应的目标色值组合形成待绘制的前景图像。具体地，将步骤402中计算出的前景基准图各个像素点所对应的目标色值，按照各个像素点在前景基准图中的位置进行组合，形成待绘制的前景图像。

本实施例中，通过将前景基准图每个像素点的色值以及相应的背景色值以及透明度等计算参数代入确定的图像混合模式的计算方式，计算获得目标色值，从而完成对前景基准图的像素置换，获得待绘制的前景图像。这样各种色彩风格下的待绘制的前景图像都可以通过前景基准图像进行像素置换获得，而不需要针对不同的色彩风格分别设计不同的界面元素图案。

如图5所示，在一个实施例中，该绘制界面元素的方法还包括切换界面元素的状态的步骤，具体包括以下步骤：

步骤502，获取界面元素原始状态以及期望状态的前景信息。

具体地，界面元素可以具有不同的状态，比如一个控件可以具有正常状态、光标悬浮状态以及触发状态。其中正常态是指控件默认显示的状态，光标悬浮状态是指用户移动光标到显示控件的位置时控件所显示的状态，而触发状态则是指用户通过单击、双击或者触摸等触发动作操作控件使得控件所显示出的状态。当然界面元素的状态还可以做出更多或者更少的状态划分，在这里不一一赘述。

举例说明，如图6所示，在用户未操作的情况下，一个界面元素显示为如602所示的正常状态。当用户通过鼠标或者滑动触摸板将光标移动到该界面元素处时，该界面元素显示为如604所示的光标悬浮状态。当用户通过单击、双击或者触摸等触发动作操作该界面元素时，该界面元素则显示为如606所示的触发状态，操作结束后可根据光标位置返回光标悬浮状态或者正常状态。

原始状态是界面元素的状态被切换前的状态，期望状态是指界面元素的状态被切换后所需达到的状态。具体步骤502中分别获取界面元素原始状态的前景信息以及期望状态的前景信息。前景信息可以是相应状态下界面元素全部或者部分前景图像的信息，这里部分前景图像的信息是可以用来代表不同状态的界面元素之间差异的特征信息。

步骤504，比较原始状态以及期望状态的前景信息是否存在绘制差异；若是，则执行步骤506；若否，则执行步骤508。

具体地，比较原始状态的前景信息和期望状态的前景信息，判断两者在绘制上是否存在差异。这里比较前景信息，可以是遍历原始状态的前景图像中的每个像素点的色值，与相应的期望状态的前景图像中的像素点的色值比较，若至少有一个像素点的色值存在不一致的情况，则说明存在绘制差异。或者可以遍历原始状态的前景图像中的特征信息，与相应的期望状态的前景图像中的特征信息比较，若至少存在一处不一致的情况，则说明存在绘制差异。

步骤506，将界面元素原始状态的前景图像重绘为期望状态的前景图像。

具体地，若原始状态以及期望状态的前景信息存在绘制差异时，需要将界面元素原始状态的前景图像进行重绘，得到期望状态的前景图像。可以将界面元素原始状态的前景图像重绘，逐次变化为期望状态的前景图像。比如可以通过逐次改变透明度来逐次变化为期望状态的前景图像。

如图7所示，在一个实施例中，步骤506具体包括如下步骤：

步骤702，计算界面元素从原始状态逐次变化到期望状态的各帧前景图像中各个像素点的前景色值。

具体地，本实施例中将从原始状态的前景图像切换到期望状态的前景图像的过程划分为多帧前景图像，用来逐帧绘制，达到逐次变化到期望状态的前景图像的目的。逐次变化的过程可以是均匀的也可以是非均匀的。

在一个实施例中，可以采用公式(5)来计算界面元素从原始状态逐次变化到期望状态的各帧前景图像中各个像素点的前景色值：

公式(5)：C_Mid＝C_Ori+(C_Exp-C_Ori)×(N_Now÷N_Total)。

公式(5)中，C_Mid是各帧前景图像中各个像素点的前景色值，C_Ori是界面元素的原始状态的各个像素点的前景色值，C_Exp是界面元素的期望状态的各个像素点的前景色值，N_Now是当下计算的那一帧前景图像的帧序号，N_Total是各帧前景图像的帧总数。C_Mid值域为[0，255]。

当N_Now＝0时为原始状态，C_Mid＝C_Ori；逐渐变化到N_Now＝N_Total时，C_Mid＝C_Exp。其中帧总数可以预先设定，具体可以在编制应用程序时设定，或者可由用户设定；可以根据不同界面元素的不同情况，设定不同的帧总数。

步骤704，按各帧前景图像逐次变化的顺序，逐帧根据前景色值进行绘制。

具体地，步骤702中计算出的前景色值按帧组合形成的各帧前景图像，是对原始状态的前景图像进行像素置换所得到的图像。按照帧序号从小到大的顺序逐帧绘制每帧前景图像。这样可以达到界面元素的前景图像从原始状态逐渐变化到期望状态的效果。

步骤508，获取界面元素原始状态以及期望状态的背景信息。

具体地，可分别获取界面元素原始状态的背景信息以及期望状态的背景信息。背景信息可以是相应状态下界面元素对应的全部或者部分背景图像的信息，这里部分背景图像的信息可以是用来代表不同状态的界面元素的背景之间差异的特征信息。可以理解的是步骤508可以在执行步骤502时执行，相应地步骤504中判断为否时可以直接执行步骤510。

步骤510，比较原始状态以及期望状态的背景信息是否存在绘制差异；若是，则执行步骤512；若否，则无动作。

具体地，比较原始状态的背景信息和期望状态的背景信息，判断两者在绘制上是否存在差异。这里比较背景信息，可以是遍历原始状态的背景图像中的每个像素点的色值，与相应的期望状态的背景图像中的像素点的色值比较，若至少有一个像素点的色值存在不一致的情况，则说明存在绘制差异。或者可以遍历原始状态的背景图像中的特征信息，与相应的期望状态的背景图像中的特征信息比较，若至少存在一处不一致的情况，则说明存在绘制差异。

步骤512，将界面元素原始状态的背景图像重绘为期望状态的背景图像。

具体地，若原始状态以及期望状态的背景信息存在绘制差异时，需要将界面元素原始状态的背景图像进行重绘，得到期望状态的背景图像。可以将界面元素原始状态的背景图像重绘，逐次变化为期望状态的背景图像。比如可以通过逐次改变透明度来逐次变化为期望状态的背景图像。

在一个实施例中，步骤512具体包括：计算从原始状态逐次变化到期望状态的各帧背景图像的背景色值，并按变化顺序逐次填充到界面元素的背景区域。

具体地，本实施例中将从原始状态的背景图像切换到期望状态的背景图像的过程划分为多帧背景图像，用来逐帧绘制，达到逐次变化到期望状态的背景图像的目的。逐次变化的过程可以是均匀的也可以是非均匀的。由于背景图像通常是纯色，因此可以不必计算每一个像素点的背景色值，而只需计算出每帧背景图像中的代表像素点的背景色值，从而按照变化顺序，逐次将该背景色值填充到界面元素的背景区域，就可以达到界面元素的背景图像从原始状态逐渐变化到期望状态的效果。可以理解的是，将界面元素原始状态的前景图像重绘，逐次变化为期望状态的前景图像，以及将界面元素原始状态的背景图像重绘，逐次变化为期望状态的背景图像，是同步进行的，就是说前景图像变化背景图像也跟着变化。

上述各实施例的绘制界面元素的方法，通过切换界面元素的状态，可以使得用户可以及时地获取到操作界面元素的反馈，更容易进行人机交互。而通过将界面元素从原始状态逐次变化到期望状态，可以使得界面元素的状态改变过渡自然。

如图8所示，在一个实施例中，提供了一种绘制界面元素的装置800，具有实现上述各个实施例的绘制界面元素的方法的功能。该绘制界面元素的装置800具体包括获取模块802、模式确定模块804、待绘制的前景图像生成模块806和绘制模块808。

获取模块802，用于获取界面元素的前景基准图和相应的背景图像。

具体地，获取模块802可以在生成操作系统或者应用程序的交互界面时，或者在根据用户操作切换交互界面中的界面元素的状态时，获取界面元素的前景基准图和相应的背景图像。界面元素是构成操作系统或者应用程序的交互界面的组成部分，比如一个可视的控件或者一个单纯的图标。应用程序可以是网页浏览器、阅读软件、即时通信软件等任意应用程序。从应用程序类型上分，应用程序可以是原生应用程序、网页应用程序以及轻应用程序等。

背景是交互界面的底层，前景则在交互界面的背景之上，是需要展示的内容。前景的颜色一般与背景的颜色不同，从而与交互界面其它部分区分开。界面元素与前景基准图对应，该前景基准图作为绘制相应的界面元素的基础，各种效果的界面元素均可根据该前景基准图生成。背景图像则是指交互界面中用来绘制相应的界面元素的位置处的底层图像。举例来说，如图3所示，一个界面元素300，其前景图像为302，背景图像为304。

模式确定模块804，用于确定前景基准图和背景图像的图像混合模式。

图像混合模式是指将某图像对象的颜色与底层对象的颜色混合的方式，这里具体是将前景基准图和背景图像混合的方式。通过图像混合，可以使得绘制出的界面元素与交互界面的背景风格保持一致。

图像混合模式包括但不限于：线性加深模式、线性减淡模式、颜色减淡模式以及颜色加深模式等。其中，线性加深模式是指通过降低亮度使底层的颜色变暗来反映绘图色的图像混合模式。线性减淡模式是指通过增加亮度使底层的颜色变亮来反映绘图色的图像混合模式。颜色加深模式是指通过增加对比度使底色变暗来反映绘图色的图像混合模式。颜色减淡模式则是通过减少对比度使底色变亮来反映绘图色的图像混合模式。

具体地，模式确定模块804可用于采用预先设定的图像混合模式作为前景基准图和背景图像的图像混合模式。这里预先设定的图像混合模式可以是在编写应用程序时设定的，也可以是根据用户选择操作从预设的图像混合模式的集合中选定的。比如应用程序可以提供图像混合模式配置界面，并将预设的图像混合模式的集合展示为相应数量的选项，根据用户对选项的选择操作设定当前采用的图像混合模式。

待绘制的前景图像生成模块806，用于根据确定的图像混合模式所对应的计算方式，对前景基准图进行像素置换，获得待绘制的前景图像。

具体地，每种图像混合模式对应一种计算方式，该计算方式是实现图像混合操作的函数，用来对前景基准图进行像素置换。这里对前景基准图进行像素置换是指根据计算方式，将前景基准图中需要变更颜色的像素的色值替换成所需的色值的操作，这样可以与各种色彩风格的交互界面在风格上保持一致。对前景基准图进行了像素置换后所得到的图像就是待绘制的前景图像。

绘制模块808，用于绘制待绘制的前景图像。具体地，绘制模块808可用于将待绘制的前景图像绘制到交互界面的指定区域。

上述绘制界面元素的装置800，为绘制控件这样的界面元素，仅需要准备前景基准图，通过图像混合获得待绘制的前景图像并绘制，从而得到所需的界面元素效果。这样通过图像混合可以获得与交互界面当前色彩风格更一致的视觉效果，不再需要为各种色彩风格的界面预先设计各种贴图资源，克服了贴图资源占用的存储资源不可控的问题，而且可以节省设计各种贴图资源所需的人力成本。

如图9所示，在一个实施例中，待绘制的前景图像生成模块806包括目标色值计算模块806a和执行模块806b。

目标色值计算模块806a，用于根据确定的图像混合模式所对应的计算方式，代入前景基准图每个像素点的色值以及相应的背景色值，计算获得相应的目标色值。

具体地，一个像素点的色值是指用来表示该像素点的色彩的数值，在RGB颜色模式下，一个色值可由红色、绿色和蓝色三部分来定义，每部分可在0～255内取值。色值在参与计算时，色值的每个部分分别进行计算后再组合。

在某些图像混合模式下，除了代入前景基准图每个像素点的色值以及相应的背景色值，还需要代入指定的透明度。所谓透明度是指一个像素点的透明程度，若透明度为0％，则相应的像素点是完全透明的，若透明度为100％，则相应的像素点是完全不透明的。

在一个实施例中，若图像混合模式为线性加深模式，则目标色值计算模块806a可用于采用公式(1)所表示的计算方式来计算目标色值：

公式(1)：Color_Obj＝(Color_Back+Color_Front)×Degree_Trans。

公式(1)中，Color_Obj表示目标色值，Color_Front表示前景基准图一个像素点的色值，Color_Back表示具有该Color_Front色值的像素点所对应的背景图像中的像素点的色值，Degree_Trans表示透明度。

在一个实施例中，若图像混合模式为线性减淡模式，则目标色值计算模块806a可用于采用公式(2)所表示的计算方式来计算目标色值：

公式(2)：

Color_Obj＝Color_Back-(255-Color_Front)×Degree_Trans,(Color_Front+Color_Back>255)。

Color_Obj＝Color_Back×(1-Degree_Trans),(Color_Front+Color_Back<255)

公式(2)中，Color_Obj表示目标色值，Color_Front表示前景基准图一个像素点的色值，Color_Back表示具有该Color_Front色值的像素点所对应的背景图像中的像素点的色值，Degree_Trans表示透明度。

在一个实施例中，若图像混合模式为颜色减淡模式，则目标色值计算模块806a可用于采用公式(3)所表示的计算方式来计算目标色值：

公式(3)：Color_Obj＝Color_Back+[(Color_Front×Color_Back)÷(255-Color_Front)]。

公式(3)中，Color_Obj表示目标色值，Color_Front表示前景基准图一个像素点的色值，Color_Back表示具有该Color_Front色值的像素点所对应的背景图像中的像素点的色值。

在一个实施例中，若图像混合模式为颜色加深模式，则目标色值计算模块806a可用于采用公式(4)所表示的计算方式来计算目标色值：

公式(4)：Color_Obj＝(Color_Back+Color_Front-255)×255÷Color_Front。

公式(4)中，Color_Obj表示目标色值，Color_Front表示前景基准图一个像素点的色值，Color_Back表示具有该Color_Front色值的像素点所对应的背景图像中的像素点的色值。可以理解的是，上述公式(1)～(4)计算出的结果取整。

执行模块806b，用于将前景基准图各个像素点所对应的目标色值组合形成待绘制的前景图像。具体地，执行模块806b可用于将计算出的前景基准图各个像素点所对应的目标色值，按照各个像素点在前景基准图中的位置进行组合，形成待绘制的前景图像。

本实施例中，通过将前景基准图每个像素点的色值以及相应的背景色值以及透明度等计算参数代入确定的图像混合模式的计算方式，计算获得目标色值，从而完成对前景基准图的像素置换，获得待绘制的前景图像。这样各种色彩风格下的待绘制的前景图像都可以通过前景基准图像进行像素置换获得，而不需要针对不同的色彩风格分别设计不同的界面元素图案。

如图10所示，在一个实施例中，绘制界面元素的装置800还包括第一比较模块810。

获取模块802还用于获取界面元素原始状态以及期望状态的前景信息。具体地，界面元素可以具有不同的状态，比如一个控件可以具有正常状态、光标悬浮状态以及触发状态。其中正常态是指控件默认显示的状态，光标悬浮状态是指用户移动光标到显示控件的位置时控件所显示的状态，而触发状态则是指用户通过单击、双击或者触摸等触发动作操作控件使得控件所显示出的状态。当然界面元素的状态还可以做出更多或者更少的状态划分，在这里不一一赘述。

原始状态是界面元素的状态被切换前的状态，期望状态是指界面元素的状态被切换后所需达到的状态。具体获取模块802可用于分别获取界面元素原始状态的前景信息以及期望状态的前景信息。前景信息可以是相应状态下界面元素全部或者部分前景图像的信息，这里部分前景图像的信息是可以用来代表不同状态的界面元素之间差异的特征信息。

第一比较模块810，用于比较原始状态以及期望状态的前景信息是否存在绘制差异。具体地，第一比较模块810用于比较原始状态的前景信息和期望状态的前景信息，判断两者在绘制上是否存在差异。这里比较前景信息，可以是遍历原始状态的前景图像中的每个像素点的色值，与相应的期望状态的前景图像中的像素点的色值比较，若至少有一个像素点的色值存在不一致的情况，则说明存在绘制差异。或者可以遍历原始状态的前景图像中的特征信息，与相应的期望状态的前景图像中的特征信息比较，若至少存在一处不一致的情况，则说明存在绘制差异。

绘制模块808还用于若原始状态以及期望状态的前景信息存在绘制差异，则将界面元素原始状态的前景图像重绘为期望状态的前景图像。

具体地，若原始状态以及期望状态的前景信息存在绘制差异时，需要将界面元素原始状态的前景图像进行重绘，得到期望状态的前景图像。绘制模块808可用于将界面元素原始状态的前景图像重绘，逐次变化为期望状态的前景图像。比如可以通过逐次改变透明度来逐次变化为期望状态的前景图像。

在一个实施例中，绘制模块808还用于计算界面元素从原始状态逐次变化到期望状态的各帧前景图像中各个像素点的前景色值；按各帧前景图像逐次变化的顺序，逐帧根据前景色值进行绘制。

具体地，本实施例中将从原始状态的前景图像切换到期望状态的前景图像的过程划分为多帧前景图像，用来逐帧绘制，达到逐次变化到期望状态的前景图像的目的。逐次变化的过程可以是均匀的也可以是非均匀的。

在一个实施例中，绘制模块808可用于采用公式(5)来计算界面元素从原始状态逐次变化到期望状态的各帧前景图像中各个像素点的前景色值：

公式(5)：C_Mid＝C_Ori+(C_Exp-C_Ori)×(N_Now÷N_Total)。

公式(5)中，C_Mid是各帧前景图像中各个像素点的前景色值，C_Ori是界面元素的原始状态的各个像素点的前景色值，C_Exp是界面元素的期望状态的各个像素点的前景色值，N_Now是当下计算的那一帧前景图像的帧序号，N_Total是各帧前景图像的帧总数。当N_Now＝0时为原始状态，C_Mid＝C_Ori，逐渐变化到N_Now＝N_Total时，C_Mid＝C_Exp。其中帧总数可以预先设定，具体可以在编制应用程序时设定，或者可由用户设定；可以根据不同界面元素的不同情况，设定不同的帧总数。

计算出的前景色值按帧组合形成的各帧前景图像，是对原始状态的前景图像进行像素置换所得到的图像。绘制模块808可用于按照帧序号从小到大的顺序逐帧绘制每帧前景图像。这样可以达到界面元素的前景图像从原始状态逐渐变化到期望状态的效果。

在一个实施例中，绘制界面元素的装置800还包括第二比较模块812。

获取模块802还用于获取界面元素原始状态以及期望状态的背景信息。具体地，可分别获取界面元素原始状态的背景信息以及期望状态的背景信息。背景信息可以是相应状态下界面元素对应的全部或者部分背景图像的信息，这里部分背景图像的信息可以是用来代表不同状态的界面元素的背景之间差异的特征信息。

第二比较模块812，用于比较原始状态以及期望状态的背景信息是否存在绘制差异。具体地，第二比较模块812可用于比较原始状态的背景信息和期望状态的背景信息，判断两者在绘制上是否存在差异。这里比较背景信息，可以是遍历原始状态的背景图像中的每个像素点的色值，与相应的期望状态的背景图像中的像素点的色值比较，若至少有一个像素点的色值存在不一致的情况，则说明存在绘制差异。或者可以遍历原始状态的背景图像中的特征信息，与相应的期望状态的背景图像中的特征信息比较，若至少存在一处不一致的情况，则说明存在绘制差异。

绘制模块808还用于若原始状态以及期望状态的背景信息存在绘制差异，则将界面元素原始状态的背景图像重绘为期望状态的背景图像。

具体地，若原始状态以及期望状态的背景信息存在绘制差异时，需要将界面元素原始状态的背景图像进行重绘，得到期望状态的背景图像。可以将界面元素原始状态的背景图像重绘，逐次变化为期望状态的背景图像。比如可以通过逐次改变透明度来逐次变化为期望状态的背景图像。

在一个实施例中，绘制模块808还用于计算从原始状态逐次变化到期望状态的各帧背景图像的背景色值，并按变化顺序逐次填充到界面元素的背景区域。

具体地，本实施例中将从原始状态的背景图像切换到期望状态的背景图像的过程划分为多帧背景图像，用来逐帧绘制，达到逐次变化到期望状态的背景图像的目的。逐次变化的过程可以是均匀的也可以是非均匀的。由于背景图像通常是纯色，因此可以不必计算每一个像素点的背景色值，而只需计算出每帧背景图像中的代表像素点的背景色值，从而按照变化顺序，逐次将该背景色值填充到界面元素的背景区域，就可以达到界面元素的背景图像从原始状态逐渐变化到期望状态的效果。可以理解的是，将界面元素原始状态的前景图像重绘，逐次变化为期望状态的前景图像，以及将界面元素原始状态的背景图像重绘，逐次变化为期望状态的背景图像，是同步进行的，就是说前景图像变化背景图像也跟着变化。

上述各实施例的绘制界面元素的装置800，通过切换界面元素的状态，可以使得用户可以及时地获取到操作界面元素的反馈，更容易进行人机交互。而通过将界面元素从原始状态逐次变化到期望状态，可以使得界面元素的状态改变过渡自然。

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

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

Claims (14)

1.一种绘制界面元素的方法，所述方法包括：

获取界面元素的前景基准图和相应的背景图像；所述界面元素是应用程序的交互界面的组成部分；

确定所述前景基准图和所述背景图像的图像混合模式；

根据所述确定的图像混合模式所对应的计算方式，基于所述前景基准图与所述背景图像，对所述前景基准图中像素点的色值进行置换，获得待绘制的前景图像；

绘制所述待绘制的前景图像。

2.根据权利要求1所述的方法，其特征在于，所述根据所述确定的图像混合模式所对应的计算方式，基于所述前景基准图与所述背景图像，对所述前景基准图中像素点的色值进行置换，获得待绘制的前景图像，包括：

根据所述确定的图像混合模式所对应的计算方式，代入所述前景基准图每个像素点的色值以及所述背景图像中相应的背景色值，计算获得相应的目标色值；

将所述前景基准图各个像素点所对应的目标色值组合形成待绘制的前景图像。

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

获取所述界面元素原始状态以及期望状态的前景信息；

比较所述原始状态以及期望状态的前景信息是否存在绘制差异；

当所述原始状态以及期望状态的前景信息存在绘制差异时，将所述界面元素原始状态的前景图像重绘为期望状态的前景图像。

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

获取所述界面元素原始状态以及期望状态的背景信息；

比较所述原始状态以及期望状态的背景信息是否存在绘制差异；当所述原始状态以及期望状态的背景信息存在绘制差异时，将所述界面元素原始状态的背景图像重绘为期望状态的背景图像。

5.根据权利要求4所述的方法，其特征在于，所述将所述界面元素原始状态的背景图像重绘为期望状态的背景图像，包括：

计算从原始状态逐次变化到期望状态的各帧背景图像的背景色值，并按变化顺序逐次填充到所述界面元素的背景区域。

6.根据权利要求3至5中任意一项所述的方法，其特征在于，所述将所述界面元素原始状态的前景图像重绘为期望状态的前景图像，包括：

计算所述界面元素从原始状态逐次变化到期望状态的各帧前景图像中各个像素点的前景色值；

按各帧前景图像逐次变化的顺序，逐帧根据所述前景色值进行绘制。

7.一种绘制界面元素的装置，其特征在于，所述装置包括：

获取模块，用于获取界面元素的前景基准图和相应的背景图像；所述界面元素是应用程序的交互界面的组成部分；

模式确定模块，用于确定所述前景基准图和所述背景图像的图像混合模式；

待绘制的前景图像生成模块，用于根据所述确定的图像混合模式所对应的计算方式，基于所述前景基准图与所述背景图像，对所述前景基准图中像素点的色值进行置换，获得待绘制的前景图像；

绘制模块，用于绘制所述待绘制的前景图像。

8.根据权利要求7所述的装置，其特征在于，所述待绘制的前景图像生成模块包括：

目标色值计算模块，用于根据所述确定的图像混合模式所对应的计算方式，代入所述前景基准图每个像素点的色值以及所述背景图像中相应的背景色值，计算获得相应的目标色值；

执行模块，用于将所述前景基准图各个像素点所对应的目标色值组合形成待绘制的前景图像。

9.根据权利要求7所述的装置，其特征在于，所述获取模块还用于获取所述界面元素原始状态以及期望状态的前景信息；

所述装置还包括第一比较模块，用于比较所述原始状态以及期望状态的前景信息是否存在绘制差异；

所述绘制模块还用于若所述原始状态以及期望状态的前景信息存在绘制差异，则将所述界面元素原始状态的前景图像重绘为期望状态的前景图像。

10.根据权利要求9所述的装置，其特征在于，所述获取模块还用于获取所述界面元素原始状态以及期望状态的背景信息；

所述装置还包括第二比较模块，用于比较所述原始状态以及期望状态的背景信息是否存在绘制差异；

所述绘制模块还用于若所述原始状态以及期望状态的背景信息存在绘制差异，则将所述界面元素原始状态的背景图像重绘为期望状态的背景图像。

11.根据权利要求10所述的装置，其特征在于，所述绘制模块还用于计算从原始状态逐次变化到期望状态的各帧背景图像的背景色值，并按变化顺序逐次填充到所述界面元素的背景区域。

12.根据权利要求9至11中任意一项所述的装置，其特征在于，所述绘制模块还用于计算所述界面元素从原始状态逐次变化到期望状态的各帧前景图像中各个像素点的前景色值；按各帧前景图像逐次变化的顺序，逐帧根据所述前景色值进行绘制。

13.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述计算机程序被所述处理器执行时，使得所述处理器执行如权利要求1至6中任一项所述方法的步骤。

14.一种计算机可读存储介质，存储有计算机程序，所述计算机程序被处理器执行时，使得所述处理器执行如权利要求1至6中任一项所述方法的步骤。

Images