繪制界面元素的方法和裝置的制造方法
【專利摘要】本發(fā)明提供了一種繪制界面元素的方法和裝置，所述方法包括：獲取界面元素的前景基準(zhǔn)圖和相應(yīng)的背景圖像；確定所述前景基準(zhǔn)圖和所述背景圖像的圖像混合模式；根據(jù)所述確定的圖像混合模式所對(duì)應(yīng)的計(jì)算方式，對(duì)所述前景基準(zhǔn)圖進(jìn)行像素置換，獲得待繪制的前景圖像；繪制所述待繪制的前景圖像。采用本發(fā)明提供的繪制界面元素的方法和裝置，通過(guò)圖像混合可以獲得與交互界面當(dāng)前色彩風(fēng)格更一致的視覺(jué)效果，不再需要為各種色彩風(fēng)格的界面預(yù)先設(shè)計(jì)各種貼圖資源，克服了貼圖資源占用的存儲(chǔ)資源不可控的問(wèn)題，而且可以節(jié)省設(shè)計(jì)各種貼圖資源所需的人力成本。
【專利說(shuō)明】
繪制界面元素的方法和裝置
技術(shù)領(lǐng)域
[0001]本發(fā)明涉及計(jì)算機(jī)技術(shù)領(lǐng)域，特別是涉及一種繪制界面元素的方法和裝置。【背景技術(shù)】
[0002]在計(jì)算機(jī)應(yīng)用程序中，控件或稱為部件，是交互界面的一種界面元素，控件為給定的數(shù)據(jù)的直接操作(direct manipulat1n)提供單獨(dú)的互動(dòng)點(diǎn)。用戶可通過(guò)控件實(shí)現(xiàn)與應(yīng)用程序的交互。
[0003]目前主要通過(guò)貼圖方式來(lái)實(shí)現(xiàn)繪制控件。繪制一個(gè)控件包括控件展示內(nèi)容和背景兩個(gè)組成部分，展示內(nèi)容包括文字和圖標(biāo)等。通常繪制控件時(shí)所需貼圖資源會(huì)包含到應(yīng)用程序的皮膚資源中，在應(yīng)用程序的交互界面的指定區(qū)域上，根據(jù)需要繪制上對(duì)應(yīng)的貼圖資源便實(shí)現(xiàn)了控件的繪制。
[0004]然而，應(yīng)用程序的交互界面具有各種色彩風(fēng)格，這里的色彩風(fēng)格是指交互界面上各個(gè)界面元素的色彩搭配所體現(xiàn)出的整體效果。通過(guò)貼圖方式來(lái)繪制控件，由于貼圖資源是事先設(shè)計(jì)好的，需要在應(yīng)用程序的皮膚資源中準(zhǔn)備若干組貼圖資源來(lái)應(yīng)對(duì)不同色彩風(fēng)格下的控件繪制。在具體實(shí)現(xiàn)繪制控件時(shí)，根據(jù)需要從應(yīng)用程序的皮膚資源中選擇所需的貼圖資源進(jìn)行控件繪制，欠缺靈活性。而且由于應(yīng)用程序的色彩風(fēng)格難以預(yù)期，為實(shí)現(xiàn)不同的色彩風(fēng)格下的交互界面，需要不斷重新設(shè)計(jì)和更新皮膚資源，這樣又會(huì)導(dǎo)致應(yīng)用程序所需的皮膚資源數(shù)量不可控，進(jìn)而導(dǎo)致占用的存儲(chǔ)資源不可控。
【發(fā)明內(nèi)容】

