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

有效

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

本發明公開了一種將DOM元素插入SVG積木工作區的方法及裝置，其中該方法包括：獲取待插入SVG積木工作區的目標DOM元素；生成用于包裹所述目標DOM元素的目標容器，并將所述目標DOM元素包裹在所述目標容器內；將包裹所述目標DOM元素后的所述目標容器插入所述SVG積木工作區。本發明可實現將DOM元素輕易插入所述SVG積木工作區，并能享受到React框架帶來的聲明式體驗。

技術領域

本發明涉及網絡編程應用技術領域，特別是涉及一種將DOM元素插入SVG積木工作區的方法及裝置。

背景技術

SVG是指可縮放矢量圖形，是基于可擴展標記語言(標準通用標記語言的子集)，用于描述二維矢量圖形的一種圖形格式，它由萬維網聯盟制定，是一個開放標準。DOM是文檔對象模型(Document Object Model，簡稱DOM)，是處理可擴展標志語言的標準編程接口。在網頁上，組織頁面(或文檔)的對象被組織在一個樹形結構中，用來表示文檔中對象的標準模型就稱為DOM。DOM可以以一種獨立于平臺和語言的方式訪問和修改一個文檔的內容和結構，換句話說，這是表示和處理一個HTML或XML(可擴展標記語言，標準通用標記語言的子集，是一種用于標記電子文件使其具有結構性的標記語言)文檔的常用方法。另外，DOM的設計是以對象管理組織(OMG)的規約為基礎的，因此可以用于任何編程語言。目前，WEB網頁要求SVG積木工作區與DOM元素之間的交互越來越頻繁與復雜，很多時候開發者為了在SVG積木工作區內插入DOM元素不得不使用比較繁瑣的方法。

發明內容

本發明實施例提供一種將DOM元素插入SVG積木工作區的方法及裝置，以解決現有技術中的以下問題：WEB網頁要求SVG積木工作區與DOM元素之間的交互越來越頻繁與復雜，很多時候開發者為了在SVG積木工作區內插入DOM元素不得不使用比較繁瑣的方法。

為解決上述技術問題，本發明實施例采用的第一技術方案如下：

一種將DOM元素插入SVG積木工作區的方法，其包括：獲取待插入SVG積木工作區的目標DOM元素；生成用于包裹所述目標DOM元素的目標容器，并將所述目標DOM元素包裹在所述目標容器內；將包裹所述目標DOM元素后的所述目標容器插入所述SVG積木工作區。

可選地，所述將包裹所述目標DOM元素后的所述目標容器插入所述SVG積木工作區，之后包括：與插入所述SVG積木工作區之后的所述目標DOM元素進行交互操作；根據所述目標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元素相匹配。

為解決上述技術問題，本發明實施例采用的第二技術方案如下：