頁面渲染方法和遮罩層創建方法
2023-05-21 15:34:51 1
頁面渲染方法和遮罩層創建方法
【專利摘要】本申請提供了一種圖片元素顯示方法和裝置，涉及網絡【技術領域】。本申請的方法包括：當偵聽到滑鼠開始拖拽動作時，添加遮罩層，並在遮罩層創建被拖拽的第一圖片元素對應的第二圖片元素；所述第二圖片元素為包括第一圖片元素內容數據的圖標；獲取滑鼠移動過程中的坐標，將所述第二圖片元素的坐標隨所述滑鼠移動過程中的坐標改變而改變；當偵聽到滑鼠彈起時，隱藏所述遮罩層，根據滑鼠彈起時所指第三圖片元素，將第一圖片元素的內容數據與第三圖片元素的內容數據進行交換；將交換後得到的圖片元素進行重新渲染顯示。本申請減少了回流的次數，即需要重新計算位置的元素的個數，從而也減少了重繪的次數，降低了系統資源佔用率，也降低了CPU的使用率。
【專利說明】頁面渲染方法和遮罩層創建方法
[0001]本發明專利申請是申請日為2012年3月29日、申請號為201210089585.X、名稱為「一種圖片元素顯示方法和裝置」的中國發明專利申請的分案申請。
【技術領域】
[0002]本申請涉及網絡【技術領域】，特別是涉及一種圖片元素顯示方法和裝置。
【背景技術】
[0003]RIA (Rich Internet Applications)富網際網路應用，具有高度互動性、豐富的用戶體驗以及強大的功能。豐富的界面元素:RIA技術提供了比HTML更為豐富的界面表現元素，密集、響應速度快和圖形豐富的圖片元素與數據模型結合在一起，為用戶提供好的使用體驗。在RIA中，一般是結合頁面腳本(Javascript)操作頁面的文檔對象模型樹元素，使圖片元素可以運動。
[0004]而在瀏覽器中，對於頁面的呈現流程如圖1，瀏覽器從HTML Source (HTML資源，其中 HTML 為:Hypertext Markup Language Source,超文本標記語言)中解析出 DOM Tree(文檔對象模型樹)，從CSS (Cascading Style Sheet,級聯樣式表)中解析出級聯樣式表對應的樣式結構體後，構建出Render Tree (呈現樹),然後瀏覽器根據Render Tree繪製頁面進行顯示。在構建過程中，瀏覽器會將文檔對象模型樹中的元素逐個放入級聯樣式表對應的樣式結構體中相應的級聯樣式表位置，然後進行構建。其中文檔對象模型樹主要決定圖片元素的呈現內容，級聯樣式表對應的樣式結構體主要決定圖片元素呈現的位置。但是當Render Tree中的一部分(或全部)因為Render Tree元素的規模尺寸、布局等改變時，需要重新構建Render Tree ;或者一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響布局的，比如背景顏色；那麼就會引起瀏覽器重新渲染頁面，一般稱上述兩種方式為回流和重繪。特別是，如果某個圖片元素位置改變，那麼對於文檔對象模型樹中該元素對應的位置之後的位置對應的元素，需要重新回流，計算位置，並進行元素樣式的重繪。而在這個過程中，回流的成本遠遠高於重繪的成本。
[0005]在RIA中，存在一個拖拽動作，拖拽是RIA的一個重要組成，主要用來改變頁面構成和布局，根據拖拽組合完成特定語義的操作，比如交換兩個元素的位置等。
[0006]現有技術中，進行拖拽時，通常的實現過程是，添加滑鼠偵聽事件，當有效交互區域內捕捉到滑鼠點擊事件時，拖動過程開始，添加偵聽滑鼠移動事件，每次觸發滑鼠移動事件時，就將被拖拽元素通過設置CSS絕對位置的方式移動到滑鼠當前位置，當滑鼠彈起，做拖動結束的處理。由前述瀏覽器渲染過程可知，由文檔對象模型樹的內容放置在相應的級聯樣式表位置中構建呈現樹，那麼在上述拖拽過程中，是將某個元素所在的級聯樣式表位置和其內容一起進行拖動，其中CSS的坐標跟隨滑鼠移動的坐標進行變化，而級聯樣式表位置的變化，那麼根據瀏覽器的渲染規則，會導致頁面的回流或重繪，瀏覽器需要重新計算該元素及文檔對象模型樹中該元素之後所有元素的在瀏覽器中的新位置，並基於新位置進行樣式渲染，計算和渲染的負荷大，系統資源佔用嚴重，CPU (Central Processing Unit,中央處理器)使用率高，影響系統其他程序正常運行。
【發明內容】
[0007]本申請所要解決的技術問題是提供一種圖片元素顯示方法和裝置，解決現有技術中拖拽過程中，瀏覽器對於文檔對象模型樹中，在被拖拽對象所在位置之後的所有可被拖拽的元素均需要重新回流，重新計算其位置，並進行渲染的過程，從而導致計算和渲染的負荷大，系統資源佔用嚴重，CPU (Central Processing Unit,中央處理器)使用率高,影響系統其他程序正常運行的問題。
[0008]為了解決上述問題，本申請公開了一種網頁中圖片元素顯示方法，包括:
[0009]偵聽頁面顯示區域中第一圖片元素的拖拽動作開始，添加遮罩層；其中所述遮罩層添加在頁面文檔對象模型樹中最後一個元素位置之後，所述遮罩層置於頂層，所述遮罩層覆蓋的區域包括頁面顯示的區域；
[0010]在遮罩層創建與被拖拽的第一圖片元素對應的第二圖片元素，所述第二圖片元素包括第一圖片元素的內容數據中的圖片；
[0011]偵聽第二圖片元素的拖拽移動，根據拖拽移動設置所述第二圖片元素的位置；
[0012]偵聽頁面顯示區域中第一圖片元素的拖拽動作結束，隱藏所述遮罩層，根據拖拽動作結束處的第三圖片元素，將第一圖片元素的內容數據與第三圖片元素的內容數據進行交換；
[0013]在所述頁面顯示的區域中僅渲染被交換的第一圖片元素和第三圖片元素。
[0014]優選的，偵聽頁面顯示區域中第一圖片元素的拖拽動作開始，添加遮罩層，在遮罩層創建與被拖拽的第一圖片元素對應的第二圖片元素的步驟包括:
[0015]偵聽到滑鼠拖拽動作開始，獲取第一圖片元素的級聯樣式表位置數據、文檔對象模型樹結構數據、和文檔對象模型樹結構中的內容數據；
[0016]依據所述級聯樣式表位置數據和文檔對象模型樹結構數據在所述遮罩層中創建與第一圖片元素對應的第二圖片元素；
[0017]將所述文檔對象模型樹結構中的內容數據依據文檔對象模型樹結構形式設置到所述第二圖片元素。
[0018]優選的，添加所述遮罩層的步驟包括:
[0019]預先在頁面對應的文檔對象模型樹中，最後一個元素的位置之後，添加遮罩層結構；
[0020]在級聯樣式表對應的樣式結構體中設置遮罩層的覆蓋區域為所述頁面顯示的區域。
[0021]優選的，預先在頁面對應的文檔對象模型樹中，最後一個元素的位置之後，添加遮罩層結構時包括:
[0022]在文檔對象模型樹的主幹尾端添加對應遮罩層的div。
[0023]優選的，預先在頁面對應的文檔對象模型樹中，最後一個元素的位置之後，添加遮罩層結構時包括:
[0024]在文檔對象模型樹各放置各可拖拽元素所在子div的最後一個父div之後，添加對應遮罩層的div，並將其屬性設置為頂層div。[0025]優選的，所述偵聽頁面顯示區域中第一圖片元素的拖拽動作結束，隱藏所述遮罩層步驟包括:
[0026]刪除所述遮罩層中創建的第二圖片元素。
[0027]優選的，根據拖拽動作結束處的第三圖片元素，將第一圖片元素的內容數據與第三圖片元素的內容數據進行交換包括:
[0028]偵聽到拖拽動作結束，若所在區域對應的第三圖片元素對應的文檔對象模型樹結構中存在內容數據時，獲取第三圖片元素對應的文檔對象模型樹結構中的內容數據；
[0029]保持第一圖片元素和第三圖片元素的級聯樣式表位置和文檔對象模型樹結構不變，並將第一圖片元素對應文檔對象模型樹結構中的內容數據與第三圖片元素對應文檔對象模型樹結構中的內容數據互換。
[0030]優選的，所述偵聽頁面顯示區域中第一圖片元素的拖拽動作開始步驟包括:
[0031]偵聽到滑鼠按下時，判斷滑鼠按下區域是否屬於有效區域；如果是，則偵聽到滑鼠是否開始移動，如果是，則加載所述遮罩層。
[0032]優選的，進一步包括:
[0033]判斷拖拽動作結束處拖拽滑鼠所在區域是否在第三圖片元素所在區域的預定範圍內；
[0034]如果是，確定所述拖拽動作結束處拖拽滑鼠所在區域的圖片元素為第三圖片元素。
[0035]優選的，所述遮罩層覆蓋於以絕對布局方式構建的圖片元素之上；
[0036]和/或，所述遮罩層覆蓋於以流式布局方式構建的圖片元素之上。
[0037]優選的，所述絕對布局方式構建的圖片元素包括九宮格形式的圖片元素、和/或十二宮格的圖片元素。
[0038]相應的，本申請公開了一種圖片元素顯示裝置，包括:
[0039]遮罩層添加模塊，用於偵聽頁面顯示區域中第一圖片元素的拖拽動作開始，添加遮罩層；其中所述遮罩層添加在頁面文檔對象模型樹中最後一個元素位置之後，所述遮罩層置於頂層，所述遮罩層覆蓋的區域包括頁面顯示的區域；
[0040]第二圖片元素創建模塊，用於在遮罩層創建與被拖拽的第一圖片元素對應的第二圖片元素，所述第二圖片元素包括第一圖片元素的內容數據中的圖片；
[0041]第二圖片元素拖動模塊，用於偵聽第二圖片元素的拖拽移動，根據拖拽移動設置所述第二圖片元素的位置；
[0042]內容處理模塊，用於偵聽頁面顯示區域中第一圖片元素的拖拽動作結束，隱藏所述遮罩層，根據拖拽動作結束處的第三圖片元素，將第一圖片元素的內容數據與第三圖片元素的內容數據進行交換；
[0043]渲染顯示模塊，用於在所述頁面顯示的區域中僅渲染被交換的第一圖片元素和第三圖片元素。
[0044]優選的，所述第二圖片元素創建模塊包括:
[0045]第一數據獲取子模塊，用於偵聽到滑鼠拖拽動作開始，獲取第一圖片元素的級聯樣式表位置數據、文檔對象模型樹結構數據、和文檔對象模型樹結構中的內容數據；
[0046]第一創建子模塊，用於依據所述級聯樣式表位置數據和文檔對象模型樹結構數據在所述遮罩層中創建與第一圖片元素對應的第二圖片元素；
[0047]賦值子模塊，用於將所述文檔對象模型樹結構中的內容數據依據文檔對象模型樹結構形式設置到所述第二圖片元素。
[0048]優選的，添加所述遮罩層的模塊包括:
[0049]文檔對象模型樹添加子模塊，用於預先在頁面對應的文檔對象模型樹中，最後一個元素的位置之後，添加遮罩層結構；
[0050]樣式設置子模塊，用於在級聯樣式表對應的樣式結構體中設置遮罩層的覆蓋區域為所述頁面顯示的區域。
[0051]優選的，預先在頁面對應的文檔對象模型樹中，最後一個元素的位置之後，添加遮罩層結構時包括:
[0052]在文檔對象模型樹的主幹尾端添加對應遮罩層的div。
[0053]優選的，預先在頁面對應的文檔對象模型樹中，最後一個元素的位置之後，添加遮罩層結構時包括:
[0054]在文檔對象模型樹各放置各可拖拽元素所在子div的最後一個父div之後，添加對應遮罩層的div，並將其屬性設置為頂層div。
[0055]優選的，所述內容處理模塊包括:
[0056]刪除子模塊，用於刪除所述遮罩層中創建的第二圖片元素。
[0057]優選的，所述內容處理模塊包括:
[0058]第三圖片元素獲取子模塊，用於偵聽到拖拽動作結束，若所在區域對應的第三圖片元素對應的文檔對象模型樹結構中存在內容數據時，獲取第三圖片元素對應的文檔對象模型樹結構中的內容數據；
[0059]替換子模塊，用於保持第一圖片元素和第三圖片元素的級聯樣式表位置和文檔對象模型樹結構不變，並將第一圖片元素對應文檔對象模型樹結構中的內容數據與第三圖片元素對應文檔對象模型樹結構中的內容數據互換。
[0060]優選的，在所述遮罩層添加模塊，所述偵聽頁面顯示區域中第一圖片元素的拖拽動作開始時包括:
[0061]判斷子模塊，用於當偵聽到滑鼠按下時，判斷滑鼠按下區域是否屬於有效區域；如果是，則偵聽到滑鼠是否開始移動，如果是，則加載所述遮罩層。
[0062]優選的，進一步包括::
[0063]拖拽結束區域判斷模塊，用於判斷拖拽動作結束處拖拽滑鼠所在區域是否在第三圖片元素所在區域的預定範圍內；
[0064]如果是，確定所述拖拽動作結束處拖拽滑鼠所在區域的圖片元素為第三圖片元素。
[0065]優選的，所述遮罩層覆蓋於以絕對布局方式構建的圖片元素之上；
[0066]和/或，所述遮罩層覆蓋於以流式布局方式構建的圖片元素之上。
[0067]優選的，所述絕對布局方式構建的圖片元素包括九宮格形式的圖片元素、和/或十二宮格的圖片元素。
[0068]與現有技術相比，本申請包括以下優點:
[0069]本申請在偵聽到滑鼠的拖拽動作開始時，激活添加覆蓋於整個拖拽區域的遮罩層，然後在遮罩層中創建被拖拽的第一圖片元素對應的第二圖片元素；其中所述遮罩層對應在文檔對象模型樹中的位置，在各元素對應在文檔對象模型樹中的各位置之後；那麼滑鼠拖動時，是拖動的遮罩層中的第二圖片元素，並沒有拖動原來位置的第一圖片元素，如此第一圖片元素的位置沒有改變，根據瀏覽器的渲染規則，在文檔對象模型樹中該元素之後的元素的位置也無需重新進行計算，一般只要計算遮罩層中第二圖片元素的位置即可，計算量減小。另外，在拖動結束後，只是將第一圖片元素的顯示內容，即第一圖片元素對應的文檔對象模型樹結構中的內容數據，作為第三圖片元素的的內容，如果第三圖片元素存在顯示內容，那麼也只需將第三圖片元素的顯示內容作為第一，在這個過程中，第三圖片元素和第一圖片元素改變的只是其顯示內容，其位置與結構均未進行改變，因此，瀏覽器也無需重新計算在文檔對象模型樹中第一圖片元素或第三圖片元素的之後的元素的位置；並且由於計算元素位置時，需要大量借用頁面腳本去計算，而本申請由於基本上沒有重新計算位置的元素，所以一般不用借用頁面腳本去計算。再次，在內容置換結束後，重繪時只需要重繪第一圖片元素與第三圖片元素的內容即可，無需重繪在文檔對象模型樹中第一圖片元素或第三圖片元素的之後的元素的內容。
[0070]因此，本申請減少了回流的次數，即需要重新計算位置的元素的個數，從而也減少了重繪的次數，降低了系統資源佔用率，也降低了 CPU的使用率。
【專利附圖】
【附圖說明】
[0071]圖1是本申請一種圖片元素顯示方法的流程示意圖；
[0072]圖2是本申請優選的一個遮罩層在HTML對應的文檔對象模型樹結構中位置示例圖；
[0073]圖3是本申請採用十二宮格布局時的圖片元素拖拽示例；
[0074]圖4是本申請一種圖片元素顯示裝置的結構示意圖。
【具體實施方式】
[0075]為使本申請的上述目的、特徵和優點能夠更加明顯易懂，下面結合附圖和【具體實施方式】對本申請作進一步詳細的說明。
[0076]本申請的核心思想之一在於:在文檔對象模型樹中最後一個元素之後添加一個遮罩層結構；當偵聽到滑鼠開始拖拽動作時，添加遮罩層，並在遮罩層中複製一個與滑鼠拖拽的第一圖片元素對應的第二圖片元素，如此，在拖拽過程中，拖拽的是遮罩層中的第二圖片元素，而第一圖片元素沒有進行任何位置的移動；當偵聽到滑鼠彈起時，隱藏所述遮罩層，根據滑鼠彈起時所指第三圖片元素，將第一圖片元素的內容數據與第三圖片元素的內容數據進行交換，如此即可保證第一圖片元素和第三圖片元素的位置不改變的情況下，交換內容。在這個過程中，位置移動的是遮罩層中的第二圖片元素，而由於遮罩層結構在文檔對象模型樹結構中最後一個元素位置之後，那麼該第二圖片元素之後基本上沒有其他元素需要重新進行位置計算，也即回流的只是遮罩層中的第二圖片元素。同時，只需要將元素和第三圖片元素的內容數據交換後，進行重繪渲染即可。
[0077]參照圖1，示出了本申請一種圖片元素顯示方法的流程示意圖，具體可以包括:
[0078]步驟110，偵聽頁面顯示區域中第一圖片元素的拖拽動作開始，添加遮罩層；其中所述遮罩層添加在頁面文檔對象模型樹中最後一個元素位置之後，所述遮罩層置於頂層，所述遮罩層覆蓋的區域包括頁面顯示的區域；
[0079]在本申請中，可預先在文檔對象模型樹中設置了一個遮罩層，在未激活添加時處於隱藏狀態。
[0080]設置所述遮罩層的步驟包括:
[0081 ] 步驟Al，預先在頁面對應的文檔對象模型樹中，最後一個元素的位置之後，添加遮
罩層結構。
[0082]在RIA中，可移動的元素也在文檔對象模型樹中對應相應位置，一般情況下，每個可移動兀素在由級聯樣式表對應的樣式結構體設置時，其在瀏覽器窗口中存在一定的區域，比如以一個矩形的樣式存在，用戶即可通過滑鼠拖動該位置的矩形到其他位置。
[0083]本申請將遮罩層設置文檔對象模型樹中最後一個可移動元素的位置之後。參照圖2，其示出了本申請優選的一個遮罩層在HTML對應的文檔對象模型樹結構中位置示例圖。
[0084]優選的，預先在頁面對應的文檔對象模型樹中，最後一個元素的位置之後，添加遮罩層結構時包括:
[0085]步驟All，在文檔對象模型樹的主幹尾端添加對應遮罩層的div。
[0086]主要的內容將放在圖2中〈div id=「mainwrapper」>層中，根據應用的複雜程度，層次的嵌套數量可能更多。所有可拖動的元素均在〈div id= 「mainwrapper」〉層中，比如〈div class=，，qsitecontainer，，>。
[0087]在body的最後有一個〈div id=「drag_layer」>,用作遮罩層,真正的拖動過程是在他內部完成的。
[0088]或者，優選的，步驟A12，在文檔對象模型樹各放置各可拖拽元素所在子div的最後一個父div之後，添加對應遮罩層的div，並將其屬性設置為頂層div。
[0089]在示例中，在主體內容層〈div id= 「mainwrapper」 >......〈/div>層中包括了
多個頁面層，比如〈div id=」page0」>......,〈div id=」pagel」>......,
〈div id=，，page2，，>......,頁面層表示當前瀏覽器將頁面分頁進行顯示。〈div
id=」pageO」 >...... 的元素在第一頁顯示，〈divid=」 page2」 >...... 中的元素
在第二頁顯示，〈div id=」page2」>……中的元素在第三頁顯示。那麼可直接在最後一頁的div結構後添加〈div id= 「drag_layer」>，但此種方式需要設置該結構為頂層結構，使該div之後的div不會顯示在該層之上。
[0090]步驟A2，在級聯樣式表對應的樣式結構體中設置遮罩層的覆蓋區域為所述頁面顯示的區域。
[0091]為了保證拖拽的元素始終在遮罩層中移動，需要在構建呈現樹時，在級聯樣式表對應的樣式結構體中設置遮罩層的覆蓋區域包括各可移動元素所在的區域。一般情況下，可設置遮罩層覆蓋區域的坐標為瀏覽器顯示窗口的坐標。為了節省渲染計算量，本申請優選的將遮罩層覆蓋的區域固定設置為所述頁面顯示的區域。
[0092]所述遮罩層覆蓋於以絕對布局方式構建的圖片元素之上；
[0093]和/或，所述遮罩層覆蓋於以流式布局方式構建的圖片元素之上。
[0094]所述絕對布局方式構建的圖片元素包括九宮格形式的圖片元素、和/或十二宮格的圖片元素。在實際顯示中，顯示區域中圖片元素拖動時是以圖片元素的形式被拖動的。[0095]步驟120，在遮罩層創建被拖拽的第一圖片元素對應的第二圖片元素，所述第二圖片元素為包括第一圖片元素的內容數據中的圖片；
[0096]優選的，偵聽頁面顯示區域中第一圖片元素的拖拽動作開始，添加遮罩層，在遮罩層創建被拖拽的第一圖片元素對應的第二圖片元素的步驟包括:
[0097]步驟BI，偵聽到滑鼠拖拽動作開始，獲取第一圖片元素的級聯樣式表位置數據、文檔對象模型樹結構數據、和文檔對象模型樹結構中的內容數據；
[0098]滑鼠事件一般有三種:按下down，移動move，彈起up。可添加滑鼠偵聽事件偵聽滑鼠的動作，當偵聽到down+move時，即可判定滑鼠的拖拽動作開始。
[0099]滑鼠按下並開始移動時，其指示了被拖拽的第一圖片元素的位置，那麼即可將該位置的第一圖片元素的級聯樣式表位置數據，文檔對象模型樹結構數據和文檔對象模型樹結構中的內容數據進行獲取。比如一個元素的文檔對象模型樹結構為,那麼其文檔對象模型樹結構中的內容數據為」 qsitecontainer」，其級聯樣式表位置數據包括該元素所在區域，比如矩形區域的四角的坐標等。
[0100]另外，所述偵聽頁面顯示區域中第一圖片元素的拖拽動作開始步驟包括:
[0101]偵聽到滑鼠按下時，判斷滑鼠按下區域是否屬於有效區域；如果是，則偵聽到滑鼠是否開始移動，如果是，則加載所述遮罩層。
[0102]本申請還可設置拖拽的有效區域，比如一個元素佔據的一個矩形區域，那麼設置該矩形其中1/4塊子矩形區域為拖拽有效區域，當滑鼠不落在這個區域時，不能進行拖拽動作。當滑鼠落在這個區域，當偵聽到滑鼠開始移動，則添加遮罩層，開始進入拖拽動作處理。
[0103]另外，當偵聽到滑鼠彈起時，根據當前滑鼠所在坐標判斷所在區域，並根據所述區域與第三圖片元素的一一對應關係確定所述第三圖片元素。
[0104]本申請中，頁面所在整個區域可以分區處理，即可以將整個區域分成多個區域，每個區域與相應的第三圖片元素對應。
[0105]比如，如果以九宮格形式顯示的圖片元素，那麼可以將整個頁面區域分為九個區域:左上，中上，右上，左中，正中，右中，左下，中下，右下。分別從左至右，從上之下對應第一至第九個圖片元素。那麼當滑鼠彈起時處於右下區域，即可判斷當前拖拽的目標區域對應的元素為第九個圖片元素。
[0106]步驟B2，依據所述級聯樣式表位置數據和文檔對象模型樹結構數據在所述遮罩層中創建與第一圖片元素對應的第二圖片元素；
[0107]基於前述步驟中構建的遮罩層，可知激活添加時覆蓋於當前顯示的內容層之上，那麼可在遮罩層中創建與第一圖片元素相同模式的第二圖片元素。一般基於第一圖片元素對應的的文檔對象模型樹結構，即div結構，在遮罩層中創建與第一圖片元素對應的文檔對象模型樹結構相同的文檔對象模型樹結構；同時，將第二圖片元素的級聯樣式表位置設置數據為與第一圖片元素的級聯樣式表位置數據相同，一般第一圖片元素的位置數據包括其所在區域的寬、高、所在坐標等。
[0108]步驟B3，將所述文檔對象模型樹結構中的內容數據依據文檔對象模型樹結構形式設置到所述第二圖片元素。[0109]然後，將第一圖片元素的文檔對象模型樹結構中的內容數據賦予第二圖片元素的文檔對象模型樹結構中。如此，即可保證第二圖片元素出現在第一圖片元素所在的位置，並且與第一圖片元素相似。
[0110]將所述文檔對象模型樹結構中的內容數據依據文檔對象模型樹結構形式設置到所述第二圖片元素的代碼示例如下:
[0111]比如在function onDragStart (e)函數中當偵聽到對元素的滑鼠拖拽動作時,添加遮罩層draglayer,並在遮罩層中創建第二圖片元素gost.$element,並把第一圖片元素的級聯樣式表位置屬性等賦予第二圖片元素。
[0112]步驟130，偵聽第二圖片元素的拖拽移動，根據拖拽移動設置所述第二圖片元素的位置。
[0113]獲取滑鼠移動過程中的坐標，並將所述第二圖片元素的坐標隨所述滑鼠移動過程中的坐標改變而改變。在滑鼠移動過程中，滑鼠的坐標會相應進行改變，那麼為了使第二圖片元素也隨著滑鼠進行運動，那麼第二圖片元素的坐標也需要隨著滑鼠的坐標改變而進行相應的改變。
[0114]比如在function onDragAppMove (e)函數中，拖拽時，滑鼠移動過程中具有坐標(X，y)，以第一圖片元素所在位置右上角坐標(X，Y)為基準，將滑鼠移動過程中的(X，y)與
a,Y)進行計算和處理，即可獲得當前移動的第二圖片元素的位置，即第二圖片元素隨坐標變換而變換。
[0115]步驟140，偵聽頁面顯示區域中第一圖片元素的拖拽動作結束，隱藏所述遮罩層，根據拖拽動作結束處的第三圖片元素，將第一圖片元素的內容數據與第三圖片元素的內容數據進行交換。
[0116]當偵聽到滑鼠的彈起(up)動作時，此時可隱藏遮罩層，對於用戶端來說，此時遮罩層就不可見了，同時根據滑鼠彈起時所指第三圖片元素，將第一圖片元素的內容數據與第三圖片元素的內容數據進行交換。
[0117]優選的，根據拖拽動作結束處的第三圖片元素，將第一圖片元素的內容數據與第三圖片元素的內容數據進行交換時包括:
[0118]步驟Cl，偵聽到拖拽動作結束，若所在區域對應的第三圖片元素對應的文檔對象模型樹結構中存在內容數據時，獲取第三圖片元素對應的文檔對象模型樹結構中的內容數據。
[0119]進一步包括:
[0120]判斷拖拽動作結束處拖拽滑鼠所在區域是否在第三圖片元素所在區域的預定範圍內；
[0121]如果是，確定所述拖拽動作結束處拖拽滑鼠所在區域的圖片元素為第三圖片元素。
[0122]滑鼠彈起時，根據滑鼠彈起時對應的區域，能指示拖拽的第三圖片元素及其位置。此時，當第三圖片元素位置存在顯示內容時，即其對應的文檔對象模型對象模型樹結構中存在內容數據時，則獲取第三圖片元素對應的的文檔對象模型樹結構中的內容數據。如果沒有，則不獲取，直接設置為第三圖片元素的待交換的文檔對象模型樹結構中的內容數據為空。[0123]步驟C2，保持第一圖片元素和第三圖片元素的級聯樣式表位置和文檔對象模型樹結構不變，並將第一圖片元素對應文檔對象模型樹結構中的內容數據與第三圖片元素對應文檔對象模型樹結構中的內容數據互換。
[0124]將第一圖片元素和第三圖片元素的文檔對象模型樹結構中的內容數據進行互換，如此，第一圖片元素和第三圖片元素的內容即相互轉換了，但是第一圖片元素和第三圖片元素的級聯樣式表位置和文檔對象模型樹結構均未改變。
[0125]優選的，所述偵聽頁面顯示區域中第一圖片元素的拖拽動作結束，隱藏所述遮罩層步驟包括:
[0126]刪除所述遮罩層中創建的第二圖片元素。
[0127]為了節省系統資源，在當次拖拽動作結束，隱藏遮罩層時，可將遮罩層中臨時創建的第二圖片元素進行刪除。
[0128]比如在function onDragAppUp (e)函數中，設置刪除第二圖片元素的函數和隱藏遮罩層的函數，即可，隱藏遮罩層，並將遮罩層中臨時創建的第二圖片元素進行刪除。
[0129]步驟150，在所述頁面顯示的區域中僅渲染被交換的第一圖片元素和第三圖片元素。
[0130]比如以絕對布局設置的九宮格形式頁面，每個格子以CSS絕對定位的形式顯示在頁面上。如果第一圖片元素和第三圖片元素的內容進行了替換，那麼即可渲染第一圖片元素和第三圖片元素替換後的內容，並重新渲染遮罩層的結構，即可將替換後的九宮格頁面進行顯示。
[0131]又比如，以流式布局設置的一排或多排圖片元素，替換第一排的第一和第五個圖片元素的內容後，只需渲染第一和第五各圖片元素的內容，和遮罩層後即可進行顯示。
[0132]本申請中，一般只需重繪第三圖片元素和第一圖片元素的內容，回流和重繪遮罩層位置和內容。因為第三圖片元素和第一圖片元素的位置沒有改變，因此不用回流計算第三圖片元素和第一圖片元素及在文檔對象模型樹中兩個元素的位置之後的元素的位置。只需回流計算處於最後位置的遮罩層的位置，而處於最後位置的遮罩層中元素的移動不影響前面元素的位置計算。因此本申請大大減少了拖拽過程中的計算量，提高效率，降低了資源消耗。
[0133]參照圖3，其是本申請採用十二宮格布局時的圖片元素拖拽示例。
[0134]圖中頁面的htlm語言的DOM樹結構可如圖2所示。即將遮罩層結構至於DOM樹結構中body中的尾端，並使其為頂層結構。
[0135]其中，顯示頁面顯示區域為301，遮罩層為302，在圖中由於遮罩層沒有具體體現，所以遮罩層302沒有標出；在圖中，所述遮罩層包括了頁面顯示區域301。
[0136]當滑鼠按下時，系統偵聽得到當前滑鼠按下時的坐標是否屬於有效區域。在本示例中判斷滑鼠按下時的坐標是否處於圖中從左至右，從上至下的第二個圖片元素310對應的有效區域；
[0137]如果是，則偵聽滑鼠是否開始移動，如果開始移動，則激活添加所述遮罩層302，並在所述遮罩層302中創建與所述第二個圖片元素310具有相同內容的第二圖片元素320，同時將所述第二個圖片元素310的坐標賦予遮罩層中的第二圖片元素320，使其能夠顯示於所述第二個圖片元素310的位置。[0138]在滑鼠移動過程中，獲取滑鼠移動過程中的坐標，將其賦予所述遮罩層中的第二圖片元素320，使所述第二圖片元素320可以跟隨滑鼠移動而移動。
[0139]當滑鼠到達目標位置彈起時，隱藏所屬遮罩層，在這裡，隱藏了所述遮罩層即可隱藏遮罩層中創建的第二圖片元素320，也可將所述第二圖片元素320進行刪除。並判斷當前滑鼠的坐標所屬的區域，並根據區域與當前區域的圖片元素的對應關係，確定第三圖片元素。比如滑鼠彈起時，其所在的區域為圖中「淘寶網」所在圖片元素330。
[0140]在確定了第三圖片元素後，即確認了拖拽的目標圖片元素後，將所述被第二個位置的圖片元素中的內容，比如圖片，連結，文檔等，與所述第三圖片元素中(比如淘寶網所在的圖片元素330)的內容進行替換，保持上述兩個圖片元素的坐標屬性和結構屬性不變。
[0141]然後將替換後的兩個位置的圖片元素進行渲染，並對所述隱藏的遮罩層進行渲染，即可將頁面進行顯示。
[0142]參照圖4，其示出了本申請一種圖片元素顯示裝置的結構示意圖，包括:
[0143]遮罩層添加模塊510，用於偵聽頁面顯示區域中第一圖片元素的拖拽動作開始，添加遮罩層；其中所述遮罩層添加在頁面文檔對象模型樹中最後一個元素位置之後，所述遮罩層置於頂層，所述遮罩層覆蓋的區域包括頁面顯示的區域；
[0144]第二圖片元素創建模塊520，用於在遮罩層創建被拖拽的第一圖片元素對應的第二圖片元素，所述第二圖片元素為包括第一圖片元素的內容數據中的圖片；
[0145]第二圖片元素拖動模塊530，用於偵聽第二圖片元素的拖拽移動，根據拖拽移動設置所述第二圖片元素的位置；
[0146]內容處理模塊540，用於偵聽頁面顯示區域中第一圖片元素的拖拽動作結束，隱藏所述遮罩層，根據拖拽動作結束處的第三圖片元素，將第一圖片元素的內容數據與第三圖片元素的內容數據進行交換；
[0147]渲染顯示模塊550，用於在所述頁面顯示的區域中僅渲染被交換的第一圖片元素和第三圖片元素。
[0148]優選的，所述第二圖片元素創建模塊包括:
[0149]第一數據獲取子模塊，用於偵聽到滑鼠拖拽動作開始，獲取第一圖片元素的級聯樣式表的位置數據、文檔對象模型樹的結構數據、和文檔對象模型樹結構中的內容數據；
[0150]第一創建子模塊，用於依據所述級聯樣式表的位置數據和文檔對象模型樹的結構數據在所述遮罩層中創建與第一圖片元素對應的第二圖片元素；
[0151 ] 賦值子模塊，用於將所述文檔對象模型樹結構中的內容數據依據文檔對象模型樹結構形式設置到所述第二圖片元素。
[0152]優選的，添加所述遮罩層的模塊包括:
[0153]文檔對象模型樹添加子模塊，用於預先在頁面對應的文檔對象模型樹中，最後一個元素的位置之後，添加遮罩層結構；
[0154]樣式設置子模塊，用於在級聯樣式表對應的樣式結構體中設置遮罩層的覆蓋區域為所述頁面顯示的區域。
[0155]優選的，預先在頁面對應的文檔對象模型樹中，最後一個元素的位置之後，添加遮罩層結構時包括:
[0156]在文檔對象模型樹的主幹尾端添加對應遮罩層的div。[0157]優選的，預先在頁面對應的文檔對象模型樹中，最後一個元素的位置之後，添加遮罩層結構時包括:
[0158]在文檔對象模型樹各放置各可拖拽元素所在子div的最後一個父div之後，添加對應遮罩層的div，並將其屬性設置為頂層div。
[0159]優選的，所述內容處理模塊包括:
[0160]刪除子模塊，用於刪除所述遮罩層中創建的第二圖片元素。
[0161]優選的，所述內容處理模塊包括:
[0162]第三圖片元素獲取子模塊，用於偵聽到拖拽動作結束，若所在區域對應的第三圖片元素對應的文檔對象模型樹結構中存在內容數據時，獲取第三圖片元素對應的文檔對象模型樹結構中的內容數據；
[0163]替換子模塊，用於保持第一圖片元素和第三圖片元素的級聯樣式表位置和文檔對象模型樹結構不變，並將第一圖片元素對應文檔對象模型樹結構中的內容數據與第三圖片元素對應文檔對象模型樹結構中的內容數據互換。
[0164]優選的，在所述遮罩層添加模塊，所述偵聽頁面顯示區域中第一圖片元素的拖拽動作開始時包括:
[0165]判斷子模塊，用於當偵聽到滑鼠按下時，判斷滑鼠按下區域是否屬於有效區域；如果是，則偵聽到滑鼠是否開始移動，如果是，則加載所述遮罩層。
[0166]優選的，進一步包括::
[0167]拖拽結束區域判斷模塊，用於判斷拖拽動作結束處拖拽滑鼠所在區域是否在第三圖片元素所在區域的預定範圍內；`
[0168]如果是，確定所述拖拽動作結束處拖拽滑鼠所在區域的圖片元素為第三圖片元素。
[0169]優選的，所述遮罩層覆蓋於以絕對布局方式構建的圖片元素之上；
[0170]和/或，所述遮罩層覆蓋於以流式布局方式構建的圖片元素之上。
[0171]優選的，所述絕對布局方式構建的圖片元素包括九宮格形式的圖片元素、和/或十二宮格的圖片元素。
[0172]對於系統實施例而言，由於其與方法實施例基本相似，所以描述的比較簡單，相關之處參見方法實施例的部分說明即可。
[0173]本說明書中的各個實施例均採用遞進的方式描述，每個實施例重點說明的都是與其他實施例的不同之處，各個實施例之間相同相似的部分互相參見即可。
[0174]最後，還需要說明的是，在本文中，諸如第一和第二等之類的關係術語僅僅用來將一個實體或者操作與另一個實體或操作區分開來，而不一定要求或者暗示這些實體或操作之間存在任何這種實際的關係或者順序。
[0175]本申請實施例可以實施在任何支持圖形處理、網際網路內容擷取和渲染的裝置(或多個裝置)上。這些裝置包括但不限於個人計算機、集群伺服器、行動電話、工作站、嵌入式系統、遊戲機、電視、機頂盒，或任何其它支持計算機圖形和內容顯示的計算裝置。這些裝置可以包括但不限於擁有執行和儲存指令的一個或多個處理器和存儲器的裝置。這些裝置可以包括軟體、固件和硬體。軟體可以包括一個或多個應用程式和作業系統。硬體可以包括但不限於處理器、存儲器及顯示器。[0176]儘管已描述了本申請的優選實施例，但本領域內的技術人員一旦得知了基本創造性概念，則可對這些實施例做出另外的變更和修改。所以，所附權利要求意欲解釋為包括優選實施例以及落入本申請範圍的所有變更和修改。
[0177]以上對本申請所提供的一種圖片元素顯示方法和裝置，進行了詳細介紹，本文中應用了具體個例對本申請的原理及實施方式進行了闡述，以上實施例的說明只是用於幫助理解本申請的方法及其核心思想；同時，對於本領域的一般技術人員，依據本申請的思想，在【具體實施方式】及應用範圍上均會有改變之處，綜上所述，本說明書內容不應理解為對本申請的限制。
【權利要求】
1.一種頁面渲染方法,其包括: 當偵聽到對頁面顯示區域中第一圖片元素的拖拽動作時，在所述頁面顯示區域之上顯示遮罩層； 在所述遮罩層創建與所述第一圖片元素對應的第二圖片元素； 獲取滑鼠移動過程中的坐標並將其賦予所述第二圖片元素以使所述第二圖片元素隨滑鼠的移動而移動； 當偵聽到拖拽動作結束時，隱藏所述遮罩層並確定拖拽動作結束處的第三圖片元素； 將第一圖片元素的內容數據與第三圖片元素的內容數據進行交換； 在所述頁面顯示區域中僅渲染被交換的第一圖片元素和第三圖片元素。
2.根據權利要求1所述的方法，其中，在所述遮罩層創建與所述第一圖片元素對應的第二圖片元素進一步包括: 獲取第一圖片元素的級聯樣式表位置數據、文檔對象模型樹結構數據、和文檔對象模型樹結構中的內容數據； 依據所述級聯樣式表位置數據和文檔對象模型樹結構數據在所述遮罩層中創建與第一圖片元素對應的第二圖片元素； 將所述文檔對象模型樹結構中的內容數據依據文檔對象模型樹結構形式設置到所述第二圖片元素。
3.根據權利要求1或2所述的方法，其中，所述遮罩層通過下面步驟創建:` 在頁面對應的文檔對象模型樹中最後一個元素的位置之後，添加遮罩層結構； 在級聯樣式表對應的樣式結構體中設置遮罩層的覆蓋區域為所述頁面顯示的區域。
4.根據權利要求3所述的方法，其中，頁面對應的文檔對象模型樹中最後一個元素的位置為:文檔對象模型樹的主幹尾端。
5.根據權利要求3所述的方法，其中，頁面對應的文檔對象模型樹中最後一個元素的位置為:文檔對象模型樹各放置各可拖拽元素所在子div的最後一個父div。
6.根據權利要求1至5中任一項所述的方法，其中，隱藏所述遮罩層為: 刪除所述遮罩層中創建的第二圖片元素。
7.根據權利要求1至6中任一項所述的方法，其中，將第一圖片元素的內容數據與第三圖片元素的內容數據進行交換進一步包括: 若第三圖片元素對應的文檔對象模型樹結構中存在內容數據，則獲取第三圖片元素對應的文檔對象模型樹結構中的內容數據； 保持第一圖片元素和第三圖片元素的級聯樣式表位置數據和文檔對象模型樹結構數據不變，並將第一圖片元素對應文檔對象模型樹結構中的內容數據與第三圖片元素對應文檔對象模型樹結構中的內容數據互換。
8.根據權利要求1至7中任一項所述的方法，其中，確定拖拽動作結束處的第三圖片元素進一步包括: 判斷拖拽動作結束處拖拽滑鼠所在區域是否在第三圖片元素所在區域的預定範圍內； 如果是，確定所述拖拽動作結束處拖拽滑鼠所在區域的圖片元素為第三圖片元素。
9.根據權利要求1至8中任一項所述的方法，其中，在所述頁面顯示區域之上顯示遮罩層包括: 所述遮罩層覆蓋於以絕對布局方式構建的圖片元素之上； 和/或，所述遮罩層覆蓋於以流式布局方式構建的圖片元素之上。
10.根據權利要求9所述的方法，其中: 所述絕對布局方式構建的圖片元素包括九宮格形式的圖片元素、和/或十二宮格的圖片元素。
11.一種遮罩層創建方法，其包括: 在頁面對應的文檔對象模型樹中最後一個元素的位置之後，添加遮罩層結構； 在級聯樣式表對應的樣式結構體中設置遮罩層的覆蓋區域為所述頁面顯示的區域。
12.根據權利要求11所述的方法，其中，頁面對應的文檔對象模型樹中最後一個元素的位置為:文檔對象模型樹的主幹尾端。
13.根據權利要求11所述的方法，其中，頁面對應的文檔對象模型樹中最後一個元素的位置為:文檔對象模型樹各放置各可拖拽元素所在子div的最後一個父div。
14.根據權利要求11至13中任一項所述方法，還包括:將所述遮罩層結構置為頂層結構。
15.一種頁面渲染方法，其包括:` 偵聽滑鼠在頁面顯示區域的按下動作； 如果按下動作所在區域為有效區域，則偵聽滑鼠是否開始移動； 如果滑鼠開始移動，則確定滑鼠按下動作所在區域的圖片元素為第一圖片元素並在所述頁面顯示區域之上顯示遮罩層； 在所述遮罩層創建與所述第一圖片元素相同模式的第二圖片元素； 獲取滑鼠移動過程中的坐標並使所述第二圖片元素的坐標隨滑鼠的移動而移動；當偵聽到滑鼠抬起時，隱藏所述遮罩層並確定與滑鼠抬起處所在區域對應的圖片元素為第三圖片元素； 將第一圖片元素的內容數據與第三圖片元素的內容數據進行交換； 在所述頁面顯示區域中僅渲染被交換的第一圖片元素和第三圖片元素。
16.根據權利要求15所述的方法，其中，在所述遮罩層創建與所述第一圖片元素相同模式的第二圖片元素進一步包括: 獲取第一圖片元素的級聯樣式表位置數據、文檔對象模型樹結構數據、和文檔對象模型樹結構中的內容數據； 依據所述級聯樣式表位置數據和文檔對象模型樹結構數據在所述遮罩層中創建與第一圖片元素對應的第二圖片元素； 將所述文檔對象模型樹結構中的內容數據依據文檔對象模型樹結構形式設置到所述第二圖片元素。
17.根據權利要求15或16所述的方法，其中，所述遮罩層通過下面步驟創建: 在頁面對應的文檔對象模型樹中最後一個元素的位置之後，添加遮罩層結構； 在級聯樣式表對應的樣式結構體中設置遮罩層的覆蓋區域為所述頁面顯示的區域。
18.根據權利要求17所述的方法，其中，頁面對應的文檔對象模型樹中最後一個元素的位置為:文檔對象模型樹的主幹尾端。
19.根據權利要求17所述的方法，其中，頁面對應的文檔對象模型樹中最後一個元素的位置為:文檔對象模型樹各放置各可拖拽元素所在子div的最後一個父div。
20.根據權利要求15至19中任一項所述的方法，其中，隱藏所述遮罩層為: 刪除所述遮罩層中創建的第二圖片元素。
21.根據權利要求15至20中任一項所述的方法，其中，將第一圖片元素的內容數據與第三圖片元素的內容數據進行交換進一步包括: 若第三圖片元素對應的文檔對象模型樹結構中存在內容數據，則獲取第三圖片元素對應的文檔對象模型樹結構中的內容數據； 保持第一圖片元素和第三圖片元素的級聯樣式表位置數據和文檔對象模型樹結構數據不變，並將第一圖片元素對應文檔對象模型樹結構中的內容數據與第三圖片元素對應文檔對象模型樹結構中的內容數據互換。
22.根據權利要求15至21中任一項所述的方法，其中，在所述頁面顯示區域之上顯示遮罩層包括: 所述遮罩層覆蓋於以絕對布局方式構建的圖片元素之上； 和/或，所述遮罩層覆蓋於以流式布局方式構建的圖片元素之上。
23.根據權利要求22所述的方法，其中: 所述絕對布局方式構建的圖片元素包括九宮格形式的圖片元素、和/或十二宮格的圖片元素。
【文檔編號】G06F17/30GK103870558SQ201410078815
【公開日】2014年6月18日 申請日期:2012年3月29日 優先權日:2012年3月29日
【發明者】袁波, 張鵬翼, 任寰 申請人:北京奇虎科技有限公司, 奇智軟體（北京）有限公司