[0005]基于此，有必要針對(duì)目前通過(guò)貼圖方式來(lái)繪制控件占用的存儲(chǔ)資源不可控的問(wèn)題，提供一種繪制界面元素的方法和裝置。
[0006]—種繪制界面元素的方法，所述方法包括:
[0007]獲取界面元素的前景基準(zhǔn)圖和相應(yīng)的背景圖像；
[0008]確定所述前景基準(zhǔn)圖和所述背景圖像的圖像混合模式；
[0009]根據(jù)所述確定的圖像混合模式所對(duì)應(yīng)的計(jì)算方式，對(duì)所述前景基準(zhǔn)圖進(jìn)行像素置換，獲得待繪制的前景圖像；
[0010]繪制所述待繪制的前景圖像。
[0011]一種繪制界面元素的裝置，所述裝置包括:
[0012]獲取模塊，用于獲取界面元素的前景基準(zhǔn)圖和相應(yīng)的背景圖像；
[0013]模式確定模塊，用于確定所述前景基準(zhǔn)圖和所述背景圖像的圖像混合模式；
[0014]待繪制的前景圖像生成模塊，用于根據(jù)所述確定的圖像混合模式所對(duì)應(yīng)的計(jì)算方式，對(duì)所述前景基準(zhǔn)圖進(jìn)行像素置換，獲得待繪制的前景圖像；
[0015]繪制模塊，用于繪制所述待繪制的前景圖像。
[0016]上述繪制界面元素的方法和裝置，為繪制控件這樣的界面元素，僅需要準(zhǔn)備前景基準(zhǔn)圖，通過(guò)圖像混合獲得待繪制的前景圖像并繪制，從而得到所需的界面元素效果。這樣通過(guò)圖像混合可以獲得與交互界面當(dāng)前色彩風(fēng)格更一致的視覺(jué)效果，不再需要為各種色彩風(fēng)格的界面預(yù)先設(shè)計(jì)各種貼圖資源，克服了貼圖資源占用的存儲(chǔ)資源不可控的問(wèn)題，而且可以節(jié)省設(shè)計(jì)各種貼圖資源所需的人力成本。【附圖說(shuō)明】
[0017]圖1為一個(gè)實(shí)施例中用于實(shí)現(xiàn)繪制界面元素的方法的電子設(shè)備的內(nèi)部結(jié)構(gòu)圖；
[0018]圖2為一個(gè)實(shí)施例中繪制界面元素的方法的流程示意圖；
[0019]圖3為一個(gè)實(shí)施例中一個(gè)界面元素的示意圖；
[0020]圖4為一個(gè)實(shí)施例中根據(jù)確定的圖像混合模式所對(duì)應(yīng)的計(jì)算方式，對(duì)前景基準(zhǔn)圖進(jìn)行像素置換，獲得待繪制的前景圖像的步驟的流程示意圖；
[0021]圖5為一個(gè)實(shí)施例中切換界面元素的狀態(tài)的步驟的流程示意圖；
[0022]圖6為一個(gè)實(shí)施例中用戶操作界面元素導(dǎo)致界面元素狀態(tài)發(fā)生變化的示意圖；
[0023]圖7為一個(gè)實(shí)施例中將界面元素原始狀態(tài)的前景圖像重繪為期望狀態(tài)的前景圖像的步驟的流程示意圖；
[0024]圖8為一個(gè)實(shí)施例中繪制界面元素的裝置的結(jié)構(gòu)框圖；
[0025]圖9為一個(gè)實(shí)施例中圖8中的待繪制的前景圖像生成模塊的結(jié)構(gòu)框圖；
[0026]圖10為另一個(gè)實(shí)施例中繪制界面元素的裝置的結(jié)構(gòu)框圖。【具體實(shí)施方式】
[0027]為了使本發(fā)明的目的、技術(shù)方案及優(yōu)點(diǎn)更加清楚明白，以下結(jié)合附圖及實(shí)施例，對(duì)本發(fā)明進(jìn)行進(jìn)一步詳細(xì)說(shuō)明。應(yīng)當(dāng)理解，此處所描述的具體實(shí)施例僅僅用以解釋本發(fā)明，并不用于限定本發(fā)明。
[0028]如圖1所示，在一個(gè)實(shí)施例中，提供了一種用于實(shí)現(xiàn)繪制界面元素的方法的電子設(shè)備100,包括通過(guò)系統(tǒng)總線連接的處理器、內(nèi)存、存儲(chǔ)介質(zhì)和顯示屏幕。其中，該電子設(shè)備 1〇〇的存儲(chǔ)介質(zhì)存儲(chǔ)有操作系統(tǒng)和一種繪制界面元素的裝置，該繪制界面元素的裝置用于實(shí)現(xiàn)一種繪制界面元素的方法。該電子設(shè)備的處理器具有計(jì)算和控制能力，該處理器被配置為執(zhí)行一種繪制界面元素的方法。該電子設(shè)備1〇〇可以是臺(tái)式計(jì)算機(jī)，也可以是諸如手機(jī)、平板電腦的移動(dòng)終端。
[0029]如圖2所示，在一個(gè)實(shí)施例中，提供了一種繪制界面元素的方法，本實(shí)施例以該方法應(yīng)用于上述圖1中的電子設(shè)備100來(lái)舉例說(shuō)明。該方法具體包括如下步驟:
[0030]步驟202,獲取界面元素的前景基準(zhǔn)圖和相應(yīng)的背景圖像。
[0031]具體地，可以在生成操作系統(tǒng)或者應(yīng)用程序的交互界面時(shí)，或者在根據(jù)用戶操作切換交互界面中的界面元素的狀態(tài)時(shí)執(zhí)行步驟202。界面元素是構(gòu)成操作系統(tǒng)或者應(yīng)用程序的交互界面的組成部分，比如一個(gè)可視的控件或者一個(gè)單純的圖標(biāo)。應(yīng)用程序可以是網(wǎng)頁(yè)瀏覽器、閱讀軟件、即時(shí)通信軟件等任意應(yīng)用程序。從應(yīng)用程序類型上分，應(yīng)用程序可以是原生應(yīng)用程序、網(wǎng)頁(yè)應(yīng)用程序以及輕應(yīng)用程序等。
[0032]背景是交互界面的底層，前景則在交互界面的背景之上，是需要展示的內(nèi)容。前景的顏色一般與背景的顏色不同，從而與交互界面其它部分區(qū)分開。界面元素與前景基準(zhǔn)圖對(duì)應(yīng)，該前景基準(zhǔn)圖作為繪制相應(yīng)的界面元素的基礎(chǔ)，各種效果的界面元素均可根據(jù)該前景基準(zhǔn)圖生成。背景圖像則是指交互界面中用來(lái)繪制相應(yīng)的界面元素的位置處的底層圖像。舉例來(lái)說(shuō)，如圖3所示，一個(gè)界面元素300,其前景圖像為302,對(duì)應(yīng)的背景圖像為304。
[0033]步驟204,確定前景基準(zhǔn)圖和背景圖像的圖像混合模式。
[0034]圖像混合模式是指將某圖像對(duì)象的顏色與底層對(duì)象的顏色混合的方式，這里具體是將前景基準(zhǔn)圖和背景圖像混合的方式。通過(guò)圖像混合，可以使得繪制出的界面元素與交互界面的背景風(fēng)格保持一致。
[0035]圖像混合模式包括但不限于:線性加深模式、線性減淡模式、顏色減淡模式以及顏色加深模式等。其中，線性加深模式是指通過(guò)降低亮度使底層的顏色變暗來(lái)反映繪圖色的圖像混合模式。線性減淡模式是指通過(guò)增加亮度使底層的顏色變亮來(lái)反映繪圖色的圖像混合模式。顏色加深模式是指通過(guò)增加對(duì)比度使底色變暗來(lái)反映繪圖色的圖像混合模式。顏色減淡模式則是通過(guò)減少對(duì)比度使底色變亮來(lái)反映繪圖色的圖像混合模式。
[0036]具體地，可以采用預(yù)先設(shè)定的圖像混合模式作為前景基準(zhǔn)圖和背景圖像的圖像混合模式。這里預(yù)先設(shè)定的圖像混合模式可以是在編寫應(yīng)用程序時(shí)設(shè)定的，也可以是根據(jù)用戶選擇操作從預(yù)設(shè)的圖像混合模式的集合中選定的。比如應(yīng)用程序可以提供圖像混合模式配置界面，并將預(yù)設(shè)的圖像混合模式的集合展示為相應(yīng)數(shù)量的選項(xiàng)，根據(jù)用戶對(duì)選項(xiàng)的選擇操作設(shè)定當(dāng)前采用的圖像混合模式。
[0037]步驟206,根據(jù)確定的圖像混合模式所對(duì)應(yīng)的計(jì)算方式，對(duì)前景基準(zhǔn)圖進(jìn)行像素置換，獲得待繪制的前景圖像。
[0038]具體地，每種圖像混合模式對(duì)應(yīng)一種計(jì)算方式，該計(jì)算方式是實(shí)現(xiàn)圖像混合操作的函數(shù)，用來(lái)對(duì)前景基準(zhǔn)圖進(jìn)行像素置換。這里對(duì)前景基準(zhǔn)圖進(jìn)行像素置換是指根據(jù)計(jì)算方式，將前景基準(zhǔn)圖中需要變更顏色的像素的色值替換成所需的色值的操作，這樣可以與各種色彩風(fēng)格的交互界面在風(fēng)格上保持一致。對(duì)前景基準(zhǔn)圖進(jìn)行了像素置換后所得到的圖像就是待繪制的前景圖像。
[0039]步驟208,繪制待繪制的前景圖像。具體地，可將待繪制的前景圖像繪制到交互界面的指定區(qū)域。
[0040]上述繪制界面元素的方法，為繪制控件這樣的界面元素，僅需要準(zhǔn)備前景基準(zhǔn)圖， 通過(guò)圖像混合獲得待繪制的前景圖像并繪制，從而得到所需的界面元素效果。這樣通過(guò)圖像混合可以獲得與交互界面當(dāng)前色彩風(fēng)格更一致的視覺(jué)效果，不再需要為各種色彩風(fēng)格的界面預(yù)先設(shè)計(jì)各種貼圖資源，克服了貼圖資源占用的存儲(chǔ)資源不可控的問(wèn)題，而且可以節(jié)省設(shè)計(jì)各種貼圖資源所需的人力成本。
[0041]如圖4所示，在一個(gè)實(shí)施例中，步驟206具體包括如下步驟:
[0042]步驟402,根據(jù)確定的圖像混合模式所對(duì)應(yīng)的計(jì)算方式，代入前景基準(zhǔn)圖每個(gè)像素點(diǎn)的色值以及相應(yīng)的背景色值，計(jì)算獲得相應(yīng)的目標(biāo)色值。
[0043]具體地，一個(gè)像素點(diǎn)的色值是指用來(lái)表示該像素點(diǎn)的色彩的數(shù)值，在RGB顏色模式下，一個(gè)色值可由紅色、綠色和藍(lán)色三部分來(lái)定義，每部分可在0?255內(nèi)取值。色值在參與計(jì)算時(shí)，將色值的每個(gè)部分分別進(jìn)行計(jì)算后再組合。
[0044]在某些圖像混合模式下，除了代入前景基準(zhǔn)圖每個(gè)像素點(diǎn)的色值以及相應(yīng)的背景色值，還需要代入指定的透明度。所謂透明度是指一個(gè)像素點(diǎn)的透明程度，若透明度為〇%， 則相應(yīng)的像素點(diǎn)是完全透明的，若透明度為100%，則相應(yīng)的像素點(diǎn)是完全不透明的。
[0045]在一個(gè)實(shí)施例中，若圖像混合模式為線性加深模式，則可采用公式(1)所表示的計(jì)算方式來(lái)計(jì)算目標(biāo)色值:
[0046]公式(1):Color_0bj = (Color_Back+Color_F;ront) XDegree_Trans〇
[0047]公式⑴中，Col〇r_0bj表示目標(biāo)色值，C〇l〇r_Fr〇nt表示前景基準(zhǔn)圖一個(gè)像素點(diǎn)的色值，Color_Back表示具有該Color_Front色值的像素點(diǎn)所對(duì)應(yīng)的背景圖像中的像素點(diǎn)的色值，Degree_Trans表示透明度。公式(1)中當(dāng)計(jì)算出的Color_0bj > 255時(shí)，令Color_ Obj = 255。Color_0bj 值域?yàn)閇0,255]〇
[0048]在一個(gè)實(shí)施例中，若圖像混合模式為線性減淡模式，則可采用公式(2)所表示的計(jì)算方式來(lái)計(jì)算目標(biāo)色值:
[0049]公式(2):
[0050]Color_0bj = Color_Back-(255-Color_Front) XDegree_Trans, (Color_ Front+Color_Back>255)。
[0051]Color_0b j = Color_BackX (l_Degree_Trans)，(Color_Front+Colo;r_Back〈255)
[0052]公式⑵中，Col〇r_0bj表示目標(biāo)色值，C〇l〇r_Fr〇nt表示前景基準(zhǔn)圖一個(gè)像素點(diǎn)的色值，Color_Back表示具有該Color_Front色值的像素點(diǎn)所對(duì)應(yīng)的背景圖像中的像素點(diǎn)的色值，Degree_Trans表示透明度。Color_0bj值域?yàn)閇0,255] 〇
[0053]在一個(gè)實(shí)施例中，若圖像混合模式為顏色減淡模式，則可采用公式(3)所表示的計(jì)算方式來(lái)計(jì)算目標(biāo)色值:
[0054]公式(3):Color_0bj = Color_Back + [ (Color_Front X Color_ Back)+(255-Color_Front)]。
[0055]公式⑶中，Color_0bj表示目標(biāo)色值，Color_Front表示前景基準(zhǔn)圖一個(gè)像素點(diǎn)的色值，Color_Back表示具有該Color_Front色值的像素點(diǎn)所對(duì)應(yīng)的背景圖像中的像素點(diǎn)的色值。Color_0bj值域?yàn)閇0,255]。
[0056]在一個(gè)實(shí)施例中，若圖像混合模式為顏色加深模式，則可采用公式(4)所表示的計(jì)算方式來(lái)計(jì)算目標(biāo)色值:
[0057]公式(4):Color_0bj = (Color_Back+Color_F;ront-255) X 255 + Color_Front〇
[0058]公式⑷中，Color_0bj表示目標(biāo)色值，Color_Front表示前景基準(zhǔn)圖一個(gè)像素點(diǎn)的色值，Color_Back表示具有該Color_Front色值的像素點(diǎn)所對(duì)應(yīng)的背景圖像中的像素點(diǎn)的色值。Color_0bj值域?yàn)閇0, 255]?？梢岳斫獾氖牵鲜龉?1)?(4)計(jì)算出的結(jié)果取整。
[0059]步驟404,將前景基準(zhǔn)圖各個(gè)像素點(diǎn)所對(duì)應(yīng)的目標(biāo)色值組合形成待繪制的前景圖像。具體地，將步驟402中計(jì)算出的前景基準(zhǔn)圖各個(gè)像素點(diǎn)所對(duì)應(yīng)的目標(biāo)色值，按照各個(gè)像素點(diǎn)在前景基準(zhǔn)圖中的位置進(jìn)行組合，形成待繪制的前景圖像。
[0060]本實(shí)施例中，通過(guò)將前景基準(zhǔn)圖每個(gè)像素點(diǎn)的色值以及相應(yīng)的背景色值以及透明度等計(jì)算參數(shù)代入確定的圖像混合模式的計(jì)算方式，計(jì)算獲得目標(biāo)色值，從而完成對(duì)前景基準(zhǔn)圖的像素置換，獲得待繪制的前景圖像。這樣各種色彩風(fēng)格下的待繪制的前景圖像都可以通過(guò)前景基準(zhǔn)圖像進(jìn)行像素置換獲得，而不需要針對(duì)不同的色彩風(fēng)格分別設(shè)計(jì)不同的界面元素圖案。
[0061]如圖5所示，在一個(gè)實(shí)施例中，該繪制界面元素的方法還包括切換界面元素的狀態(tài)的步驟，具體包括以下步驟:
[0062]步驟502,獲取界面元素原始狀態(tài)以及期望狀態(tài)的前景信息。
[0063]具體地，界面元素可以具有不同的狀態(tài)，比如一個(gè)控件可以具有正常狀態(tài)、光標(biāo)懸浮狀態(tài)以及觸發(fā)狀態(tài)。其中正常態(tài)是指控件默認(rèn)顯示的狀態(tài)，光標(biāo)懸浮狀態(tài)是指用戶移動(dòng)光標(biāo)到顯示控件的位置時(shí)控件所顯示的狀態(tài)，而觸發(fā)狀態(tài)則是指用戶通過(guò)單擊、雙擊或者觸摸等觸發(fā)動(dòng)作操作控件使得控件所顯示出的狀態(tài)。當(dāng)然界面元素的狀態(tài)還可以做出更多或者更少的狀態(tài)劃分，在這里不一一贅述。
[0064]舉例說(shuō)明，如圖6所示，在用戶未操作的情況下，一個(gè)界面元素顯示為如602所示的正常狀態(tài)。當(dāng)用戶通過(guò)鼠標(biāo)或者滑動(dòng)觸摸板將光標(biāo)移動(dòng)到該界面元素處時(shí)，該界面元素顯示為如604所示的光標(biāo)懸浮狀態(tài)。當(dāng)用戶通過(guò)單擊、雙擊或者觸摸等觸發(fā)動(dòng)作操作該界面元素時(shí)，該界面元素則顯示為如606所示的觸發(fā)狀態(tài)，操作結(jié)束后可根據(jù)光標(biāo)位置返回光標(biāo)懸浮狀態(tài)或者正常狀態(tài)。
[0065]原始狀態(tài)是界面元素的狀態(tài)被切換前的狀態(tài)，期望狀態(tài)是指界面元素的狀態(tài)被切換后所需達(dá)到的狀態(tài)。具體步驟502中分別獲取界面元素原始狀態(tài)的前景信息以及期望狀態(tài)的前景信息。前景信息可以是相應(yīng)狀態(tài)下界面元素全部或者部分前景圖像的信息，這里部分前景圖像的信息是可以用來(lái)代表不同狀態(tài)的界面元素之間差異的特征信息。
[0066]步驟504,比較原始狀態(tài)以及期望狀態(tài)的前景信息是否存在繪制差異；若是，則執(zhí)行步驟506 ;若否，則執(zhí)行步驟508。
[0067]具體地，比較原始狀態(tài)的前景信息和期望狀態(tài)的前景信息，判斷兩者在繪制上是否存在差異。這里比較前景信息，可以是遍歷原始狀態(tài)的前景圖像中的每個(gè)像素點(diǎn)的色值， 與相應(yīng)的期望狀態(tài)的前景圖像中的像素點(diǎn)的色值比較，若至少有一個(gè)像素點(diǎn)的色值存在不一致的情況，則說(shuō)明存在繪制差異?；蛘呖梢员闅v原始狀態(tài)的前景圖像中的特征信息，與相應(yīng)的期望狀態(tài)的前景圖像中的特征信息比較，若至少存在一處不一致的情況，則說(shuō)明存在繪制差異。
[0068]步驟506,將界面元素原始狀態(tài)的前景圖像重繪為期望狀態(tài)的前景圖像。
[0069]具體地，若原始狀態(tài)以及期望狀態(tài)的前景信息存在繪制差異時(shí)，需要將界面元素原始狀態(tài)的前景圖像進(jìn)行重繪，得到期望狀態(tài)的前景圖像。可以將界面元素原始狀態(tài)的前景圖像重繪，逐次變化為期望狀態(tài)的前景圖像。比如可以通過(guò)逐次改變透明度來(lái)逐次變化為期望狀態(tài)的前景圖像。
[0070]如圖7所示，在一個(gè)實(shí)施例中，步驟506具體包括如下步驟:
[0071]步驟702,計(jì)算界面元素從原始狀態(tài)逐次變化到期望狀態(tài)的各幀前景圖像中各個(gè)像素點(diǎn)的前景色值。
[0072]具體地，本實(shí)施例中將從原始狀態(tài)的前景圖像切換到期望狀態(tài)的前景圖像的過(guò)程劃分為多幀前景圖像，用來(lái)逐幀繪制，達(dá)到逐次變化到期望狀態(tài)的前景圖像的目的。逐次變化的過(guò)程可以是均勻的也可以是非均勻的。
[0073]在一個(gè)實(shí)施例中，可以采用公式(5)來(lái)計(jì)算界面元素從原始狀態(tài)逐次變化到期望狀態(tài)的各幀前景圖像中各個(gè)像素點(diǎn)的前景色值:
[0074]公式(5):C_Mid = C_0ri+(C_Exp-C_0ri) X (N_Now + N_Total) 〇
[0075]公式(5)中，C_Mid是各幀前景圖像中各個(gè)像素點(diǎn)的前景色值，C_0ri是界面元素的原始狀態(tài)的各個(gè)像素點(diǎn)的前景色值，C_Exp是界面元素的期望狀態(tài)的各個(gè)像素點(diǎn)的前景色值，N_Now是當(dāng)下計(jì)算的那一幀前景圖像的幀序號(hào)，N_Total是各幀前景圖像的幀總數(shù)。 C_Mid 值域?yàn)閇0,255]。
[0076]當(dāng) N_Now = 0 時(shí)為原始狀態(tài)，C_Mid = C_0ri ;逐漸變化到 N_Now = N_Total 時(shí)， C_Mid = C_Exp。其中幀總數(shù)可以預(yù)先設(shè)定，具體可以在編制應(yīng)用程序時(shí)設(shè)定，或者可由用戶設(shè)定；可以根據(jù)不同界面元素的不同情況，設(shè)定不同的幀總數(shù)。
[0077]步驟704,按各幀前景圖像逐次變化的順序，逐幀根據(jù)前景色值進(jìn)行繪制。
[0078]具體地，步驟702中計(jì)算出的前景色值按幀組合形成的各幀前景圖像，是對(duì)原始狀態(tài)的前景圖像進(jìn)行像素置換所得到的圖像。按照幀序號(hào)從小到大的順序逐幀繪制每幀前景圖像。這樣可以達(dá)到界面元素的前景圖像從原始狀態(tài)逐漸變化到期望狀態(tài)的效果。
[0079]步驟508,獲取界面元素原始狀態(tài)以及期望狀態(tài)的背景信息。
[0080]具體地，可分別獲取界面元素原始狀態(tài)的背景信息以及期望狀態(tài)的背景信息。背景信息可以是相應(yīng)狀態(tài)下界面元素對(duì)應(yīng)的全部或者部分背景圖像的信息，這里部分背景圖像的信息可以是用來(lái)代表不同狀態(tài)的界面元素的背景之間差異的特征信息?？梢岳斫獾氖遣襟E508可以在執(zhí)行步驟502時(shí)執(zhí)行，相應(yīng)地步驟504中判斷為否時(shí)可以直接執(zhí)行步驟 510〇
[0081]步驟510,比較原始狀態(tài)以及期望狀態(tài)的背景信息是否存在繪制差異；若是，則執(zhí)行步驟512;若否，則無(wú)動(dòng)作。
[0082]具體地，比較原始狀態(tài)的背景信息和期望狀態(tài)的背景信息，判斷兩者在繪制上是否存在差異。這里比較背景信息，可以是遍歷原始狀態(tài)的背景圖像中的每個(gè)像素點(diǎn)的色值， 與相應(yīng)的期望狀態(tài)的背景圖像中的像素點(diǎn)的色值比較，若至少有一個(gè)像素點(diǎn)的色值存在不一致的情況，則說(shuō)明存在繪制差異?；蛘呖梢员闅v原始狀態(tài)的背景圖像中的特征信息，與相應(yīng)的期望狀態(tài)的背景圖像中的特征信息比較，若至少存在一處不一致的情況，則說(shuō)明存在繪制差異。
[0083]步驟512,將界面元素原始狀態(tài)的背景圖像重繪為期望狀態(tài)的背景圖像。
[0084]具體地，若原始狀態(tài)以及期望狀態(tài)的背景信息存在繪制差異時(shí)，需要將界面元素原始狀態(tài)的背景圖像進(jìn)行重繪，得到期望狀態(tài)的背景圖像?？梢詫⒔缑嬖卦紶顟B(tài)的背景圖像重繪，逐次變化為期望狀態(tài)的背景圖像。比如可以通過(guò)逐次改變透明度來(lái)逐次變化為期望狀態(tài)的背景圖像。
[0085]在一個(gè)實(shí)施例中，步驟512具體包括:計(jì)算從原始狀態(tài)逐次變化到期望狀態(tài)的各幀背景圖像的背景色值，并按變化順序逐次填充到界面元素的背景區(qū)域。
[0086]具體地，本實(shí)施例中將從原始狀態(tài)的背景圖像切換到期望狀態(tài)的背景圖像的過(guò)程劃分為多幀背景圖像，用來(lái)逐幀繪制，達(dá)到逐次變化到期望狀態(tài)的背景圖像的目的。逐次變化的過(guò)程可以是均勻的也可以是非均勻的。由于背景圖像通常是純色，因此可以不必計(jì)算每一個(gè)像素點(diǎn)的背景色值，而只需計(jì)算出每幀背景圖像中的代表像素點(diǎn)的背景色值，從而按照變化順序，逐次將該背景色值填充到界面元素的背景區(qū)域，就可以達(dá)到界面元素的背景圖像從原始狀態(tài)逐漸變化到期望狀態(tài)的效果?？梢岳斫獾氖牵瑢⒔缑嬖卦紶顟B(tài)的前景圖像重繪，逐次變化為期望狀態(tài)的前景圖像，以及將界面元素原始狀態(tài)的背景圖像重繪， 逐次變化為期望狀態(tài)的背景圖像，是同步進(jìn)行的，就是說(shuō)前景圖像變化背景圖像也跟著變化。
[0087]上述各實(shí)施例的繪制界面元素的方法，通過(guò)切換界面元素的狀態(tài)，可以使得用戶可以及時(shí)地獲取到操作界面元素的反饋，更容易進(jìn)行人機(jī)交互。而通過(guò)將界面元素從原始狀態(tài)逐次變化到期望狀態(tài)，可以使得界面元素的狀態(tài)改變過(guò)渡自然。
[0088]如圖8所示，在一個(gè)實(shí)施例中，提供了一種繪制界面元素的裝置800,具有實(shí)現(xiàn)上述各個(gè)實(shí)施例的繪制界面元素的方法的功能。該繪制界面元素的裝置800具體包括獲取模塊802、模式確定模塊804、待繪制的前景圖像生成模塊806和繪制模塊808。
[0089]獲取模塊802,用于獲取界面元素的前景基準(zhǔn)圖和相應(yīng)的背景圖像。
[0090]具體地，獲取模塊802可以在生成操作系統(tǒng)或者應(yīng)用程序的交互界面時(shí)，或者在根據(jù)用戶操作切換交互界面中的界面元素的狀態(tài)時(shí)，獲取界面元素的前景基準(zhǔn)圖和相應(yīng)的背景圖像。界面元素是構(gòu)成操作系統(tǒng)或者應(yīng)用程序的交互界面的組成部分，比如一個(gè)可視的控件或者一個(gè)單純的圖標(biāo)。應(yīng)用程序可以是網(wǎng)頁(yè)瀏覽器、閱讀軟件、即時(shí)通信軟件等任意應(yīng)用程序。從應(yīng)用程序類型上分，應(yīng)用程序可以是原生應(yīng)用程序、網(wǎng)頁(yè)應(yīng)用程序以及輕應(yīng)用程序等。
[0091]背景是交互界面的底層，前景則在交互界面的背景之上，是需要展示的內(nèi)容。前景的顏色一般與背景的顏色不同，從而與交互界面其它部分區(qū)分開。界面元素與前景基準(zhǔn)圖對(duì)應(yīng)，該前景基準(zhǔn)圖作為繪制相應(yīng)的界面元素的基礎(chǔ)，各種效果的界面元素均可根據(jù)該前景基準(zhǔn)圖生成。背景圖像則是指交互界面中用來(lái)繪制相應(yīng)的界面元素的位置處的底層圖像。舉例來(lái)說(shuō)，如圖3所示，一個(gè)界面元素300,其前景圖像為302,背景圖像為304。
[0092]模式確定模塊804,用于確定前景基準(zhǔn)圖和背景圖像的圖像混合模式。
[0093]圖像混合模式是指將某圖像對(duì)象的顏色與底層對(duì)象的顏色混合的方式，這里具體是將前景基準(zhǔn)圖和背景圖像混合的方式。通過(guò)圖像混合，可以使得繪制出的界面元素與交互界面的背景風(fēng)格保持一致。
[0094]圖像混合模式包括但不限于:線性加深模式、線性減淡模式、顏色減淡模式以及顏色加深模式等。其中，線性加深模式是指通過(guò)降低亮度使底層的顏色變暗來(lái)反映繪圖色的圖像混合模式。線性減淡模式是指通過(guò)增加亮度使底層的顏色變亮來(lái)反映繪圖色的圖像混合模式。顏色加深模式是指通過(guò)增加對(duì)比度使底色變暗來(lái)反映繪圖色的圖像混合模式。顏色減淡模式則是通過(guò)減少對(duì)比度使底色變亮來(lái)反映繪圖色的圖像混合模式。
[0095]具體地，模式確定模塊804可用于采用預(yù)先設(shè)定的圖像混合模式作為前景基準(zhǔn)圖和背景圖像的圖像混合模式。這里預(yù)先設(shè)定的圖像混合模式可以是在編寫應(yīng)用程序時(shí)設(shè)定的，也可以是根據(jù)用戶選擇操作從預(yù)設(shè)的圖像混合模式的集合中選定的。比如應(yīng)用程序可以提供圖像混合模式配置界面，并將預(yù)設(shè)的圖像混合模式的集合展示為相應(yīng)數(shù)量的選項(xiàng)， 根據(jù)用戶對(duì)選項(xiàng)的選擇操作設(shè)定當(dāng)前采用的圖像混合模式。
[0096]待繪制的前景圖像生成模塊806,用于根據(jù)確定的圖像混合模式所對(duì)應(yīng)的計(jì)算方式，對(duì)前景基準(zhǔn)圖進(jìn)行像素置換，獲得待繪制的前景圖像。
[0097]具體地，每種圖像混合模式對(duì)應(yīng)一種計(jì)算方式，該計(jì)算方式是實(shí)現(xiàn)圖像混合操作的函數(shù)，用來(lái)對(duì)前景基準(zhǔn)圖進(jìn)行像素置換。這里對(duì)前景基準(zhǔn)圖進(jìn)行像素置換是指根據(jù)計(jì)算方式，將前景基準(zhǔn)圖中需要變更顏色的像素的色值替換成所需的色值的操作，這樣可以與各種色彩風(fēng)格的交互界面在風(fēng)格上保持一致。對(duì)前景基準(zhǔn)圖進(jìn)行了像素置換后所得到的圖像就是待繪制的前景圖像。
[0098]繪制模塊808,用于繪制待繪制的前景圖像。具體地，繪制模塊808可用于將待繪制的前景圖像繪制到交互界面的指定區(qū)域。
[0099]上述繪制界面元素的裝置800,為繪制控件這樣的界面元素，僅需要準(zhǔn)備前景基準(zhǔn)圖，通過(guò)圖像混合獲得待繪制的前景圖像并繪制，從而得到所需的界面元素效果。這樣通過(guò)圖像混合可以獲得與交互界面當(dāng)前色彩風(fēng)格更一致的視覺(jué)效果，不再需要為各種色彩風(fēng)格的界面預(yù)先設(shè)計(jì)各種貼圖資源，克服了貼圖資源占用的存儲(chǔ)資源不可控的問(wèn)題，而且可以節(jié)省設(shè)計(jì)各種貼圖資源所需的人力成本。
[0100]如圖9所示，在一個(gè)實(shí)施例中，待繪制的前景圖像生成模塊806包括目標(biāo)色值計(jì)算模塊806a和執(zhí)行模塊806b。[〇1〇1]目標(biāo)色值計(jì)算模塊806a，用于根據(jù)確定的圖像混合模式所對(duì)應(yīng)的計(jì)算方式，代入前景基準(zhǔn)圖每個(gè)像素點(diǎn)的色值以及相應(yīng)的背景色值，計(jì)算獲得相應(yīng)的目標(biāo)色值。
[0102]具體地，一個(gè)像素點(diǎn)的色值是指用來(lái)表示該像素點(diǎn)的色彩的數(shù)值，在RGB顏色模式下，一個(gè)色值可由紅色、綠色和藍(lán)色三部分來(lái)定義，每部分可在0?255內(nèi)取值。色值在參與計(jì)算時(shí)，色值的每個(gè)部分分別進(jìn)行計(jì)算后再組合。
[0103]在某些圖像混合模式下，除了代入前景基準(zhǔn)圖每個(gè)像素點(diǎn)的色值以及相應(yīng)的背景色值，還需要代入指定的透明度。所謂透明度是指一個(gè)像素點(diǎn)的透明程度，若透明度為〇%， 則相應(yīng)的像素點(diǎn)是完全透明的，若透明度為100%，則相應(yīng)的像素點(diǎn)是完全不透明的。
[0104]在一個(gè)實(shí)施例中，若圖像混合模式為線性加深模式，則目標(biāo)色值計(jì)算模塊806a可用于采用公式(1)所表示的計(jì)算方式來(lái)計(jì)算目標(biāo)色值:
[0105]公式(1):Color_0bj = (Color_Back+Color_Front) XDegree_Trans〇
[0106]公式⑴中，Col〇r_0bj表示目標(biāo)色值，C〇l〇r_Fr〇nt表示前景基準(zhǔn)圖一個(gè)像素點(diǎn)的色值，Color_Back表示具有該Color_Front色值的像素點(diǎn)所對(duì)應(yīng)的背景圖像中的像素點(diǎn)的色值，Degree_Trans表示透明度。
[0107]在一個(gè)實(shí)施例中，若圖像混合模式為線性減淡模式，則目標(biāo)色值計(jì)算模塊806a可用于采用公式(2)所表示的計(jì)算方式來(lái)計(jì)算目標(biāo)色值:
[0108]公式(2):
[0109]Color_0bj = Color_Back-(255-Color_Front) XDegree_Trans, (Color_ Front+Color_Back>255)。
[0110]Color_0b j = Color_BackX (l_Degree_Trans)，(Color_Front+Colo;r_Back〈255)
[0111]公式⑵中，Col〇r_0bj表示目標(biāo)色值，C〇l〇r_Fr〇nt表示前景基準(zhǔn)圖一個(gè)像素點(diǎn)的色值，Color_Back表示具有該Color_Front色值的像素點(diǎn)所對(duì)應(yīng)的背景圖像中的像素點(diǎn)的色值，Degree_Trans表示透明度。
[0112]在一個(gè)實(shí)施例中，若圖像混合模式為顏色減淡模式，則目標(biāo)色值計(jì)算模塊806a可用于采用公式(3)所表示的計(jì)算方式來(lái)計(jì)算目標(biāo)色值:
[0113]公式(3):Color_0bj = Color_Back + [ (Color_Front X Color_ Back)+(255-Color_Front)]。
[0114]公式⑶中，Col〇r_0bj表示目標(biāo)色值，C〇l〇r_Fr〇nt表示前景基準(zhǔn)圖一個(gè)像素點(diǎn)的色值，Color_Back表示具有該Color_Front色值的像素點(diǎn)所對(duì)應(yīng)的背景圖像中的像素點(diǎn)的色值。
[0115]在一個(gè)實(shí)施例中，若圖像混合模式為顏色加深模式，則目標(biāo)色值計(jì)算模塊806a可用于采用公式(4)所表示的計(jì)算方式來(lái)計(jì)算目標(biāo)色值:
[0116]公式(4):Color_0bj = (Color_Back+Color_F;ront-255) X 255 + Color_Front〇
[0117]公式⑷中，Col〇r_0bj表示目標(biāo)色值，C〇l〇r_Fr〇nt表示前景基準(zhǔn)圖一個(gè)像素點(diǎn)的色值，Color_Back表示具有該Color_Front色值的像素點(diǎn)所對(duì)應(yīng)的背景圖像中的像素點(diǎn)的色值?？梢岳斫獾氖牵鲜龉?1)?(4)計(jì)算出的結(jié)果取整。
[0118]執(zhí)行模塊806b，用于將前景基準(zhǔn)圖各個(gè)像素點(diǎn)所對(duì)應(yīng)的目標(biāo)色值組合形成待繪制的前景圖像。具體地，執(zhí)行模塊806b可用于將計(jì)算出的前景基準(zhǔn)圖各個(gè)像素點(diǎn)所對(duì)應(yīng)的目標(biāo)色值，按照各個(gè)像素點(diǎn)在前景基準(zhǔn)圖中的位置進(jìn)行組合，形成待繪制的前景圖像。
[0119]本實(shí)施例中，通過(guò)將前景基準(zhǔn)圖每個(gè)像素點(diǎn)的色值以及相應(yīng)的背景色值以及透明度等計(jì)算參數(shù)代入確定的圖像混合模式的計(jì)算方式，計(jì)算獲得目標(biāo)色值，從而完成對(duì)前景基準(zhǔn)圖的像素置換，獲得待繪制的前景圖像。這樣各種色彩風(fēng)格下的待繪制的前景圖像都可以通過(guò)前景基準(zhǔn)圖像進(jìn)行像素置換獲得，而不需要針對(duì)不同的色彩風(fēng)格分別設(shè)計(jì)不同的界面元素圖案。
[0120]如圖10所示，在一個(gè)實(shí)施例中，繪制界面元素的裝置800還包括第一比較模塊 810〇
[0121]獲取模塊802還用于獲取界面元素原始狀態(tài)以及期望狀態(tài)的前景信息。具體地，界面元素可以具有不同的狀態(tài)，比如一個(gè)控件可以具有正常狀態(tài)、光標(biāo)懸浮狀態(tài)以及觸發(fā)狀態(tài)。其中正常態(tài)是指控件默認(rèn)顯示的狀態(tài)，光標(biāo)懸浮狀態(tài)是指用戶移動(dòng)光標(biāo)到顯示控件的位置時(shí)控件所顯示的狀態(tài)，而觸發(fā)狀態(tài)則是指用戶通過(guò)單擊、雙擊或者觸摸等觸發(fā)動(dòng)作操作控件使得控件所顯示出的狀態(tài)。當(dāng)然界面元素的狀態(tài)還可以做出更多或者更少的狀態(tài)劃分，在這里不贅述。
[0122]原始狀態(tài)是界面元素的狀態(tài)被切換前的狀態(tài)，期望狀態(tài)是指界面元素的狀態(tài)被切換后所需達(dá)到的狀態(tài)。具體獲取模塊802可用于分別獲取界面元素原始狀態(tài)的前景信息以及期望狀態(tài)的前景信息。前景信息可以是相應(yīng)狀態(tài)下界面元素全部或者部分前景圖像的信息，這里部分前景圖像的信息是可以用來(lái)代表不同狀態(tài)的界面元素之間差異的特征信息。
[0123]第一比較模塊810,用于比較原始狀態(tài)以及期望狀態(tài)的前景信息是否存在繪制差異。具體地，第一比較模塊810用于比較原始狀態(tài)的前景信息和期望狀態(tài)的前景信息，判斷兩者在繪制上是否存在差異。這里比較前景信息，可以是遍歷原始狀態(tài)的前景圖像中的每個(gè)像素點(diǎn)的色值，與相應(yīng)的期望狀態(tài)的前景圖像中的像素點(diǎn)的色值比較，若至少有一個(gè)像素點(diǎn)的色值存在不一致的情況，則說(shuō)明存在繪制差異?；蛘呖梢员闅v原始狀態(tài)的前景圖像中的特征信息，與相應(yīng)的期望狀態(tài)的前景圖像中的特征信息比較，若至少存在一處不一致的情況，則說(shuō)明存在繪制差異。
[0124]繪制模塊808還用于若原始狀態(tài)以及期望狀態(tài)的前景信息存在繪制差異，則將界面元素原始狀態(tài)的前景圖像重繪為期望狀態(tài)的前景圖像。
[0125]具體地，若原始狀態(tài)以及期望狀態(tài)的前景信息存在繪制差異時(shí)，需要將界面元素原始狀態(tài)的前景圖像進(jìn)行重繪，得到期望狀態(tài)的前景圖像。繪制模塊808可用于將界面元素原始狀態(tài)的前景圖像重繪，逐次變化為期望狀態(tài)的前景圖像。比如可以通過(guò)逐次改變透明度來(lái)逐次變化為期望狀態(tài)的前景圖像。
[0126]在一個(gè)實(shí)施例中，繪制模塊808還用于計(jì)算界面元素從原始狀態(tài)逐次變化到期望狀態(tài)的各幀前景圖像中各個(gè)像素點(diǎn)的前景色值；按各幀前景圖像逐次變化的順序，逐幀根據(jù)前景色值進(jìn)行繪制。
[0127]具體地，本實(shí)施例中將從原始狀態(tài)的前景圖像切換到期望狀態(tài)的前景圖像的過(guò)程劃分為多幀前景圖像，用來(lái)逐幀繪制，達(dá)到逐次變化到期望狀態(tài)的前景圖像的目的。逐次變化的過(guò)程可以是均勻的也可以是非均勻的。
[0128]在一個(gè)實(shí)施例中，繪制模塊808可用于采用公式(5)來(lái)計(jì)算界面元素從原始狀態(tài)逐次變化到期望狀態(tài)的各幀前景圖像中各個(gè)像素點(diǎn)的前景色值:
[0129]公式(5):C_Mid = C_0ri+(C_Exp-C_0ri) X (N_Now + N_Total)。
[0130]公式(5)中，C_Mid是各幀前景圖像中各個(gè)像素點(diǎn)的前景色值，C_0ri是界面元素的原始狀態(tài)的各個(gè)像素點(diǎn)的前景色值，C_Exp是界面元素的期望狀態(tài)的各個(gè)像素點(diǎn)的前景色值，N_Now是當(dāng)下計(jì)算的那一幀前景圖像的幀序號(hào)，N_Total是各幀前景圖像的幀總數(shù)。當(dāng) N_Now = O 時(shí)為原始狀態(tài)，C_Mid = C_0ri，逐漸變化到 N_Now = N_Total 時(shí)，C_Mid = C_Exp。其中幀總數(shù)可以預(yù)先設(shè)定，具體可以在編制應(yīng)用程序時(shí)設(shè)定，或者可由用戶設(shè)定；可以根據(jù)不同界面元素的不同情況，設(shè)定不同的幀總數(shù)。
[0131]計(jì)算出的前景色值按幀組合形成的各幀前景圖像，是對(duì)原始狀態(tài)的前景圖像進(jìn)行像素置換所得到的圖像。繪制模塊808可用于按照幀序號(hào)從小到大的順序逐幀繪制每幀前景圖像。這樣可以達(dá)到界面元素的前景圖像從原始狀態(tài)逐漸變化到期望狀態(tài)的效果。
[0132]在一個(gè)實(shí)施例中，繪制界面元素的裝置800還包括第二比較模塊812。
[0133]獲取模塊802還用于獲取界面元素原始狀態(tài)以及期望狀態(tài)的背景信息。具體地，可分別獲取界面元素原始狀態(tài)的背景信息以及期望狀態(tài)的背景信息。背景信息可以是相應(yīng)狀態(tài)下界面元素對(duì)應(yīng)的全部或者部分背景圖像的信息，這里部分背景圖像的信息可以是用來(lái)代表不同狀態(tài)的界面元素的背景之間差異的特征信息。
[0134]第二比較模塊812，用于比較原始狀態(tài)以及期望狀態(tài)的背景信息是否存在繪制差異。具體地，第二比較模塊812可用于比較原始狀態(tài)的背景信息和期望狀態(tài)的背景信息，判斷兩者在繪制上是否存在差異。這里比較背景信息，可以是遍歷原始狀態(tài)的背景圖像中的每個(gè)像素點(diǎn)的色值，與相應(yīng)的期望狀態(tài)的背景圖像中的像素點(diǎn)的色值比較，若至少有一個(gè)像素點(diǎn)的色值存在不一致的情況，則說(shuō)明存在繪制差異?；蛘呖梢员闅v原始狀態(tài)的背景圖像中的特征信息，與相應(yīng)的期望狀態(tài)的背景圖像中的特征信息比較，若至少存在一處不一致的情況，則說(shuō)明存在繪制差異。
[0135]繪制模塊808還用于若原始狀態(tài)以及期望狀態(tài)的背景信息存在繪制差異，則將界面元素原始狀態(tài)的背景圖像重繪為期望狀態(tài)的背景圖像。
[0136]具體地，若原始狀態(tài)以及期望狀態(tài)的背景信息存在繪制差異時(shí)，需要將界面元素原始狀態(tài)的背景圖像進(jìn)行重繪，得到期望狀態(tài)的背景圖像?？梢詫⒔缑嬖卦紶顟B(tài)的背景圖像重繪，逐次變化為期望狀態(tài)的背景圖像。比如可以通過(guò)逐次改變透明度來(lái)逐次變化為期望狀態(tài)的背景圖像。
[0137]在一個(gè)實(shí)施例中，繪制模塊808還用于計(jì)算從原始狀態(tài)逐次變化到期望狀態(tài)的各幀背景圖像的背景色值，并按變化順序逐次填充到界面元素的背景區(qū)域。
[0138]具體地，本實(shí)施例中將從原始狀態(tài)的背景圖像切換到期望狀態(tài)的背景圖像的過(guò)程劃分為多幀背景圖像，用來(lái)逐幀繪制，達(dá)到逐次變化到期望狀態(tài)的背景圖像的目的。逐次變化的過(guò)程可以是均勻的也可以是非均勻的。由于背景圖像通常是純色，因此可以不必計(jì)算每一個(gè)像素點(diǎn)的背景色值，而只需計(jì)算出每幀背景圖像中的代表像素點(diǎn)的背景色值，從而按照變化順序，逐次將該背景色值填充到界面元素的背景區(qū)域，就可以達(dá)到界面元素的背景圖像從原始狀態(tài)逐漸變化到期望狀態(tài)的效果?？梢岳斫獾氖?，將界面元素原始狀態(tài)的前景圖像重繪，逐次變化為期望狀態(tài)的前景圖像，以及將界面元素原始狀態(tài)的背景圖像重繪，逐次變化為期望狀態(tài)的背景圖像，是同步進(jìn)行的，就是說(shuō)前景圖像變化背景圖像也跟著變化。
[0139]上述各實(shí)施例的繪制界面元素的裝置800，通過(guò)切換界面元素的狀態(tài)，可以使得用戶可以及時(shí)地獲取到操作界面元素的反饋，更容易進(jìn)行人機(jī)交互。而通過(guò)將界面元素從原始狀態(tài)逐次變化到期望狀態(tài)，可以使得界面元素的狀態(tài)改變過(guò)渡自然。
[0140]本領(lǐng)域普通技術(shù)人員可以理解實(shí)現(xiàn)上述實(shí)施例方法中的全部或部分流程，是可以通過(guò)計(jì)算機(jī)程序來(lái)指令相關(guān)的硬件來(lái)完成，所述的程序可存儲(chǔ)于一計(jì)算機(jī)可讀取存儲(chǔ)介質(zhì)中，該程序在執(zhí)行時(shí)，可包括如上述各方法的實(shí)施例的流程。其中，所述的存儲(chǔ)介質(zhì)可為磁碟、光盤、只讀存儲(chǔ)記憶體(Read-Only Memory,ROM)等非易失性存儲(chǔ)介質(zhì)，或隨機(jī)存儲(chǔ)記憶體(Random Access Memory, RAM)等。
[0141]以上所述實(shí)施例僅表達(dá)了本發(fā)明的幾種實(shí)施方式，其描述較為具體和詳細(xì)，但并不能因此而理解為對(duì)本發(fā)明專利范圍的限制。應(yīng)當(dāng)指出的是，對(duì)于本領(lǐng)域的普通技術(shù)人員來(lái)說(shuō)，在不脫離本發(fā)明構(gòu)思的前提下，還可以做出若干變形和改進(jìn)，這些都屬于本發(fā)明的保護(hù)范圍。因此，本發(fā)明專利的保護(hù)范圍應(yīng)以所附權(quán)利要求為準(zhǔn)。
【主權(quán)項(xiàng)】
1.一種繪制界面元素的方法，所述方法包括:獲取界面元素的前景基準(zhǔn)圖和相應(yīng)的背景圖像；確定所述前景基準(zhǔn)圖和所述背景圖像的圖像混合模式；根據(jù)所述確定的圖像混合模式所對(duì)應(yīng)的計(jì)算方式，對(duì)所述前景基準(zhǔn)圖進(jìn)行像素置換， 獲得待繪制的前景圖像；繪制所述待繪制的前景圖像。2.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述根據(jù)所述確定的圖像混合模式所對(duì) 應(yīng)的計(jì)算方式，對(duì)所述前景基準(zhǔn)圖進(jìn)行像素置換，獲得待繪制的前景圖像，包括:根據(jù)所述確定的圖像混合模式所對(duì)應(yīng)的計(jì)算方式，代入所述前景基準(zhǔn)圖每個(gè)像素點(diǎn)的 色值以及相應(yīng)的背景色值，計(jì)算獲得相應(yīng)的目標(biāo)色值；將所述前景基準(zhǔn)圖各個(gè)像素點(diǎn)所對(duì)應(yīng)的目標(biāo)色值組合形成待繪制的前景圖像。3.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述方法還包括:獲取所述界面元素原始狀態(tài)以及期望狀態(tài)的前景信息；比較所述原始狀態(tài)以及期望狀態(tài)的前景信息是否存在繪制差異；當(dāng)所述原始狀態(tài)以及期望狀態(tài)的前景信息存在繪制差異時(shí)，將所述界面元素原始狀態(tài) 的前景圖像重繪為期望狀態(tài)的前景圖像。4.根據(jù)權(quán)利要求3所述的方法，其特征在于，所述方法還包括:獲取所述界面元素原始狀態(tài)以及期望狀態(tài)的背景信息；比較所述原始狀態(tài)以及期望狀態(tài)的背景信息是否存在繪制差異；當(dāng)所述原始狀態(tài)以及 期望狀態(tài)的背景信息存在繪制差異時(shí)，將所述界面元素原始狀態(tài)的背景圖像重繪為期望狀 態(tài)的背景圖像。5.根據(jù)權(quán)利要求4所述的方法，其特征在于，所述將所述界面元素原始狀態(tài)的背景圖 像重繪為期望狀態(tài)的背景圖像，包括:計(jì)算從原始狀態(tài)逐次變化到期望狀態(tài)的各幀背景圖像的背景色值，并按變化順序逐次 填充到所述界面元素的背景區(qū)域。6.根據(jù)權(quán)利要求3至5中任意一項(xiàng)所述的方法，其特征在于，所述將所述界面元素原始 狀態(tài)的前景圖像重繪為期望狀態(tài)的前景圖像，包括:計(jì)算所述界面元素從原始狀態(tài)逐次變化到期望狀態(tài)的各幀前景圖像中各個(gè)像素點(diǎn)的 前景色值；按各幀前景圖像逐次變化的順序，逐幀根據(jù)所述前景色值進(jìn)行繪制。7.—種繪制界面元素的裝置，其特征在于，所述裝置包括:獲取模塊，用于獲取界面元素的前景基準(zhǔn)圖和相應(yīng)的背景圖像；模式確定模塊，用于確定所述前景基準(zhǔn)圖和所述背景圖像的圖像混合模式；待繪制的前景圖像生成模塊，用于根據(jù)所述確定的圖像混合模式所對(duì)應(yīng)的計(jì)算方式， 對(duì)所述前景基準(zhǔn)圖進(jìn)行像素置換，獲得待繪制的前景圖像；繪制模塊，用于繪制所述待繪制的前景圖像。8.根據(jù)權(quán)利要求7所述的裝置，其特征在于，所述待繪制的前景圖像生成模塊包括: 目標(biāo)色值計(jì)算模塊，用于根據(jù)所述確定的圖像混合模式所對(duì)應(yīng)的計(jì)算方式，代入所述前景基準(zhǔn)圖每個(gè)像素點(diǎn)的色值以及相應(yīng)的背景色值，計(jì)算獲得相應(yīng)的目標(biāo)色值；執(zhí)行模塊，用于將所述前景基準(zhǔn)圖各個(gè)像素點(diǎn)所對(duì)應(yīng)的目標(biāo)色值組合形成待繪制的前景圖像。9.根據(jù)權(quán)利要求7所述的裝置，其特征在于，所述獲取模塊還用于獲取所述界面元素 原始狀態(tài)以及期望狀態(tài)的前景信息；所述裝置還包括第一比較模塊，用于比較所述原始狀態(tài)以及期望狀態(tài)的前景信息是否 存在繪制差異；所述繪制模塊還用于若所述原始狀態(tài)以及期望狀態(tài)的前景信息存在繪制差異，則將所 述界面元素原始狀態(tài)的前景圖像重繪為期望狀態(tài)的前景圖像。10.根據(jù)權(quán)利要求9所述的裝置，其特征在于，所述獲取模塊還用于獲取所述界面元素 原始狀態(tài)以及期望狀態(tài)的背景信息；所述裝置還包括第二比較模塊，用于比較所述原始狀態(tài)以及期望狀態(tài)的背景信息是否 存在繪制差異；所述繪制模塊還用于若所述原始狀態(tài)以及期望狀態(tài)的背景信息存在繪制差異，則將所 述界面元素原始狀態(tài)的背景圖像重繪為期望狀態(tài)的背景圖像。11.根據(jù)權(quán)利要求10所述的裝置，其特征在于，所述繪制模塊還用于計(jì)算從原始狀態(tài) 逐次變化到期望狀態(tài)的各幀背景圖像的背景色值，并按變化順序逐次填充到所述界面元素 的背景區(qū)域。12.根據(jù)權(quán)利要求9至11中任意一項(xiàng)所述的裝置，其特征在于，所述繪制模塊還用于計(jì) 算所述界面元素從原始狀態(tài)逐次變化到期望狀態(tài)的各幀前景圖像中各個(gè)像素點(diǎn)的前景色 值；按各幀前景圖像逐次變化的順序，逐幀根據(jù)所述前景色值進(jìn)行繪制。
【文檔編號(hào)】G06F9/44GK106033334SQ201510107005
【公開日】2016年10月19日
【申請(qǐng)日】2015年3月11日
【發(fā)明人】陳威
【申請(qǐng)人】騰訊科技（深圳）有限公司