專利名稱：一種焦點(diǎn)元素顯示方法、裝置及數(shù)字電視接收終端的制作方法
技術(shù)領(lǐng)域：
本發(fā)明涉及數(shù)字電視技術(shù)領(lǐng)域，尤其涉及一種焦點(diǎn)元素顯示方法、裝置及數(shù)字電 視接收終端。
背景技術(shù)：
隨著數(shù)字電視技術(shù)的不斷發(fā)展，數(shù)字電視接收終端的功能越來越多，通過嵌入式 瀏覽器上網(wǎng)成為主要的功能之一。嵌入式瀏覽器與電腦上的瀏覽器不同，在電腦上，當(dāng)用戶 對(duì)某一個(gè)鏈接的比較感興趣時(shí)，只需要用鼠標(biāo)點(diǎn)擊該鏈接即可瀏覽相關(guān)的鏈接內(nèi)容。但是， 在數(shù)字電視接收終端上的嵌入式瀏覽器沒有鼠標(biāo)，只有一個(gè)遙控器。所以嵌入式瀏覽器必 須突出顯示當(dāng)前焦點(diǎn)(即當(dāng)前可選擇的鏈接所在的位置)，告訴用戶當(dāng)前焦點(diǎn)在哪里。用戶 可以通過遙控器的上下左右鍵切換到自己感興趣的焦點(diǎn)元素。在現(xiàn)有技術(shù)中，對(duì)嵌入式瀏覽器瀏覽網(wǎng)頁(yè)顯示當(dāng)前焦點(diǎn)元素的方式主要有矩形 框標(biāo)記，填充色標(biāo)記，替換圖片三種。矩形框標(biāo)記就是用一個(gè)矩形框把當(dāng)前網(wǎng)頁(yè)焦點(diǎn)元素框 出來，作為一個(gè)標(biāo)記，告訴用戶當(dāng)前焦點(diǎn)元素的位置。填充色標(biāo)記就是用一個(gè)默認(rèn)的顏色填 充當(dāng)前焦點(diǎn)元素的背景顏色，作一個(gè)標(biāo)記，告訴用戶當(dāng)前焦點(diǎn)元素位置。這兩種方式都是瀏 覽器在當(dāng)前網(wǎng)頁(yè)上來標(biāo)記當(dāng)前焦點(diǎn)實(shí)現(xiàn)的。替換圖片則是網(wǎng)頁(yè)的開發(fā)人員通過客戶端腳本語(yǔ)言JavaScript來監(jiān)測(cè)。切換焦 點(diǎn)時(shí)，當(dāng)某個(gè)元素成為當(dāng)前焦點(diǎn)了，就用指定的圖片作為當(dāng)前元素的背景，作一個(gè)標(biāo)記，告 訴用戶當(dāng)前焦點(diǎn)元素位置。當(dāng)這個(gè)元素不再是當(dāng)前焦點(diǎn)了，卸載作為背景的指定圖片。這 種通過替換圖片顯示當(dāng)前焦點(diǎn)元素的方式，在加載、卸載圖片時(shí)，需要通過JavaScript腳 本語(yǔ)言來監(jiān)測(cè)和實(shí)現(xiàn)。而且圖片是放在前端設(shè)備上的。加載圖片要通過瀏覽器向前端設(shè)備 請(qǐng)求該圖片。而且由于每一個(gè)焦點(diǎn)元素的長(zhǎng)度和高度可能都不一樣，所以一個(gè)網(wǎng)頁(yè)可能需 要準(zhǔn)備若干張不同大小的替換圖片。另外，如果想實(shí)現(xiàn)一些復(fù)雜的焦點(diǎn)元素切換，如焦點(diǎn)切 換的過程實(shí)現(xiàn)平滑移動(dòng)等2D效果，需要編寫JavaScript腳本語(yǔ)言實(shí)現(xiàn)效果。這又要求網(wǎng) 頁(yè)開發(fā)人員熟練的掌握并使用JavaScript語(yǔ)言。發(fā)明人在實(shí)施本發(fā)明的過程中發(fā)現(xiàn)前兩種顯示焦點(diǎn)元素的方式(矩形框標(biāo)記、 填充色標(biāo)記)的顯示效果不佳。目前數(shù)字電視業(yè)務(wù)為了顯示效果，往往都不采用這兩種方 式，而是采用替換圖片的方式，這樣在視覺效果上比前兩者效果更好。然而這種效果是需要 替換圖片的，圖片的來源、焦點(diǎn)元素的尺寸等問題造成了圖片選擇的局限性。同時(shí)，在焦點(diǎn) 元素切換過程中，因?yàn)樾枰獜那岸嗽O(shè)備下載替換圖片，從而影響切換速度，使網(wǎng)絡(luò)異常，還 可能會(huì)出現(xiàn)焦點(diǎn)元素切換錯(cuò)誤，或者跳焦點(diǎn)切換的問題。綜上所述，通過替換圖片顯示焦點(diǎn)元素，因?yàn)樾枰獜那岸嗽O(shè)備下載數(shù)據(jù)，會(huì)影響切 換的速度，同時(shí)也增加前端設(shè)備的負(fù)荷量。通過JavaScript腳本語(yǔ)言實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)畫效 果，勢(shì)必會(huì)增加許多JavaScript腳本代碼，進(jìn)而影響瀏覽器的整體性能。同時(shí)，也增加網(wǎng)頁(yè) 開發(fā)人員的網(wǎng)頁(yè)編寫的代碼量(也會(huì)影響前端設(shè)備的負(fù)荷量)。

