[發(fā)明專利]一種基于H5的多層級(jí)窗口快速響應(yīng)的方法及存儲(chǔ)介質(zhì)

在審

• 申請(qǐng)?zhí)枺?/td>: 202210797879.1
• 申請(qǐng)日: 2022-07-06
• 公開(kāi)（公告）號(hào): CN115167963A
• 公開(kāi)（公告）日: 2022-10-11
• 發(fā)明（設(shè)計(jì)）人: 張鵬;陳添金;鄧振琰;鄭涵;陳桂斌;胡慧研;黃建雄;曾海洪;王艷彬;陳愛(ài)民
• 申請(qǐng)（專利權(quán)）人: 福建星網(wǎng)物聯(lián)信息系統(tǒng)有限公司
• 主分類號(hào): G06F9/451
• 分類號(hào): G06F9/451
• 代理公司: 福建知與行律師事務(wù)所 35248
• 代理人: 朱軍

一種基于H5的多層級(jí)窗口快速響應(yīng)的方法，包括如下步驟，步驟101，識(shí)別每個(gè)可視化頁(yè)面中的元素；步驟102，為每個(gè)元素，添加內(nèi)容窗口，所述內(nèi)容窗口用于展示元素內(nèi)容，所述內(nèi)容窗口的邊框?yàn)榉峭该鞯目梢暊顟B(tài)；步驟103，為每個(gè)元素，添加移動(dòng)窗口，所述移動(dòng)窗口用于獨(dú)立于所述內(nèi)容窗口進(jìn)行移動(dòng)，所述移動(dòng)窗口為透明的非可視狀態(tài)。將各元素設(shè)計(jì)搭配對(duì)應(yīng)的三個(gè)窗口，能夠?qū)⒃O(shè)計(jì)過(guò)程中可能用到的顯示、移動(dòng)和縮放功能通過(guò)三個(gè)窗口分別進(jìn)行響應(yīng)，從而提升操作的響應(yīng)速度并降低系統(tǒng)的運(yùn)算資源占用。

技術(shù)領(lǐng)域

本方案涉及H5應(yīng)用領(lǐng)域，尤其涉及一種H5的多層級(jí)窗口快速響應(yīng)的方法。

背景技術(shù)

隨著web應(yīng)用的不斷發(fā)展，H5技術(shù)漸漸嶄露頭角。隨著H5技術(shù)的興起，為了快速開(kāi)發(fā)界面，需要H5可視化頁(yè)面自定義拖拽布局功能。

現(xiàn)有實(shí)現(xiàn)H5可視化頁(yè)面自定義拖拽布局的技術(shù)有很多種，目前廣泛運(yùn)用在可視化頁(yè)面自定義拖拽布局的實(shí)現(xiàn)主要是基于H5的拖拽API接口直接拖拽元素來(lái)實(shí)現(xiàn)。上述通過(guò)h5的拖拽API接口直接拖拽元素的方式，在拖動(dòng)的元素內(nèi)容較多情況下，十分損耗性能，會(huì)造成界面拖動(dòng)卡頓不流暢的情況，響應(yīng)速率不佳的情況。因此，目前的現(xiàn)實(shí)情況是可視化拖拽頁(yè)面只能在少量元素內(nèi)容下展現(xiàn)較好的體驗(yàn)，在元素內(nèi)容較多情況下并不能帶來(lái)優(yōu)越的用戶體驗(yàn)。直接拖拽元素內(nèi)容生成可視化頁(yè)面的方式，除了性能損耗比較多，會(huì)造成使用的內(nèi)存較大，在一些較差的設(shè)備上，容易出現(xiàn)內(nèi)存崩潰的情況。同時(shí)，在多次拖拽移動(dòng)或者縮放操作下，界面需要實(shí)時(shí)的為拖拽元素的行為作出響應(yīng)，造成性能上極度浪費(fèi)。

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

為此，需要提供一種H5的多層級(jí)窗口快速響應(yīng)的方法，能夠節(jié)省計(jì)算量，提升拖拽元素的資源利用率。

為實(shí)現(xiàn)上述目的，發(fā)明人提供了一種基于H5的多層級(jí)窗口快速響應(yīng)的方法，包括如下步驟，步驟101，識(shí)別每個(gè)可視化頁(yè)面中的元素；

步驟102，為每個(gè)元素，添加內(nèi)容窗口，所述內(nèi)容窗口用于展示元素內(nèi)容，所述內(nèi)容窗口的邊框?yàn)榉峭该鞯目梢暊顟B(tài)；

步驟103，為每個(gè)元素，添加移動(dòng)窗口，所述移動(dòng)窗口用于獨(dú)立于所述內(nèi)容窗口進(jìn)行移動(dòng)，所述移動(dòng)窗口為透明的非可視狀態(tài)；

步驟104，為每個(gè)元素，添加縮放窗口，所述縮放窗口用于獨(dú)立于所述內(nèi)容窗口進(jìn)行縮放操作，所述縮放窗口為透明的非可視狀態(tài)。

具體地，還包括步驟，識(shí)別用戶操作，當(dāng)識(shí)別為拖拽移動(dòng)操作時(shí)，響應(yīng)所述拖拽移動(dòng)操作得到移動(dòng)窗口的移動(dòng)后坐標(biāo)位置，將所述內(nèi)容窗口的內(nèi)容和所述縮放窗口適應(yīng)所述移動(dòng)后坐標(biāo)位置。

具體地，當(dāng)識(shí)別為拖拽移動(dòng)操作時(shí)，移動(dòng)窗口的邊框由透明轉(zhuǎn)為具有顏色的可視狀態(tài)，并響應(yīng)所述拖拽移動(dòng)操作得到移動(dòng)后坐標(biāo)位置，再將移動(dòng)窗口的邊框由具有顏色的可視狀態(tài)轉(zhuǎn)為透明的非可視窗口狀態(tài)。

具體地，當(dāng)用戶選中移動(dòng)窗口時(shí)，將所述縮放窗口由透明轉(zhuǎn)為具有顏色的可視狀態(tài)，同一時(shí)刻最多只有一個(gè)元素的縮放窗口為具有顏色的可視狀態(tài)。

具體地，還包括步驟，識(shí)別用戶操作，當(dāng)識(shí)別為縮放操作時(shí)，響應(yīng)所述縮放操作得到縮放窗口的縮放后坐標(biāo)位置，將所述內(nèi)容窗口的內(nèi)容和所述移動(dòng)窗口適應(yīng)所述縮放后坐標(biāo)位置。

具體地，當(dāng)識(shí)別為縮放操作時(shí)，將縮放窗口的邊框由透明轉(zhuǎn)為具有顏色的可視狀態(tài)，并響應(yīng)所述縮放操作得到縮放后坐標(biāo)位置，將第三可視化窗口的邊框由具有顏色的可視狀態(tài)轉(zhuǎn)為透明的非可視狀態(tài)縮放窗口。

具體地，所述縮放窗口包括邊框及邊框上的縮放事件監(jiān)聽(tīng)功能。

具體地，所述內(nèi)容窗口設(shè)置于最底層、所述移動(dòng)窗口設(shè)置于中層、所述縮放窗口設(shè)置于最上層。

一種基于H5的多層級(jí)窗口快速響應(yīng)的存儲(chǔ)介質(zhì)，存儲(chǔ)有計(jì)算機(jī)程序，所述計(jì)算機(jī)程序在被執(zhí)行時(shí)用于執(zhí)行包括如下步驟，步驟101，識(shí)別每個(gè)可視化頁(yè)面中的元素；