一種焦點(diǎn)框繪制方法、系統(tǒng)及觸控設(shè)備的制作方法
【專利摘要】本發(fā)明適用于互聯(lián)網(wǎng)【技術(shù)領(lǐng)域】，提供了一種焦點(diǎn)框繪制方法、系統(tǒng)及觸控設(shè)備，所述焦點(diǎn)框繪制方法包括以下步驟：接收觸控事件并創(chuàng)建獨(dú)立的焦點(diǎn)框遮罩；若觸控點(diǎn)存在需要焦點(diǎn)框的對(duì)象，則將所需焦點(diǎn)框繪制在所述獨(dú)立的焦點(diǎn)框遮罩上，以此響應(yīng)所述觸控事件。本發(fā)明將焦點(diǎn)框繪制在獨(dú)立的焦點(diǎn)框遮罩上，這樣在繪制焦點(diǎn)框時(shí)不需要重新繪制頁(yè)面內(nèi)容，節(jié)省了系統(tǒng)開(kāi)銷，并且繪制的響應(yīng)速度非?？?，效率極高。
【專利說(shuō)明】一種焦點(diǎn)框繪制方法、系統(tǒng)及觸控設(shè)備
【技術(shù)領(lǐng)域】
[0001]本發(fā)明屬于互聯(lián)網(wǎng)【技術(shù)領(lǐng)域】，尤其涉及一種焦點(diǎn)框繪制方法、系統(tǒng)及觸控設(shè)備。
【背景技術(shù)】
[0002]在用戶點(diǎn)擊網(wǎng)頁(yè)鏈接的時(shí)候，瀏覽器需要給出一個(gè)點(diǎn)擊的反饋(即焦點(diǎn)框)。為了實(shí)現(xiàn)這種功能，通常的做法是當(dāng)獲取用戶觸控事件后，判斷當(dāng)前Render樹(shù)(每個(gè)網(wǎng)頁(yè)中可渲染的元素稱為Render，一個(gè)HTML頁(yè)面排版后生成對(duì)應(yīng)的Render樹(shù))中是否包含一個(gè)在觸摸點(diǎn)坐標(biāo)上的可以響應(yīng)點(diǎn)擊事件的Render。如果包含這樣的Render,則給該Render設(shè)置一個(gè)特殊的屬性并重繪當(dāng)前屏幕。在繪制遍歷的過(guò)程中，如果遇到有焦點(diǎn)框?qū)傩缘腞ender，則給該Render繪制一個(gè)焦點(diǎn)框。
[0003]上述技術(shù)方案的缺點(diǎn)是焦點(diǎn)框必須和網(wǎng)頁(yè)內(nèi)容一起繪制到屏幕上，由于網(wǎng)頁(yè)內(nèi)容比較多，受系統(tǒng)渲染速度的限制，繪制一屏需要一定的時(shí)間，這樣給用戶帶來(lái)觸摸后出現(xiàn)焦點(diǎn)框的時(shí)機(jī)有一個(gè)明顯的延遲的感覺(jué)，響應(yīng)速度慢。

【發(fā)明內(nèi)容】

[0004]本發(fā)明實(shí)施例的目的在于提供一種焦點(diǎn)框繪制方法，旨在解決現(xiàn)有焦點(diǎn)框繪制效率低的問(wèn)題。
[0005]本發(fā)明實(shí)施例是這樣實(shí)現(xiàn)的，一種焦點(diǎn)框繪制方法，包括以下步驟:
[0006]接收觸控事件并創(chuàng)建獨(dú)立的焦點(diǎn)框遮罩；
[0007]若觸控點(diǎn)存在需要焦點(diǎn)框的對(duì)象，則將所需焦點(diǎn)框繪制在所述獨(dú)立的焦點(diǎn)框遮罩上。
[0008]本發(fā)明實(shí)施例的目的還在于提供一種焦點(diǎn)框繪制系統(tǒng)，所述系統(tǒng)包括:
[0009]接收創(chuàng)建模塊，用于接收觸控事件并創(chuàng)建獨(dú)立的焦點(diǎn)框遮罩；
[0010]判斷繪制模塊，用于判斷觸控點(diǎn)是否存在需要焦點(diǎn)框的對(duì)象，若存在，則將所需焦點(diǎn)框繪制在所述獨(dú)立的焦點(diǎn)框遮罩上。
[0011]本發(fā)明實(shí)施例的另一目的在于提供一種觸控設(shè)備，包括觸控屏，所述觸控設(shè)備采用上述焦點(diǎn)框繪制系統(tǒng)。
[0012]相對(duì)于現(xiàn)有技術(shù)，本發(fā)明實(shí)施例提供的焦點(diǎn)框繪制方法及系統(tǒng)通過(guò)將焦點(diǎn)框繪制在獨(dú)立的焦點(diǎn)框遮罩上，可以使得繪制焦點(diǎn)框時(shí)無(wú)需重新繪制頁(yè)面內(nèi)容，從而節(jié)省系統(tǒng)開(kāi)銷，并可相應(yīng)提高繪制的響應(yīng)速度，效率極高。
【專利附圖】

