[發明專利]將DOM元素插入SVG積木工作區的方法及裝置

有效

• 申請號: 202010066244.5
• 申請日: 2020-01-20
• 公開（公告）號: CN111310085B
• 公開（公告）日: 2023-01-10
• 發明（設計）人: 孫悅;李天馳;楊寒飛
• 申請（專利權）人: 深圳點貓科技有限公司
• 主分類號: G06F16/957
• 分類號: G06F16/957;G06F9/451;G06T11/60
• 代理公司: 廣東良馬律師事務所 44395
• 代理人: 廖軍才

1.一種將DOM元素插入SVG積木工作區的方法，其特征在于，包括：

獲取待插入SVG積木工作區的目標DOM元素；

生成用于包裹所述目標DOM元素的目標容器，并將所述目標DOM元素包裹在所述目標容器內；

將包裹所述目標DOM元素后的所述目標容器插入所述SVG積木工作區；

所述將包裹所述目標DOM元素后的所述目標容器插入所述SVG積木工作區，之后包括：

與插入所述SVG積木工作區之后的所述目標DOM元素進行交互操作；

根據所述目標DOM元素在交互操作過程中的數量變化，對包裹所述目標DOM元素后的所述目標容器的容積進行處理；

所述根據所述目標DOM元素在交互操作過程中的數量變化，對包裹所述目標DOM元素后的所述目標容器的容積進行處理，包括：

判斷在交互操作過程中，所述目標容器的容積是否和所述目標DOM元素的數量相匹配；

若不是，則根據所述目標DOM元素的數量對所述目標容器的容積進行更新；

若是，則保持所述目標容器的容積不變；

所述獲取待插入SVG積木工作區的目標DOM元素，包括：

通過React組件生成待插入所述SVG積木工作區的所述目標DOM元素，其中所述React組件通過結合自身獲取的指定ID生成包含所述指定ID的所述目標DOM元素；

所述生成用于包裹所述目標DOM元素的目標容器，包括：

解析傳遞到所述SVG積木工作區的XML數據，所述XML數據由包含所述指定ID的所述目標DOM元素所生成；

通過調用事先已完成注冊的用于生成容器的回調函數，生成所述目標容器，其中所述回調函數在所述SVG積木工作區接收到所述XML數據后完成注冊；

所述獲取待插入SVG積木工作區的目標DOM元素，之后包括：

對所述SVG積木工作區進行初始化渲染，使初始化渲染后的所述SVG積木工作區與所述目標DOM元素相匹配。

2.一種將DOM元素插入SVG積木工作區的裝置，其特征在于，包括：

元素獲取模塊，用于獲取待插入SVG積木工作區的目標DOM元素；

容器生成模塊，用于生成用于包裹所述目標DOM元素的目標容器，并將所述目標DOM元素包裹在所述目標容器內；

容器插入模塊，用于將包裹所述目標DOM元素后的所述目標容器插入所述SVG積木工作區；

所述將包裹所述目標DOM元素后的所述目標容器插入所述SVG積木工作區，之后包括：

與插入所述SVG積木工作區之后的所述目標DOM元素進行交互操作；

根據所述目標DOM元素在交互操作過程中的數量變化，對包裹所述目標DOM元素后的所述目標容器的容積進行處理；

所述根據所述目標DOM元素在交互操作過程中的數量變化，對包裹所述目標DOM元素后的所述目標容器的容積進行處理，包括：

判斷在交互操作過程中，所述目標容器的容積是否和所述目標DOM元素的數量相匹配；

若不是，則根據所述目標DOM元素的數量對所述目標容器的容積進行更新；

若是，則保持所述目標容器的容積不變；

所述獲取待插入SVG積木工作區的目標DOM元素，包括：

通過React組件生成待插入所述SVG積木工作區的所述目標DOM元素，其中所述React組件通過結合自身獲取的指定ID生成包含所述指定ID的所述目標DOM元素；

所述生成用于包裹所述目標DOM元素的目標容器，包括：

解析傳遞到所述SVG積木工作區的XML數據，所述XML數據由包含所述指定ID的所述目標DOM元素所生成；

通過調用事先已完成注冊的用于生成容器的回調函數，生成所述目標容器，其中所述回調函數在所述SVG積木工作區接收到所述XML數據后完成注冊；

所述獲取待插入SVG積木工作區的目標DOM元素，之后包括：

對所述SVG積木工作區進行初始化渲染，使初始化渲染后的所述SVG積木工作區與所述目標DOM元素相匹配。

3.一種計算機可讀存儲介質，其特征在于，其上存儲有計算機程序，所述計算機程序被執行時實現權利要求1所述的將DOM元素插入SVG積木工作區的方法。

4.一種計算機設備，其特征在于，其包括處理器、存儲器及存儲于所述存儲器上并可在所述處理器上運行的計算機程序，所述處理器執行所述計算機程序時實現權利要求1所述的將DOM元素插入SVG積木工作區的方法。