發(fā)明內(nèi)容
本發(fā)明提供一種焦點(diǎn)元素顯示方法、裝置及數(shù)字電視接收終端，使用戶瀏覽網(wǎng)頁(yè) 時(shí)，數(shù)字電視接收終端無需與前端設(shè)備交互，加快解析速度，實(shí)現(xiàn)焦點(diǎn)切換的動(dòng)畫效果。同 時(shí)也解決網(wǎng)絡(luò)環(huán)境差時(shí)的焦點(diǎn)異常問題，減少前端設(shè)備的下載負(fù)荷。本發(fā)明提供的焦點(diǎn)元素顯示方法包括創(chuàng)建兩個(gè)重合的網(wǎng)頁(yè)窗口，在下層窗口加載用戶選定的網(wǎng)頁(yè)內(nèi)容，在上層窗口加 載透明網(wǎng)頁(yè)；獲取所述下層窗口的排版信息，確定當(dāng)前焦點(diǎn)元素位置； 根據(jù)所述當(dāng)前焦點(diǎn)元素位置，在所述上層窗口的對(duì)應(yīng)位置進(jìn)行特效繪制。優(yōu)選的，所述創(chuàng)建兩個(gè)重合的網(wǎng)頁(yè)窗口，在下層窗口加載用戶選定的網(wǎng)頁(yè)內(nèi)容，在 上層窗口加載透明網(wǎng)頁(yè)包括創(chuàng)建兩個(gè)大小一致且完全重合的網(wǎng)頁(yè)窗口 ；根據(jù)用戶請(qǐng)求，向前端設(shè)備獲取網(wǎng)頁(yè)數(shù)據(jù)，并排版顯示在下層窗口 ；在上層窗口加載固定的全屏透明網(wǎng)頁(yè)。優(yōu)選的，所述當(dāng)前焦點(diǎn)元素位置包括當(dāng)前焦點(diǎn)元素的初始坐標(biāo)以及寬度、高度。優(yōu)選的，所述根據(jù)所述當(dāng)前焦點(diǎn)元素位置，在所述上層窗口的對(duì)應(yīng)位置進(jìn)行特效 繪制，包括根據(jù)下層窗口中當(dāng)前焦點(diǎn)元素的初始坐標(biāo)以及寬度、高度，在上層窗口中確定與 其重合的特效繪制區(qū)域；在所述特效繪制區(qū)域內(nèi)進(jìn)行特效繪制；所述特效繪制包括在所述特效繪制區(qū)域 內(nèi)著色或添加動(dòng)畫。優(yōu)選的，在所述特效繪制區(qū)域內(nèi)進(jìn)行特效繪制之后還包括接收焦點(diǎn)元素切換指令，獲取切換后的焦點(diǎn)元素位置；調(diào)整上層窗口網(wǎng)頁(yè)上的特效繪制區(qū)域，使所述特效繪制區(qū)域與下層窗口中切換后 的焦點(diǎn)元素位置重合。優(yōu)選的，所述調(diào)整上層窗口網(wǎng)頁(yè)上的特效繪制區(qū)域包括對(duì)上層窗口網(wǎng)頁(yè)上的特 效繪制區(qū)域進(jìn)行平移、拉伸、縮放、旋轉(zhuǎn)。本發(fā)明提供的焦點(diǎn)元素顯示裝置包括創(chuàng)建模塊，用于創(chuàng)建兩個(gè)重合的網(wǎng)頁(yè)窗口，在下層窗口加載用戶選定的網(wǎng)頁(yè)內(nèi)容， 在上層窗口加載透明網(wǎng)頁(yè)；焦點(diǎn)定位模塊，用于獲取所述下層窗口的排版信息，確定當(dāng)前焦點(diǎn)元素位置；特效繪制模塊，用于根據(jù)所述當(dāng)前焦點(diǎn)元素位置，在所述上層窗口的對(duì)應(yīng)位置進(jìn) 行特效繪制；網(wǎng)頁(yè)顯示模塊，用于顯示完成特效繪制后的網(wǎng)頁(yè)。優(yōu)選的，所述創(chuàng)建模塊包括窗口創(chuàng)建單元，用于創(chuàng)建兩個(gè)大小一致且完全重合的網(wǎng)頁(yè)窗口 ；下層窗口顯示單元，用于根據(jù)用戶請(qǐng)求，向前端設(shè)備獲取網(wǎng)頁(yè)數(shù)據(jù)，并排版顯示在 所述窗口創(chuàng)建單元?jiǎng)?chuàng)建的下層窗口中；上層窗口加載單元，用于在所述窗口創(chuàng)建單元?jiǎng)?chuàng)建的上層窗口中加載固定的全屏透明網(wǎng)頁(yè)。優(yōu)選的，所述焦點(diǎn)定位模塊確定的當(dāng)前焦點(diǎn)元素位置包括當(dāng)前焦點(diǎn)元素的初始 坐標(biāo)以及寬度、高度。優(yōu)選的，所述特效繪制模塊包括區(qū)域定位單元，用于根據(jù)下層窗口中當(dāng)前焦點(diǎn)元 素的初始坐標(biāo)以及寬度、高度，在上層窗口中確定與其重合的特效繪制區(qū)域；特效繪制單 元，用于在所述區(qū)域定位單元確定的特效繪制區(qū)域內(nèi)進(jìn)行特效繪制；所述特效繪制包括 在所述特效繪制區(qū)域內(nèi)著色或添加動(dòng)畫。優(yōu)選的，所述焦點(diǎn)定位模塊包括初始定位單元，用于獲取下層窗口的排版信息， 確定當(dāng)前焦點(diǎn)元素位置；切換定位單元，用于接收焦點(diǎn)元素切換指令，獲取切換后的焦點(diǎn)元 素位置。優(yōu)選的，所述特效繪制模塊還包括上層窗口管理單元，用于調(diào)整上層窗口網(wǎng)頁(yè)中 的特效繪制區(qū)域，使所述特效繪制區(qū)域與下層窗口中切換后的焦點(diǎn)元素位置重合；所述調(diào) 整方式包括對(duì)上層窗口網(wǎng)頁(yè)中的特效繪制區(qū)域進(jìn)行平移、拉伸、縮放、旋轉(zhuǎn)。同時(shí)，本發(fā)明還提供一種數(shù)字電視接收終端，該數(shù)字電視接收終端包括上述焦點(diǎn) 元素顯示裝置。實(shí)施本發(fā)明提供的焦點(diǎn)元素顯示方法、裝置及數(shù)字電視接收終端，可以使用戶瀏 覽網(wǎng)頁(yè)時(shí)，終端無需與前端設(shè)備交互，加快解析速度，實(shí)現(xiàn)焦點(diǎn)顯示的動(dòng)畫效果。同時(shí)也解 決網(wǎng)絡(luò)環(huán)境差時(shí)的焦點(diǎn)異常問題，減少前端設(shè)備的下載負(fù)荷。