【附圖說(shuō)明】
[0013]圖1是本發(fā)明實(shí)施例一提供的焦點(diǎn)框繪制方法的實(shí)現(xiàn)流程圖；
[0014]圖2是圖1所不方法優(yōu)化流程圖；
[0015]圖3是本發(fā)明實(shí)施例二提供的焦點(diǎn)框繪制系統(tǒng)的結(jié)構(gòu)示意圖?！揪唧w實(shí)施方式】
[0016]為了使本發(fā)明的目的、技術(shù)方案及優(yōu)點(diǎn)更加清楚明白，以下結(jié)合附圖及實(shí)施例，對(duì)本發(fā)明進(jìn)行進(jìn)一步詳細(xì)說(shuō)明。應(yīng)當(dāng)理解，此處所描述的具體實(shí)施例僅僅用以解釋本發(fā)明，并不用于限定本發(fā)明。
[0017]本發(fā)明實(shí)施例將焦點(diǎn)框繪制在獨(dú)立的焦點(diǎn)框遮罩上，這樣在繪制焦點(diǎn)框時(shí)不需要重新繪制頁(yè)面內(nèi)容，節(jié)省了系統(tǒng)開(kāi)銷，并且繪制的響應(yīng)速度非常快，繪制效率極高。
[0018]下面以無(wú)線瀏覽器提供的瀏覽頁(yè)面為例對(duì)本發(fā)明的實(shí)現(xiàn)進(jìn)行詳細(xì)描述。
[0019]實(shí)施例一
[0020]圖1示出了本發(fā)明實(shí)施例提供的焦點(diǎn)框繪制方法的實(shí)現(xiàn)流程，詳述如下。
[0021]在步驟SlOl中，接收觸控事件并創(chuàng)建獨(dú)立的焦點(diǎn)框遮罩；
[0022]本發(fā)明實(shí)施例先接收用戶觸控事件，如由用戶點(diǎn)擊的網(wǎng)頁(yè)鏈接，其可以是文本鏈接、圖片鏈接，還可以是控件。其中，所述觸控事件可以是觸摸事件，也可以是點(diǎn)擊事件。接著，創(chuàng)建獨(dú)立的焦點(diǎn)框遮罩，該獨(dú)立的焦點(diǎn)框遮罩不包含任何網(wǎng)頁(yè)內(nèi)容。
[0023]作為優(yōu)選，所述獨(dú)立的焦點(diǎn)框遮罩為透明，其尺寸略大于屏幕的尺寸，且由各終端操作系統(tǒng)循環(huán)回收利用，如此有效地節(jié)約了內(nèi)存占用。通常，將所述獨(dú)立的焦點(diǎn)框遮罩創(chuàng)建于頁(yè)面視圖上方，以便察看。
[0024]另外，接收觸控事件后，若當(dāng)前存在焦點(diǎn)框遮罩，則先移除當(dāng)前存在的焦點(diǎn)框遮罩，再創(chuàng)建所述獨(dú)立的焦點(diǎn)框遮罩，使系統(tǒng)僅具有一個(gè)焦點(diǎn)框遮罩，避免發(fā)生混淆，如圖2所示。例如，用戶已經(jīng)選中了控件A使其處于焦點(diǎn)狀態(tài)，此時(shí)存在一個(gè)焦點(diǎn)框遮罩，該焦點(diǎn)框遮罩上繪制有控件A的焦點(diǎn)框。當(dāng)用戶點(diǎn)擊鏈接B時(shí)，需移除當(dāng)前存在的焦點(diǎn)框遮罩(SP控件A的焦點(diǎn)框遮罩)使控件A的焦點(diǎn)框快速消失，然后根據(jù)所點(diǎn)擊鏈接B的屬性創(chuàng)建新的獨(dú)立的焦點(diǎn)框遮罩，并在該新的獨(dú)立的焦點(diǎn)框遮罩上繪制鏈接B的焦點(diǎn)框。
[0025]在步驟S102中，若觸控點(diǎn)存在需要焦點(diǎn)框的對(duì)象，則將所需焦點(diǎn)框繪制在所述獨(dú)立的焦點(diǎn)框遮罩上，以此響應(yīng)所述觸控事件。
[0026]本發(fā)明實(shí)施例中所述觸控點(diǎn)由點(diǎn)擊坐標(biāo)進(jìn)行界定，如用戶點(diǎn)擊(150，200)這個(gè)區(qū)域，通過(guò)遍歷Render樹(shù)獲取在這個(gè)區(qū)域需要焦點(diǎn)框的對(duì)象(Render)。應(yīng)當(dāng)理解,所述觸控點(diǎn)為觸摸事件發(fā)生處或點(diǎn)擊事件發(fā)生處。此處需要焦點(diǎn)框的對(duì)象(Render)可以是圖片，也可以是文本。應(yīng)當(dāng)注意的是，將所需焦點(diǎn)框繪制在所述獨(dú)立的焦點(diǎn)框遮罩時(shí)，最好根據(jù)所述對(duì)象的尺寸和形狀進(jìn)行繪制焦點(diǎn)框，以提升焦點(diǎn)框繪制效率。因而，本方法尤其適用于移動(dòng)互聯(lián)網(wǎng)瀏覽器。
[0027]作為本實(shí)施例另一實(shí)現(xiàn)流程，先接收觸控事件，若觸控點(diǎn)存在需要焦點(diǎn)框的對(duì)象，則創(chuàng)建獨(dú)立的焦點(diǎn)框遮罩；再將所需焦點(diǎn)框繪制在所述獨(dú)立的焦點(diǎn)框遮罩上，以此響應(yīng)所述觸控事件。
[0028]實(shí)施例二
[0029]與此相對(duì)應(yīng)地，本發(fā)明實(shí)施例提供的焦點(diǎn)框繪制系統(tǒng)包括接收創(chuàng)建模塊31和判斷繪制模塊32，如圖3所示。其中，先由接收創(chuàng)建模塊接收觸控事件并創(chuàng)建獨(dú)立的焦點(diǎn)框遮罩；再由判斷繪制模塊判斷觸控點(diǎn)是否存在需要焦點(diǎn)框的對(duì)象，若存在，則將所需焦點(diǎn)框繪制在所述獨(dú)立的焦點(diǎn)框遮罩上，以此響應(yīng)所述觸控事件。這樣在繪制焦點(diǎn)框時(shí)不需要重新繪制網(wǎng)頁(yè)內(nèi)容(包括所有文本和圖片)，節(jié)省了系統(tǒng)開(kāi)銷，并且繪制的響應(yīng)速度非?？?。[0030]作為優(yōu)選，所述系統(tǒng)還包括用于移除當(dāng)前存在的焦點(diǎn)框遮罩，以便創(chuàng)建獨(dú)立的焦點(diǎn)框遮罩的移除模塊。接收創(chuàng)建模塊接收觸控事件后，若系統(tǒng)當(dāng)前存在焦點(diǎn)框遮罩，則先由移除模塊移除當(dāng)前存在的焦點(diǎn)框遮罩，再由接收創(chuàng)建模塊創(chuàng)建所述獨(dú)立的焦點(diǎn)框遮罩，使系統(tǒng)僅具有一個(gè)焦點(diǎn)框遮罩，避免發(fā)生混淆，如圖2所示。例如，用戶已經(jīng)選中了控件A使其處于焦點(diǎn)狀態(tài)，此時(shí)存在一個(gè)焦點(diǎn)框遮罩，該焦點(diǎn)框遮罩上繪制有控件A的焦點(diǎn)框。當(dāng)用戶點(diǎn)擊鏈接B時(shí)，需移除當(dāng)前存在的焦點(diǎn)框遮罩(即控件A的焦點(diǎn)框遮罩)使控件A的焦點(diǎn)框快速消失，然后根據(jù)所點(diǎn)擊鏈接B的屬性創(chuàng)建新的獨(dú)立的焦點(diǎn)框遮罩，并在該新的獨(dú)立的焦點(diǎn)框遮罩上繪制鏈接B的焦點(diǎn)框。
[0031]為有效節(jié)約內(nèi)存占用，所述系統(tǒng)進(jìn)一步包括對(duì)獨(dú)立的焦點(diǎn)框遮罩循環(huán)回收利用的回收利用模塊。因而，本系統(tǒng)尤其適用于移動(dòng)互聯(lián)網(wǎng)瀏覽器。
[0032]實(shí)施例三
[0033]本發(fā)明實(shí)施例提供一種觸控設(shè)備，其包括觸控屏。所述觸控設(shè)備采用實(shí)施例二所述的焦點(diǎn)框繪制系統(tǒng)。
[0034]以上所述僅為本發(fā)明的較佳實(shí)施例而已，并不用以限制本發(fā)明，凡在本發(fā)明的精神和原則之內(nèi)所作的任何修改、等同替換和改進(jìn)等，均應(yīng)包含在本發(fā)明的保護(hù)范圍之內(nèi)。
【權(quán)利要求】
1.一種焦點(diǎn)框繪制方法，其特征在于，所述方法包括以下步驟: 接收觸控事件并創(chuàng)建獨(dú)立的焦點(diǎn)框遮罩； 若觸控點(diǎn)存在需要焦點(diǎn)框的對(duì)象，則將所需焦點(diǎn)框繪制在所述獨(dú)立的焦點(diǎn)框遮罩上。
2.如權(quán)利要求1所述的焦點(diǎn)框繪制方法，其特征在于，接收觸控事件后，若當(dāng)前存在焦點(diǎn)框遮罩，則先移除當(dāng)前存在的焦點(diǎn)框遮罩，再創(chuàng)建所述獨(dú)立的焦點(diǎn)框遮罩。
3.如權(quán)利要求1或2所述的焦點(diǎn)框繪制方法，其特征在于，所述獨(dú)立的焦點(diǎn)框遮罩為透明，其尺寸大于屏幕的尺寸，并對(duì)所述獨(dú)立的焦點(diǎn)框遮罩循環(huán)回收利用。
4.如權(quán)利要求3所述的焦點(diǎn)框繪制方法，其特征在于，所述獨(dú)立的焦點(diǎn)框遮罩創(chuàng)建在頁(yè)面視圖上方。
5.如權(quán)利要求4所述的焦點(diǎn)框繪制方法，其特征在于，根據(jù)所述對(duì)象的尺寸和形狀，繪制所需焦點(diǎn)框。
6.一種焦點(diǎn)框繪制系統(tǒng)，其特征在于，所述系統(tǒng)包括: 接收創(chuàng)建模塊，用于接收觸控事件并創(chuàng)建獨(dú)立的焦點(diǎn)框遮罩； 判斷繪制模塊，用于判斷觸控點(diǎn)是否存在需要焦點(diǎn)框的對(duì)象，若存在，則將所需焦點(diǎn)框繪制在所述獨(dú)立的焦點(diǎn)框遮罩上。
7.如權(quán)利要求6所述的焦點(diǎn)框繪制系統(tǒng)，其特征在于，所述系統(tǒng)還包括用于移除當(dāng)前存在的焦點(diǎn)框遮罩，以便創(chuàng)建獨(dú)立的焦點(diǎn)框遮罩的移除模塊。
8.如權(quán)利要求6或7所述的焦點(diǎn)框繪制系統(tǒng)，其特征在于，所述系統(tǒng)進(jìn)一步包括對(duì)獨(dú)立的焦點(diǎn)框遮罩循環(huán)回收利用的回收利用模塊。
9.一種觸控設(shè)備，包括觸控屏，其特征在于，所述觸控設(shè)備采用如權(quán)利要求6、7或8所述的焦點(diǎn)框繪制系統(tǒng)。
10.一種焦點(diǎn)框繪制方法，其特征在于，所述方法包括以下步驟: 接收觸控事件，若觸控點(diǎn)存在需要焦點(diǎn)框的對(duì)象，則創(chuàng)建獨(dú)立的焦點(diǎn)框遮罩； 將所需焦點(diǎn)框繪制在所述獨(dú)立的焦點(diǎn)框遮罩上。
【文檔編號(hào)】G06F3/0488GK103593129SQ201210286447
【公開(kāi)日】2014年2月19日 申請(qǐng)日期:2012年8月13日 優(yōu)先權(quán)日:2012年8月13日
【發(fā)明者】孫皓然, 胡純冬, 陳磊, 曾亮, 萬(wàn)黎 申請(qǐng)人:騰訊科技（深圳）有限公司