[發明專利]一種結合絕對定位和流式定位的畫布定位方法

在審

• 申請號: 202310799674.1
• 申請日: 2023-07-03
• 公開（公告）號: CN116540996A
• 公開（公告）日: 2023-08-04
• 發明（設計）人: 謝云光;戴文艷;楊斌;黃彥予;侯建洪;葉威鑫;劉駿
• 申請（專利權）人: 長威信息科技發展股份有限公司
• 主分類號: G06F8/34
• 分類號: G06F8/34;G06F8/38;G06F3/0486
• 代理公司: 福建昇云知識產權代理有限公司 35305
• 代理人: 王丹

本發明涉及一種結合絕對定位和流式定位的畫布定位方法，包括以下步驟：將應用設計器的畫布設置為絕對定位position：absolute；在畫布中開辟一個區域專門作為流式布局空間，并通過應用設計器內置的容器組件關聯流式片段；通過在絕對畫布中拖拽容器組件到指定區域，并通過容器組件對指定的流式片段進行載入渲染。本發明實現了絕對定位和流式布局兩種方式兼容使用，能有效提高應用設計的效率。

技術領域

本發明涉及計算機技術領域，具體涉及一種結合絕對定位和流式定位的畫布定位方法。

背景技術

應用設計器是物聯網云平臺中幫助用戶快速開發應用的工具,實現設備數據可視化。而現有的應用設計器頁面設計時，對畫布的定位方式一般采用以下兩種實現方案：1.是絕對定位，支持用戶拖拽控件到任意位置；?2.是流式布局，支持用戶拖拽控件依照流式布局方式進行排列；

這兩種方式，均存在局限，采用絕對定位時，當有業務判斷需要隱藏某個組件時，布局不會重新計算，會出現隱藏的組件區域空白，同時也無法滿足根據內容自適應撐開組件高度；而采用流式布局則無法支持用戶任意擺放元素到任意位置，使用較為復雜，需要有布局設計能力。

發明內容

有鑒于此，本發明的目的在于提供一種結合絕對定位和流式定位的畫布定位方法，實現絕對定位和流式布局兩種方式兼容使用，能有效提高應用設計的效率。

為實現上述目的，本發明采用如下技術方案：

一種結合絕對定位和流式定位的畫布定位方法，包括以下步驟：

將應用設計器的畫布設置為絕對定位position：absolute；

在畫布中開辟一個區域專門作為流式布局空間，并通過應用設計器內置的容器組件關聯流式片段；

通過在絕對畫布中拖拽容器組件到指定區域，并通過容器組件對指定的流式片段進行載入渲染。

進一步的，所述畫布設置父節點為position:?relative,子節點設置為position:absolute。

進一步的，所述流式布局空間通過采用element-plus布局容器組件來實現頁面的流式布局，具體如下：

通過el-row將頁面一行分成24份來渲染，在el-row下嵌套了el-col?通過設置el-colspan?屬性將元素按照比例來渲染；

在容器組件中，將容器組件父節點設置position：absolute作為絕對定位進行對容器組件任意位置的拖拽，將其子節點采用el-row組件進行渲染，然后通過指定的片段配置項，將片段內的控件信息用el-col標簽渲染到的el-row標簽下。

進一步的，遍歷讀取當前應用的所有的片段信息并以樹形式展示給用戶選擇，用戶通過選擇完對應的片段，將片段的配置信息進行讀取，并通過容器組件按照片段的類型對片段內容進行渲染。

一種結合絕對定位和流式定位的畫布定位系統，包括處理器、存儲器、通信接口和通信總線，所述處理器、所述存儲器和所述通信接口通過所述通信總線完成相互間的通信；所述存儲器用于存放至少一可執行指令，所述可執行指令使所述處理器執行如下操作：

將應用設計器的畫布設置為絕對定位position：absolute；

在畫布中開辟一個區域專門作為流式布局空間，并通過應用設計器內置的容器組件關聯流式片段；

通過在絕對畫布中拖拽容器組件到指定區域，并通過容器組件對指定的流式片段進行載入渲染。

一種計算機存儲介質，所述計算機存儲介質存儲有多條指令，所述指令適于由處理器加載并執行如上所述的方法步驟。

本發明與現有技術相比具有以下有益效果：