為了更清楚地說明本發(fā)明實(shí)施例或現(xiàn)有技術(shù)中的技術(shù)方案，下面將對(duì)實(shí)施例或現(xiàn) 有技術(shù)描述中所需要使用的附圖作簡(jiǎn)單地介紹，顯而易見地，下面描述中的附圖僅僅是本 發(fā)明的一些實(shí)施例，對(duì)于本領(lǐng)域普通技術(shù)人員來講，在不付出創(chuàng)造性勞動(dòng)性的前提下，還可 以根據(jù)這些附圖獲得其他的附圖。圖1為本發(fā)明提供的焦點(diǎn)元素顯示方法第一實(shí)施例流程示意圖；圖2為本發(fā)明提供的焦點(diǎn)元素顯示方法第二實(shí)施例流程示意圖；圖3為本發(fā)明提供的上下層窗口顯示示意圖；圖4為本發(fā)明提供的焦點(diǎn)元素顯示裝置第一實(shí)施例結(jié)構(gòu)示意圖；圖5為本發(fā)明提供的焦點(diǎn)元素顯示裝置第二實(shí)施例結(jié)構(gòu)示意圖。
具體實(shí)施例方式本發(fā)明提供一種焦點(diǎn)元素顯示方法、裝置及數(shù)字電視接收終端，使用戶瀏覽網(wǎng)頁(yè) 時(shí)，終端無需與前端設(shè)備交互，實(shí)現(xiàn)焦點(diǎn)切換的動(dòng)畫效果，加快解析速度。同時(shí)也解決網(wǎng)絡(luò) 環(huán)境差時(shí)的焦點(diǎn)異常問題，減少前端設(shè)備的下載負(fù)荷。參見圖1，為本發(fā)明提供的焦點(diǎn)元素顯示方法第一實(shí)施例流程示意圖，如圖1所 示在步驟100，創(chuàng)建至少兩個(gè)重合的網(wǎng)頁(yè)窗口，在下層窗口加載用戶選定的網(wǎng)頁(yè)內(nèi) 容，在上層窗口加載透明網(wǎng)頁(yè)。在步驟101，獲取所述下層窗口的排版信息，確定當(dāng)前焦點(diǎn)元素位置，即當(dāng)前可選擇的鏈接所在的位置。在步驟102，根據(jù)所述當(dāng)前焦點(diǎn)元素位置，在所述上層窗口的對(duì)應(yīng)位置進(jìn)行特效繪 制。在步驟103，顯示完成特效繪制后的網(wǎng)頁(yè)。更為具體的，下層窗口中的網(wǎng)頁(yè)與上層 窗口中的網(wǎng)頁(yè)重合，上層窗口網(wǎng)頁(yè)上的特效繪制區(qū)域使下層窗口網(wǎng)頁(yè)中的當(dāng)前焦點(diǎn)元素得 到突出的顯示。同時(shí)，上層窗口網(wǎng)頁(yè)的其它部分是透明的，所以用戶也可以正常瀏覽下層窗 口網(wǎng)頁(yè)中的其它內(nèi)容。實(shí)施本發(fā)明提供的焦點(diǎn)元素顯示方法，在用戶瀏覽的網(wǎng)頁(yè)前，再建立一個(gè)透明的 網(wǎng)頁(yè)，在透明的網(wǎng)頁(yè)上進(jìn)行特效繪制，顯示當(dāng)前的焦點(diǎn)元素，使用戶瀏覽網(wǎng)頁(yè)時(shí)，終端無需 與前端設(shè)備交互，加快解析速度。同時(shí)也解決網(wǎng)絡(luò)環(huán)境差時(shí)的焦點(diǎn)異常問題，減少前端設(shè)備 的下載負(fù)荷。參見圖2，為本發(fā)明提供的焦點(diǎn)元素顯示方法第二實(shí)施例流程示意圖，在本實(shí)施例 中，將更為詳細(xì)的描述本方法的流程，如圖2所示在步驟200，創(chuàng)建至少兩個(gè)大小一致且完全重合的網(wǎng)頁(yè)窗口。更為具體的，當(dāng)用戶通過操作確認(rèn)需要瀏覽一個(gè)網(wǎng)頁(yè)時(shí)，數(shù)字電視接收終端打開 一個(gè)網(wǎng)頁(yè)窗口用于加載用戶選擇的網(wǎng)頁(yè)，同時(shí)數(shù)字電視接收終端默認(rèn)打開另一個(gè)與前述窗 口大小相同，且完全重合的網(wǎng)頁(yè)窗口。在本發(fā)明實(shí)施例中，位于下層的網(wǎng)頁(yè)窗口我們稱為下 層窗口，與下層窗口大小一致，且完全覆蓋在所述下層窗口上的網(wǎng)頁(yè)窗口為上層窗口。在步驟201，數(shù)字電視接收終端向前端設(shè)備發(fā)送網(wǎng)頁(yè)數(shù)據(jù)獲取請(qǐng)求，以獲取用戶選 擇的網(wǎng)頁(yè)的數(shù)據(jù)。在步驟202，數(shù)字電視接收終端獲取網(wǎng)頁(yè)數(shù)據(jù)，加載在下層窗口。同時(shí)，在上層窗口 中加載固定的全屏透明網(wǎng)頁(yè)。數(shù)字電視接收終端顯示網(wǎng)頁(yè)數(shù)據(jù)的同時(shí)，保存排版信息。更進(jìn)一步的，加載的全屏透明網(wǎng)頁(yè)可以采用超文本標(biāo)記語(yǔ)言5.0(HTML，Hyper Text Mark-up Language 5.0)的新特性canvas屬性，創(chuàng)建一個(gè)畫布。同時(shí)將上層窗口中 的網(wǎng)頁(yè)做成全屏透明的，這樣在該網(wǎng)頁(yè)上繪制焦點(diǎn)的特效就不會(huì)影響實(shí)際瀏覽的網(wǎng)頁(yè)。更為具體的，canvas有一個(gè)基于程序語(yǔ)言JavaScript的繪圖應(yīng)用程序編程接口 (API, Application Programming Interface)。canvas 是為了客戶端矢量圖形而設(shè)計(jì)的，本 身并沒有動(dòng)作執(zhí)行能力，但卻提供了網(wǎng)頁(yè)與客戶端JavaScript之間的繪圖API，用戶可以 調(diào)用這些API方便的實(shí)現(xiàn)各種特效。例如其中有一個(gè)API :rotate，就可以實(shí)現(xiàn)旋轉(zhuǎn)特效。 網(wǎng)頁(yè)開發(fā)人員只需要調(diào)用這一個(gè)API即可，而不需要編寫復(fù)雜的JavaScript來實(shí)現(xiàn)這個(gè)特 效。在步驟203，獲取下層窗口中網(wǎng)頁(yè)的排版信息，確定當(dāng)前焦點(diǎn)元素位置。更為具體的，數(shù)字電視接收終端獲取在步驟202中保存的排版信息，根據(jù)該排版 信息，獲取當(dāng)前焦點(diǎn)元素位置。在本發(fā)明實(shí)施例中，焦點(diǎn)元素位置包括焦點(diǎn)元素的初始坐 標(biāo)、以及寬度和高度。在步驟204，根據(jù)下層窗口中當(dāng)前焦點(diǎn)元素的初始坐標(biāo)以及寬度、高度，在上層窗 口中確定與其大小一致、完全重合的特效繪制區(qū)域。如圖3a、3b所示，若下層窗口顯示的內(nèi) 容如圖3a所示，當(dāng)前的焦點(diǎn)元素為“主頁(yè)”處，則在上層窗口中確定的特效繪制區(qū)域如圖3b 中的虛線所示，當(dāng)然，在實(shí)際應(yīng)用中，并不存在該虛線。
在步驟205，在特效繪制區(qū)域內(nèi)進(jìn)行特效繪制，顯示完成特效繪制后的網(wǎng)頁(yè)。所述 特效繪制包括在所述特效繪制區(qū)域內(nèi)著色或添加動(dòng)畫。更為具體的，數(shù)字電視接收終端通過JavaScript程序調(diào)用canvas中的API，在所 述特效繪制區(qū)域內(nèi)進(jìn)行特效繪制。更進(jìn)一步的，若下層窗口顯示的內(nèi)容如圖3a所示，上層窗口中確定的特效繪制區(qū) 域如圖3b中的虛線所示，則經(jīng)步驟205著色(也可以是添加動(dòng)畫或其它特效處理，為方便 理解，本實(shí)施例以進(jìn)行著色處理為例)后，上層窗口的顯示效果如圖3c所示，而上層窗口與 下層窗口重合在一起，用戶看到的效果如圖3d所示。通過上述處理后，用戶可以清楚的看到當(dāng)前的焦點(diǎn)元素，同時(shí)，本實(shí)施例提供的方 法，數(shù)字電視接收終端除了獲取網(wǎng)頁(yè)數(shù)據(jù)，顯示焦點(diǎn)元素的過程均在本地處理，數(shù)字電視接 收終端與前端設(shè)備沒有交互，既加快了處理的速度，又較少的前端設(shè)備的負(fù)荷，同時(shí)防止網(wǎng) 絡(luò)環(huán)境差時(shí)出現(xiàn)焦點(diǎn)異常問題。優(yōu)選的，本實(shí)施例提供的焦點(diǎn)元素顯示方法還包括對(duì)當(dāng)前焦點(diǎn)元素的切換流程， 具體如下在步驟206，接收用戶接收焦點(diǎn)元素切換指令。所述焦點(diǎn)元素切換指令為數(shù)字電視 接收終端用戶通過遙控器或直接在數(shù)字電視接收終端上進(jìn)行操作發(fā)出的。在步驟207，根據(jù)下層窗口的排版信息，確定切換后的焦點(diǎn)元素位置，包括焦點(diǎn) 元素的初始坐標(biāo)、以及寬度和高度。在步驟208，調(diào)整上層窗口網(wǎng)頁(yè)中的特效繪制區(qū)域，使所述特效繪制區(qū)域與下層窗 口中切換后的焦點(diǎn)元素位置重合，顯示完成特效繪制區(qū)域調(diào)整后的網(wǎng)頁(yè)。更為具體的，數(shù)字 電視接收終端調(diào)整上層窗口網(wǎng)頁(yè)中的特效繪制區(qū)域的方式包括對(duì)上層窗口中的網(wǎng)頁(yè)中的 特效繪制區(qū)域進(jìn)行平移、拉伸、縮放、旋轉(zhuǎn)等，最終使上層窗口中的網(wǎng)頁(yè)上已經(jīng)著色的特效 繪制區(qū)域，與下層窗口中的切換后的焦點(diǎn)元素完全重合，使切換后的焦點(diǎn)元素得到突出的 顯不。更進(jìn)一步的，因?yàn)樯蠈哟翱谥械耐该骶W(wǎng)頁(yè)主要采用html5. 0標(biāo)準(zhǔn)的canvas屬性。 所以，在本步驟中，網(wǎng)頁(yè)開發(fā)人員可以利用例如canvas的rotate方法做旋轉(zhuǎn)特效，利用 canvas的drawlmage方法畫圖等等，這樣既可以在焦點(diǎn)元素的切換過程中實(shí)現(xiàn)2D的動(dòng)畫效 果，又不需要通過復(fù)雜的網(wǎng)頁(yè)JavaScript腳本語(yǔ)言控制。實(shí)施本發(fā)明實(shí)施例提供的焦點(diǎn)元素顯示方法，首先是在用戶瀏覽網(wǎng)頁(yè)前，建立與 用戶瀏覽的網(wǎng)頁(yè)重合的透明網(wǎng)頁(yè)，在透明的網(wǎng)頁(yè)上進(jìn)行特效繪制，顯示當(dāng)前的焦點(diǎn)元素，使 用戶瀏覽網(wǎng)頁(yè)時(shí)，數(shù)字電視接收終端無需與前端設(shè)備交互，加快解析速度，也解決網(wǎng)絡(luò)環(huán)境 差時(shí)的焦點(diǎn)異常問題，減少前端設(shè)備的下載負(fù)荷。同時(shí)，實(shí)施本發(fā)明實(shí)施例提供的焦點(diǎn)元素 顯示方法，在焦點(diǎn)元素的切換過程中，支持在上層窗口實(shí)現(xiàn)對(duì)特效繪制區(qū)域的平移、拉伸、 縮放、旋轉(zhuǎn)，實(shí)現(xiàn)2D的動(dòng)畫效果，使用戶的視覺感官更佳，同時(shí)解決網(wǎng)頁(yè)因?qū)崿F(xiàn)復(fù)雜的動(dòng)畫 效果帶來的性能問題，減少網(wǎng)頁(yè)的復(fù)雜度，減輕網(wǎng)頁(yè)開發(fā)人員的工作量。參見圖4，為本發(fā)明提供的焦點(diǎn)元素顯示裝置第一實(shí)施例結(jié)構(gòu)示意圖，本裝置可應(yīng) 用于數(shù)字電視接收終端中，如圖4所示，該裝置包括創(chuàng)建模塊1，用于創(chuàng)建至少兩個(gè)重合的網(wǎng)頁(yè)窗口，在下層窗口加載用戶選定的網(wǎng)頁(yè) 內(nèi)容，在上層窗口加載透明網(wǎng)頁(yè)。
焦點(diǎn)定位模塊2，用于獲取所述下層窗口的排版信息，確定當(dāng)前焦點(diǎn)元素位置，即 當(dāng)前可選擇的鏈接所在的位置。特效繪制模塊3，用于根據(jù)所述當(dāng)前焦點(diǎn)元素位置，在所述上層窗口的對(duì)應(yīng)位置進(jìn) 行特效繪制。網(wǎng)頁(yè)顯示模塊4，用于顯示完成特效繪制后的網(wǎng)頁(yè)。實(shí)施本發(fā)明提供的焦點(diǎn)元素顯示裝置，在用戶瀏覽的網(wǎng)頁(yè)前，再建立一個(gè)透明的 網(wǎng)頁(yè)，在透明的網(wǎng)頁(yè)上進(jìn)行特效繪制，顯示當(dāng)前的焦點(diǎn)元素，使用戶瀏覽網(wǎng)頁(yè)時(shí)，終端無需 與前端設(shè)備交互，加快解析速度。同時(shí)也解決網(wǎng)絡(luò)環(huán)境差時(shí)的焦點(diǎn)異常問題，減少前端設(shè)備 的下載負(fù)荷。參見圖5，為本發(fā)明提供的焦點(diǎn)元素顯示裝置第二實(shí)施例結(jié)構(gòu)示意圖，本裝置可應(yīng) 用于數(shù)字電視接收終端中。在本實(shí)施例中，將更為詳細(xì)的描述該焦點(diǎn)元素顯示裝置的具體結(jié)構(gòu)和各模塊的功 能。如圖5所示，該裝置包括創(chuàng)建模塊1，用于創(chuàng)建兩個(gè)重合的網(wǎng)頁(yè)窗口，在下層窗口加載用戶選定的網(wǎng)頁(yè)內(nèi) 容，在上層窗口加載透明網(wǎng)頁(yè)。更為具體的，創(chuàng)建模塊1包括窗口創(chuàng)建單元11，用于創(chuàng)建至少兩個(gè)大小一致且完全重合的網(wǎng)頁(yè)窗口。更為具體的，當(dāng)用戶通過操作確認(rèn)需要瀏覽一個(gè)網(wǎng)頁(yè)時(shí)，窗口創(chuàng)建單元11打開一 個(gè)網(wǎng)頁(yè)窗口用于加載用戶選擇的網(wǎng)頁(yè)，同時(shí)窗口創(chuàng)建單元11默認(rèn)打開另一個(gè)與前述窗口 大小相同，且完全重合的網(wǎng)頁(yè)窗口。在本發(fā)明實(shí)施例中，位于下層的網(wǎng)頁(yè)窗口我們稱為下層 窗口，與下層窗口大小一致，且完全覆蓋在所述下層窗口上的網(wǎng)頁(yè)窗口為上層窗口。下層窗口加載單元12，用于根據(jù)用戶請(qǐng)求，向前端設(shè)備獲取網(wǎng)頁(yè)數(shù)據(jù)，并將獲取的 網(wǎng)頁(yè)數(shù)據(jù)進(jìn)行排版后，加載在窗口創(chuàng)建單元11創(chuàng)建的下層窗口中。下層窗口顯示單元12 顯示網(wǎng)頁(yè)數(shù)據(jù)的同時(shí)，保存排版信息。上層窗口加載單元13，用于在所述窗口創(chuàng)建單元?jiǎng)?chuàng)建的上層窗口中加載固定的全 屏透明網(wǎng)頁(yè)。更進(jìn)一步的，層窗口加載單元13加載的全屏透明網(wǎng)頁(yè)可以采用超文本標(biāo)記語(yǔ) 言HTML5. 0的canvas屬性創(chuàng)建一個(gè)畫布。這樣在該網(wǎng)頁(yè)上繪制焦點(diǎn)的特效就不會(huì)影響實(shí) 際瀏覽的網(wǎng)頁(yè)。更為具體的，canvas是為了客戶端矢量圖形而設(shè)計(jì)的，本身并沒有動(dòng)作執(zhí)行能力， 但卻提供了網(wǎng)頁(yè)與客戶端JavaScript之間的繪圖API，用戶可以調(diào)用這些API方便的實(shí)現(xiàn) 各種特效，把想繪制的東西都繪制到網(wǎng)頁(yè)上。焦點(diǎn)定位模塊2，用于獲取所述下層窗口的排版信息，確定當(dāng)前焦點(diǎn)元素位置。焦 點(diǎn)定位模塊2根據(jù)下層窗口顯示單元12中保存的排版信息，獲取當(dāng)前焦點(diǎn)元素位置，包括 焦點(diǎn)元素的初始坐標(biāo)、以及寬度和高度。特效繪制模塊3，用于根據(jù)所述當(dāng)前焦點(diǎn)元素位置，在所述上層窗口的對(duì)應(yīng)位置進(jìn) 行特效繪制。該特效繪制模塊3包括區(qū)域定位單元31，用于根據(jù)下層窗口中當(dāng)前焦點(diǎn)元素的初始坐標(biāo)以及寬度、高度， 在上層窗口中確定與其重合的特效繪制區(qū)域。更為具體的，根據(jù)下層窗口中當(dāng)前焦點(diǎn)元素的初始坐標(biāo)以及寬度、高度，在上層窗口中確定與其大小一致、完全重合的特效繪制區(qū)域。 如圖3a、3b所示，若下層窗口顯示的內(nèi)容如圖3a所示，當(dāng)前的焦點(diǎn)元素為“主頁(yè)”處，則在 上層窗口中確定的特效繪制區(qū)域如圖3b中的虛線所示，當(dāng)然，在實(shí)際應(yīng)用中，并不存在該 虛線。特效繪制單元32，用于在所述區(qū)域定位單元確定的特效繪制區(qū)域內(nèi)進(jìn)行特效繪 制；所述特效繪制包括在所述特效繪制區(qū)域內(nèi)著色或添加動(dòng)畫。更為具體的，數(shù)字電視接 收終端通過JavaScript程序調(diào)用canvas中的API，在所述特效繪制區(qū)域內(nèi)進(jìn)行特效繪制。更進(jìn)一步的，若下層窗口顯示的內(nèi)容如圖3a所示，上層窗口中確定的特效繪制區(qū) 域如圖3b中的虛線所示，則經(jīng)特效繪制單元32著色(也可以是添加動(dòng)畫或其它特效處理， 為方便理解，本實(shí)施例以進(jìn)行著色處理為例)后，上層窗口的顯示效果如圖3c所示，而上層 窗口與下層窗口重合在一起，用戶看到的效果如圖3d所示。網(wǎng)頁(yè)顯示模塊4，用于顯示完成特效繪制后的網(wǎng)頁(yè)。通過上述各模塊處理后，用戶 在網(wǎng)頁(yè)顯示模塊4中可以清楚的看到當(dāng)前的焦點(diǎn)元素，同時(shí)，本實(shí)施例提供的焦點(diǎn)元素顯 示裝置除了獲取網(wǎng)頁(yè)數(shù)據(jù)，顯示焦點(diǎn)元素的過程均在本地處理，使數(shù)字電視接收終端與前 端設(shè)備沒有交互，既加快了處理的速度，又較少的前端設(shè)備的負(fù)荷，同時(shí)防止網(wǎng)絡(luò)環(huán)境差時(shí) 出現(xiàn)焦點(diǎn)異常問題。優(yōu)選的，本實(shí)施例提供的焦點(diǎn)元素顯示裝置在用戶切換焦點(diǎn)元素時(shí)，也可以通過 動(dòng)畫的方式，將繪制的特效從當(dāng)前焦點(diǎn)元素切換到用戶選擇的焦點(diǎn)元素。其具體實(shí)施為所述焦點(diǎn)定位模塊2進(jìn)一步包括初始定位單元21，用于獲取下層窗口的排版信息，確定當(dāng)前焦點(diǎn)元素位置。切換定位單元22，用于接收焦點(diǎn)元素切換指令，獲取切換后的焦點(diǎn)元素位置，包 括焦點(diǎn)元素的初始坐標(biāo)、以及寬度和高度。所述焦點(diǎn)元素切換指令為數(shù)字電視接收終端用 戶通過遙控器或直接在數(shù)字電視接收終端上進(jìn)行操作發(fā)出的。同時(shí)，特效繪制模塊3還包括上層窗口管理單元33，用于調(diào)整上層窗口中的網(wǎng)頁(yè)的特效繪制區(qū)域，使特效繪制 區(qū)域與下層窗口中切換后的焦點(diǎn)元素位置重合；所述調(diào)整方式包括對(duì)上層窗口中的網(wǎng)頁(yè) 進(jìn)行平移、拉伸、縮放、旋轉(zhuǎn)。更為具體的，上層窗口管理單元33根據(jù)切換定位單元22獲取的切換后的焦點(diǎn)元 素位置，在上層窗口中確定對(duì)應(yīng)位置。然后上層窗口管理單元33調(diào)整上層窗口網(wǎng)頁(yè)中的特 效繪制區(qū)域，包括進(jìn)行平移、拉伸、縮放、旋轉(zhuǎn)等，最終使上層窗口中的網(wǎng)頁(yè)上已經(jīng)著色的特 效繪制區(qū)域移動(dòng)到所述對(duì)應(yīng)位置，與下層窗口中的切換后的焦點(diǎn)元素完全重合，使切換后 的焦點(diǎn)元素得到突出的顯示。 更進(jìn)一步的，因?yàn)樯蠈哟翱谥械耐该骶W(wǎng)頁(yè)主要采用html5. 0標(biāo)準(zhǔn)的canvas屬性。 所以，上層窗口管理單元33可以利用例如canvas的rotate方法做旋轉(zhuǎn)特效，利用canvas 的drawlmage方法等等進(jìn)行畫圖，這樣既可以在焦點(diǎn)元素的切換過程中實(shí)現(xiàn)2D的動(dòng)畫效 果，又不需要通過復(fù)雜的網(wǎng)頁(yè)JavaScript腳本語(yǔ)言控制。 實(shí)施本發(fā)明實(shí)施例提供的焦點(diǎn)元素顯示裝置，首先是在用戶瀏覽網(wǎng)頁(yè)前，建立與 用戶瀏覽網(wǎng)頁(yè)重合的透明網(wǎng)頁(yè)，在透明的網(wǎng)頁(yè)上進(jìn)行特效繪制，顯示當(dāng)前的焦點(diǎn)元素，使用 戶瀏覽網(wǎng)頁(yè)時(shí)，終端無需與前端設(shè)備交互，加快解析速度，也解決網(wǎng)絡(luò)環(huán)境差時(shí)的焦點(diǎn)異常問題，減少前端設(shè)備的下載負(fù)荷。同時(shí)，實(shí)施本發(fā)明實(shí)施例提供的數(shù)字電視接收終端，在焦 點(diǎn)元素的切換過程中，支持在上層窗口實(shí)現(xiàn)對(duì)特效繪制區(qū)域的平移、拉伸、縮放、旋轉(zhuǎn)等，實(shí) 現(xiàn)2D的動(dòng)畫效果，使用戶的視覺感官更佳，同時(shí)解決網(wǎng)頁(yè)因?qū)崿F(xiàn)復(fù)雜的動(dòng)畫效果帶來的性 能問題，減少網(wǎng)頁(yè)的復(fù)雜度，減輕網(wǎng)頁(yè)開發(fā)人員的工作量。本發(fā)明的數(shù)字電視接收終端包括但不限于機(jī)頂盒、網(wǎng)絡(luò)協(xié)議電視 (InternetProtocol Television, IPTV)、數(shù)字電視一體機(jī)、電視手機(jī)等具有接收數(shù)字電視 功能的終端。以上所揭露的僅為本發(fā)明一種較佳實(shí)施例而已，當(dāng)然不能以此來限定本發(fā)明之權(quán) 利范圍，因此依本發(fā)明權(quán)利要求所作的等同變化，仍屬本發(fā)明所涵蓋的范圍。通過以上的實(shí)施方式的描述，本領(lǐng)域的技術(shù)人員可以清楚地了解到本發(fā)明可借助 軟件加必需的硬件平臺(tái)的方式來實(shí)現(xiàn)，當(dāng)然也可以全部通過硬件來實(shí)施?；谶@樣的理解， 本發(fā)明的技術(shù)方案對(duì)背景技術(shù)做出貢獻(xiàn)的全部或者部分可以以軟件產(chǎn)品的形式體現(xiàn)出來， 該計(jì)算機(jī)軟件產(chǎn)品可以存儲(chǔ)在存儲(chǔ)介質(zhì)中，如ROM/RAM、磁碟、光盤等，包括若干指令用以使 得一臺(tái)計(jì)算機(jī)設(shè)備(可以是個(gè)人計(jì)算機(jī)，服務(wù)器，或者網(wǎng)絡(luò)設(shè)備等)執(zhí)行本發(fā)明各個(gè)實(shí)施例 或者實(shí)施例的某些部分所述的方法。
權(quán)利要求
一種焦點(diǎn)元素顯示方法，其特征在于，包括創(chuàng)建兩個(gè)重合的網(wǎng)頁(yè)窗口，在下層窗口加載用戶選定的網(wǎng)頁(yè)內(nèi)容，在上層窗口加載透明網(wǎng)頁(yè)；獲取所述下層窗口的排版信息，確定當(dāng)前焦點(diǎn)元素位置；根據(jù)所述當(dāng)前焦點(diǎn)元素位置，在所述上層窗口的對(duì)應(yīng)位置進(jìn)行特效繪制；顯示完成特效繪制后的網(wǎng)頁(yè)。
2.如權(quán)利要求1所述的焦點(diǎn)元素顯示方法，其特征在于，所述創(chuàng)建兩個(gè)重合的網(wǎng)頁(yè)窗 口，在下層窗口加載用戶選定的網(wǎng)頁(yè)內(nèi)容，在上層窗口加載透明網(wǎng)頁(yè)包括創(chuàng)建兩個(gè)大小一致且完全重合的網(wǎng)頁(yè)窗口 ；根據(jù)用戶請(qǐng)求，向前端設(shè)備獲取網(wǎng)頁(yè)數(shù)據(jù)，加載在下層窗口 ；在上層窗口加載固定的全屏透明網(wǎng)頁(yè)。
3.如權(quán)利要求2所述的焦點(diǎn)元素顯示方法，其特征在于，所述當(dāng)前焦點(diǎn)元素位置包括 當(dāng)前焦點(diǎn)元素的初始坐標(biāo)以及寬度、高度，以及下一個(gè)焦點(diǎn)的初始坐標(biāo)以及寬度、高度。
4.如權(quán)利要求3所述的焦點(diǎn)元素顯示方法，其特征在于，所述根據(jù)所述當(dāng)前焦點(diǎn)元素 位置，在所述上層窗口的對(duì)應(yīng)位置進(jìn)行特效繪制，包括根據(jù)下層窗口中當(dāng)前焦點(diǎn)和下一個(gè)焦點(diǎn)元素的初始坐標(biāo)以及寬度、高度，在上層窗口 中確定與其重合的特效繪制區(qū)域；在所述特效繪制區(qū)域內(nèi)進(jìn)行特效繪制。
5.如權(quán)利要求4所述的焦點(diǎn)元素顯示方法，其特征在于，在所述特效繪制區(qū)域內(nèi)進(jìn)行 特效繪制之后還包括接收焦點(diǎn)元素切換指令，獲取切換后的焦點(diǎn)元素位置；調(diào)整上層窗口網(wǎng)頁(yè)上的特效繪制區(qū)域，使所述特效繪制區(qū)域與下層窗口中切換后的焦 點(diǎn)元素位置重合。
6.如權(quán)利要求5所述的焦點(diǎn)元素顯示方法，其特征在于，所述調(diào)整上層窗口網(wǎng)頁(yè)上的 特效繪制區(qū)域包括對(duì)上層窗口網(wǎng)頁(yè)上的特效繪制區(qū)域進(jìn)行平移、拉伸、縮放、旋轉(zhuǎn)。
7.一種焦點(diǎn)元素顯示裝置，其特征在于，包括創(chuàng)建模塊，用于創(chuàng)建兩個(gè)重合的網(wǎng)頁(yè)窗口，在下層窗口加載用戶選定的網(wǎng)頁(yè)內(nèi)容，在上 層窗口加載透明網(wǎng)頁(yè)；焦點(diǎn)定位模塊，用于獲取所述下層窗口中網(wǎng)頁(yè)的排版信息，確定當(dāng)前焦點(diǎn)元素位置； 特效繪制模塊，用于根據(jù)所述當(dāng)前焦點(diǎn)元素或者下一個(gè)焦點(diǎn)元素位置，在所述上層窗 口的對(duì)應(yīng)位置進(jìn)行特效繪制；網(wǎng)頁(yè)顯示模塊，用于顯示完成特效繪制后的網(wǎng)頁(yè)。
8.如權(quán)利要求7所述的焦點(diǎn)元素顯示裝置，其特征在于，所述創(chuàng)建模塊包括 窗口創(chuàng)建單元，用于創(chuàng)建兩個(gè)大小一致且完全重合的網(wǎng)頁(yè)窗口 ；下層窗口加載單元，用于根據(jù)用戶請(qǐng)求，向前端設(shè)備獲取網(wǎng)頁(yè)數(shù)據(jù)，加載在所述窗口創(chuàng) 建單元?jiǎng)?chuàng)建的下層窗口中；上層窗口加載單元，用于在所述窗口創(chuàng)建單元?jiǎng)?chuàng)建的上層窗口中加載固定的全屏透明 網(wǎng)頁(yè)。
9.如權(quán)利要求8所述的焦點(diǎn)元素顯示裝置，其特征在于，所述焦點(diǎn)定位模塊確定的當(dāng)前焦點(diǎn)元素位置包括當(dāng)前焦點(diǎn)元素的初始坐標(biāo)以及寬度、高度。
10.如權(quán)利要求9所述的焦點(diǎn)元素顯示裝置，其特征在于，所述特效繪制模塊包括 區(qū)域定位單元，用于根據(jù)下層窗口中當(dāng)前焦點(diǎn)元素的初始坐標(biāo)以及寬度、高度，在上層窗口中確定與其重合的特效繪制區(qū)域；特效繪制單元，用于在所述區(qū)域定位單元確定的特效繪制區(qū)域內(nèi)進(jìn)行特效繪制。
11.如權(quán)利要求10所述的焦點(diǎn)元素顯示裝置，其特征在于，所述焦點(diǎn)定位模塊包括 初始定位單元，用于獲取下層窗口的排版信息，確定當(dāng)前焦點(diǎn)元素位置；切換定位單元，用于接收焦點(diǎn)元素切換指令，獲取切換后的焦點(diǎn)元素位置。
12.如權(quán)利要求11所述的焦點(diǎn)元素顯示裝置，其特征在于，所述特效繪制模塊還包括 上層窗口管理單元，用于調(diào)整上層窗口網(wǎng)頁(yè)中的特效繪制區(qū)域，使所述特效繪制區(qū)域與下層窗口中切換后的焦點(diǎn)元素位置重合；所述調(diào)整方式包括對(duì)上層窗口網(wǎng)頁(yè)中的特效 繪制區(qū)域進(jìn)行平移、拉伸、縮放、旋轉(zhuǎn)。
13.一種數(shù)字電視接收終端，其特征在于，包括如權(quán)利要求7至12任一項(xiàng)所述的焦點(diǎn)元 素顯示裝置。
全文摘要
本發(fā)明提供一種焦點(diǎn)元素顯示方法、裝置及數(shù)字電視接收終端，該方法包括創(chuàng)建兩個(gè)重合的網(wǎng)頁(yè)窗口，在下層窗口加載用戶選定的網(wǎng)頁(yè)內(nèi)容，在上層窗口加載透明網(wǎng)頁(yè)；獲取所述下層窗口的排版信息，確定當(dāng)前焦點(diǎn)元素位置；根據(jù)所述當(dāng)前焦點(diǎn)元素位置，在所述上層窗口的對(duì)應(yīng)位置進(jìn)行特效繪制；顯示完成特效繪制后的網(wǎng)頁(yè)。本發(fā)明提供的焦點(diǎn)元素顯示方法、裝置及數(shù)字電視接收終端，使用戶瀏覽網(wǎng)頁(yè)時(shí)，終端無需與前端設(shè)備交互，加快解析速度，實(shí)現(xiàn)焦點(diǎn)切換的動(dòng)畫效果。同時(shí)也解決網(wǎng)絡(luò)環(huán)境差時(shí)的焦點(diǎn)異常問題，減少前端設(shè)備的下載負(fù)荷。
文檔編號(hào)H04N7/173GK101882432SQ20101916403
公開日2010年11月10日 申請(qǐng)日期2010年2月1日 優(yōu)先權(quán)日2010年2月1日
發(fā)明者劉漢軍 申請(qǐng)人:深圳市同洲電子股份有限公司