将DOM元素插入SVG积木工作区的方法及装置制造方法及图纸

本发明专利技术公开了一种将DOM元素插入SVG积木工作区的方法及装置，其中该方法包括：获取待插入SVG积木工作区的目标DOM元素；生成用于包裹所述目标DOM元素的目标容器，并将所述目标DOM元素包裹在所述目标容器内；将包裹所述目标DOM元素后的所述目标容器插入所述SVG积木工作区。本发明专利技术可实现将DOM元素轻易插入所述SVG积木工作区，并能享受到React框架带来的声明式体验。

Method and device of inserting DOM element into SVG building block work area

【技术实现步骤摘要】
将DOM元素插入SVG积木工作区的方法及装置
本专利技术涉及网络编程应用
，特别是涉及一种将DOM元素插入SVG积木工作区的方法及装置。
技术介绍
SVG是指可缩放矢量图形，是基于可扩展标记语言(标准通用标记语言的子集)，用于描述二维矢量图形的一种图形格式，它由万维网联盟制定，是一个开放标准。DOM是文档对象模型(DocumentObjectModel，简称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元素相匹配。为解决上述技术问题，本专利技术实施例采用的第二技术方案如下：一种将DOM元素插入SVG积木工作区的装置，其包括：元素获取模块，用于获取待插入SVG积木工作区的目标DOM元素；容器生成模块，用于生成用于包裹所述目标DOM元素的目标容器，并将所述目标DOM元素包裹在所述目标容器内；容器插入模块，用于将包裹所述目标DOM元素后的所述目标容器插入所述SVG积木工作区。为解决上述技术问题，本专利技术实施例采用的第三技术方案如下：一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被执行时实现如上述的将DOM元素插入SVG积木工作区的方法。为解决上述技术问题，本专利技术实施例采用的第四技术方案如下：一种计算机设备，其包括处理器、存储器及存储于所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述的将DOM元素插入SVG积木工作区的方法。本专利技术实施例的有益效果是：区别于现有技术的情况，本专利技术实施例通过获取待插入SVG积木工作区的目标DOM元素；生成用于包裹所述目标DOM元素的目标容器，并将所述目标DOM元素包裹在所述目标容器内；将包裹所述目标DOM元素后的所述目标容器插入所述SVG积木工作区，可实现将DOM元素轻易插入所述SVG积木工作区，并能享受到React框架带来的声明式体验。附图说明图1是本专利技术实施例一的将DOM元素插入SVG积木工作区的方法一实施方式的实施流程图；图2是本专利技术实施例二的将DOM元素插入SVG积木工作区的装置一实施方式的部分结构框架图；图3是本专利技术实施例三的计算机可读存储介质一实施方式的部分结构框架图；图4是本专利技术实施例四的计算机设备一实施方式的部分结构框架图。具体实施方式实施例一请参阅图1，图1是本专利技术实施例的将DOM元素插入SVG积木工作区的方法的实施流程图，结合图1可以得到，本专利技术的一种将DOM元素插入SVG积木工作区的方法，包括：步骤S101：获取待插入SVG积木工作区的目标DOM元素。步骤S102：生成用于包裹所述目标DOM元素的目标容器，并将所述目标DOM元素包裹在所述目标容器内。其中，所述目标容器可选为foreignObject容器。步骤S103：将包裹所述目标DOM元素后的所述目标容器插入所述SVG积木工作区。在本实施例中，可选地，所述将包裹所述目标DOM元素后的所述目标容器插入所述SVG积木工作区，之后包括：第一，与插入所述SVG积木工作区之后的所述目标DOM元素进行交互操作。其中，交互操作包括添加或者删除所述目标DOM元素中的一些元素，这会影响到所述目标DOM元素的数量(大小)，进而会影响到所述目标DOM元素和所述目标容器的匹配。第二，根据所述目标DOM元素在交互操作过程中的数量变化，对包裹所述目标DOM元素后的所述目标容器的容积进行处理。在本实施例中，可选地，所述根据所述目标DOM元素在交互操作过程中的数量变化，对包裹所述目标DOM元素后的所述目标容器的容积进行处理，包括：第一，判断在交互操作过程中，所述目标容器的容积是否和所述目标DOM元素的数量相匹配。第二，若所述目标容器的容积不和所述目标DOM元素的数量相匹配，则根据所述目标DOM元素的数量对所述目标容器的容积进行更新，即通过调整所述目标容器的宽和高进行容积更新。具体地，通过React组件生命周期函数的getSnapshotBeforeUpdate、co本文档来自技高网...

【技术保护点】
1.一种将DOM元素插入SVG积木工作区的方法，其特征在于，包括：/n获取待插入SVG积木工作区的目标DOM元素；/n生成用于包裹所述目标DOM元素的目标容器，并将所述目标DOM元素包裹在所述目标容器内；/n将包裹所述目标DOM元素后的所述目标容器插入所述SVG积木工作区。/n

【技术特征摘要】
1.一种将DOM元素插入SVG积木工作区的方法，其特征在于，包括：
获取待插入SVG积木工作区的目标DOM元素；
生成用于包裹所述目标DOM元素的目标容器，并将所述目标DOM元素包裹在所述目标容器内；
将包裹所述目标DOM元素后的所述目标容器插入所述SVG积木工作区。


2.根据权利要求1所述的将DOM元素插入SVG积木工作区的方法，其特征在于，所述将包裹所述目标DOM元素后的所述目标容器插入所述SVG积木工作区，之后包括：
与插入所述SVG积木工作区之后的所述目标DOM元素进行交互操作；
根据所述目标DOM元素在交互操作过程中的数量变化，对包裹所述目标DOM元素后的所述目标容器的容积进行处理。


3.根据权利要求2所述的将DOM元素插入SVG积木工作区的方法，其特征在于，所述根据所述目标DOM元素在交互操作过程中的数量变化，对包裹所述目标DOM元素后的所述目标容器的容积进行处理，包括：
判断在交互操作过程中，所述目标容器的容积是否和所述目标DOM元素的数量相匹配；
若不是，则根据所述目标DOM元素的数量对所述目标容器的容积进行更新。


4.根据权利要求1所述的将DOM元素插入SVG积木工作区的方法，其特征在于，所述目标容器的容积是否和所述目标DOM元素的数量相匹配，则保持所述目标容器的容积不变。


5.根据权利要求1所述的将DOM元素插入SVG积木工作区的方法，其特征在于，所述获取待插入SVG积木工作区的目标DOM元素，包括：
通过React组件生成待插入所述SVG积木工作区的所述目标DOM元素，其中所述React组件通过结合自身获取的指定I...

【专利技术属性】
技术研发人员：孙悦，李天驰，杨寒飞，
申请(专利权)人：深圳点猫科技有限公司，
类型：发明
国别省市：广东;44