CN115658064A - 一种基于svg的分布式云平台网络拓扑绘制方法及系统 - Google Patents
一种基于svg的分布式云平台网络拓扑绘制方法及系统 Download PDFInfo
- Publication number
- CN115658064A CN115658064A CN202211423456.XA CN202211423456A CN115658064A CN 115658064 A CN115658064 A CN 115658064A CN 202211423456 A CN202211423456 A CN 202211423456A CN 115658064 A CN115658064 A CN 115658064A
- Authority
- CN
- China
- Prior art keywords
- network topology
- svg
- cloud platform
- distributed cloud
- node
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Landscapes
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本发明涉及云平台网络拓扑绘制技术领域，具体为一种基于SVG的分布式云平台网络拓扑绘制方法包括以下步骤：创建DOM对象，绑定NG‑X6组件；渲染画布和元素；监听事件，监听鼠标的双击、移入元素等事件，实现文本编辑、元素删除；保存JSON数据；有益效果为：本发明提出的基于SVG的分布式云平台网络拓扑绘制方法及系统通过Angular引入基于SVG的绘图组件，通过自定义图标及相关事件，实现网络设备的展示和连线，最终实现分布式云平台的网络拓扑在线统一管理，解决了云服务提供商对分布式云平台网络拓扑的管理问题，有效的提高了分布式云的运营效率。
Description
技术领域
本发明涉及云平台网络拓扑绘制技术领域，具体为一种基于SVG的分布式云平台网络拓扑绘制方法及系统。
背景技术
云计算是一种新型的计算和服务模式，它基于分布式计算、并行计算、网格计算和虚拟化等技术，通过建立计算资源共享池，以按需付费的方式向用户提供广泛的计算、存储、数据库、分析、应用程序和部署等多种类型的云服务。
现有技术中，分布式云是由云服务提供商管(Cloud Service Provider，CSP)将公有云服务分发到不同的物理位置，由CSP统一负责云服务的运营、治理、更新和演进；SVG是一种图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML(Extensible Markup Language)，由World Wide Web Consortium(W3C)联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言。可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。
但是，现阶段分布式云平台的网络拓扑绘制，一般为各云中心一线人员通过VISIO等工具进行绘制，对外提供图片等格式，无法在中心管理端实现统一绘制管理。
发明内容
本发明的目的在于提供一种基于SVG的分布式云平台网络拓扑绘制方法及系统，以解决上述背景技术中提出的问题。
为实现上述目的，本发明提供如下技术方案：一种基于SVG的分布式云平台网络拓扑绘制方法，该方法包括以下步骤：
创建DOM对象，绑定NG-X6组件；
渲染画布和元素；
监听事件，监听鼠标的双击、移入元素等事件，实现文本编辑、元素删除；
保存JSON数据。
优选的，引入X6组件，通过npm install安装antv x6的安装包，安装完成之后，使用import或require在页面引用Graph组件，将Angular template作为节点渲染，并且将参数传递给模板。
优选的，在页面中通过@ViewChild标签进行引入，通过模板名称注册模板并进行渲染，节点需要定义4个基本属性，其中“x”、“y”为坐标位置，“width”、“height”为宽度和高度，通过Graph的“addNode”方法进行图像渲染，即可在页面显示为图片；
通过SVG实现设备图标绘制，基于属性“width”和“height”定义图标大小，通过属性“viewBox”定义可视窗体大小，图标填充色通过“fill”属性定义，采用16进制编码的方式，属性“d”定义了绘制路径。
优选的，监听方法为重写“on”事件，双击事件为“cell:dbclick”，方法中先获取节点，判断节点是否为“node”然后移除原有节点效果，再通过“addTools”的方式进行编辑；移入元素事件实现为监听“edge:mouseenter”事件，对边类型的节点通过“addTools”方式进行编辑和删除。
优选的，绘制结果保存为半结构化的JSON数据，并存储在数据库中，每个云中心保存一份网络拓扑数据。
一种基于SVG的分布式云平台网络拓扑绘制系统，该系统由创建模块、渲染模块、监听模块以及存储模块构成；
创建模块，用于创建DOM对象，绑定NG-X6组件；
渲染模块，用于渲染画布和元素；
监听模块，用于监听事件，监听鼠标的双击、移入元素等事件，实现文本编辑、元素删除；
存储模块，用于保存JSON数据。
优选的，所述创建模块中，引入X6组件，通过npm install安装antv x6的安装包，安装完成之后，使用import或require在页面引用Graph组件，将Angular template作为节点渲染，并且将参数传递给模板。
优选的，所述渲染模块中，在页面中通过@ViewChild标签进行引入，通过模板名称注册模板并进行渲染，节点需要定义4个基本属性，其中“x”、“y”为坐标位置，“width”、“height”为宽度和高度，通过Graph的“addNode”方法进行图像渲染，即可在页面显示为图片；
通过SVG实现设备图标绘制，基于属性“width”和“height”定义图标大小，通过属性“viewBox”定义可视窗体大小，图标填充色通过“fill”属性定义，采用16进制编码的方式，属性“d”定义了绘制路径。
优选的，所述监听模块中，监听方法为重写“on”事件，双击事件为“cell:dbclick”，方法中先获取节点，判断节点是否为“node”然后移除原有节点效果，再通过“addTools”的方式进行编辑；移入元素事件实现为监听“edge:mouseenter”事件，对边类型的节点通过“addTools”方式进行编辑和删除。
优选的，所述存储模块中，绘制结果保存为半结构化的JSON数据，并存储在数据库中，每个云中心保存一份网络拓扑数据。
与现有技术相比，本发明的有益效果是：
本发明提出的基于SVG的分布式云平台网络拓扑绘制方法及系统通过Angular引入基于SVG的绘图组件，通过自定义图标及相关事件，实现网络设备的展示和连线，最终实现分布式云平台的网络拓扑在线统一管理，解决了云服务提供商对分布式云平台网络拓扑的管理问题，有效的提高了分布式云的运营效率。
附图说明
图1为本发明网络拓扑图生命周期流程图；
图2为本发明SVG渲染实例代码示意图；
图3为本发明实施例提供的SVG图片实现样例图；
图4为本发明实施例提供的最终效果图。
具体实施方式
为了使本发明的目的、技术方案进行清楚、完整地描述，及优点更加清楚明白，以下结合附图对本发明实施例进行进一步详细说明。应当理解，此处所描述的具体实施例是本发明一部分实施例，而不是全部的实施例，仅仅用以解释本发明实施例，并不用于限定本发明实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
实施例一
请参阅图1至图4，本发明提供一种技术方案：一种基于SVG的分布式云平台网络拓扑绘制方法，该方法包括以下步骤：
创建DOM对象，绑定NG-X6组件；
渲染画布和元素；
监听事件，监听鼠标的双击、移入元素等事件，实现文本编辑、元素删除；
保存JSON数据。
本发明前端实现以Angular为基础，通过引入基于SVG的X6组件，实现网络拓扑在线绘制。整个绘图生命周期如图1所示，下面介绍整体实现过程。
项目引入X6组件，通过npm install安装antv x6的安装包，安装完成之后，使用import或require在页面引用Graph组件。将Angular template作为节点渲染，并且将参数传递给模板。
在页面中通过@ViewChild标签进行引入，通过模板名称注册模板并进行渲染，节点需要定义4个基本属性，其中“x”、“y”为坐标位置，“width”、“height”为宽度和高度，通过Graph的“addNode”方法进行图像渲染，即可在页面显示为图片，样例代码如图2所示。
通过SVG实现设备图标绘制，首先基于属性“width”和“height”定义图标大小，通过属性“viewBox”定义可视窗体大小，图标填充色通过“fill”属性定义，采用16进制编码的方式，属性“d”定义了绘制路径，基于这些属性即可实现SVG图像，SVG图标效果样例如图3所示。
通过监听鼠标的双击、移入元素等事件，实现文本编辑、元素删除等操作，监听方法为重写“on”事件，双击事件为“cell:dbclick”，方法中先获取节点，判断节点是否为“node”然后移除原有节点效果，再通过“addTools”的方式进行编辑。移入元素事件实现为监听“edge:mouseenter”事件，对边类型的节点通过“addTools”方式进行编辑和删除。
绘制结果保存为半结构化的JSON数据，并存储在数据库中，每个云中心保存一份网络拓扑数据，基本的数据属性如下表格所示：
在线绘制功能最终实现效果如图4所示，通过提供在线的网络拓扑绘制功能，各云中心可登录系统进行网络拓扑的自行绘制，并由中心管理端进行审核确认，形成网络拓扑的统一管理。
实施例二
一种基于SVG的分布式云平台网络拓扑绘制系统，该系统由创建模块、渲染模块、监听模块以及存储模块构成；
创建模块，用于创建DOM对象，绑定NG-X6组件；引入X6组件，通过npm install安装antv x6的安装包，安装完成之后，使用import或require在页面引用Graph组件，将Angulartemplate作为节点渲染，并且将参数传递给模板；
渲染模块，用于渲染画布和元素；在页面中通过@ViewChild标签进行引入，通过模板名称注册模板并进行渲染，节点需要定义4个基本属性，其中“x”、“y”为坐标位置，“width”、“height”为宽度和高度，通过Graph的“addNode”方法进行图像渲染，即可在页面显示为图片；通过SVG实现设备图标绘制，基于属性“width”和“height”定义图标大小，通过属性“viewBox”定义可视窗体大小，图标填充色通过“fill”属性定义，采用16进制编码的方式，属性“d”定义了绘制路径；
监听模块，用于监听事件，监听鼠标的双击、移入元素等事件，实现文本编辑、元素删除；监听方法为重写“on”事件，双击事件为“cell:dbclick”，方法中先获取节点，判断节点是否为“node”然后移除原有节点效果，再通过“addTools”的方式进行编辑；移入元素事件实现为监听“edge:mouseenter”事件，对边类型的节点通过“addTools”方式进行编辑和删除；
存储模块，用于保存JSON数据；绘制结果保存为半结构化的JSON数据，并存储在数据库中，每个云中心保存一份网络拓扑数据。
尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同物限定。
Claims (10)
1.一种基于SVG的分布式云平台网络拓扑绘制方法，其特征在于：该方法包括以下步骤：
创建DOM对象，绑定NG-X6组件；
渲染画布和元素；
监听事件，监听鼠标的双击、移入元素等事件，实现文本编辑、元素删除；
保存JSON数据。
2.根据权利要求1所述的一种基于SVG的分布式云平台网络拓扑绘制方法，其特征在于：引入X6组件，通过npminstall安装antv x6的安装包，安装完成之后，使用import或require在页面引用Graph组件，将Angular template作为节点渲染，并且将参数传递给模板。
3.根据权利要求2所述的一种基于SVG的分布式云平台网络拓扑绘制方法，其特征在于：在页面中通过@ViewChild标签进行引入，通过模板名称注册模板并进行渲染，节点需要定义4个基本属性，其中“x”、“y”为坐标位置，“width”、“height”为宽度和高度，通过Graph的“addNode”方法进行图像渲染，即可在页面显示为图片；
通过SVG实现设备图标绘制，基于属性“width”和“height”定义图标大小，通过属性“viewBox”定义可视窗体大小，图标填充色通过“fill”属性定义，采用16进制编码的方式，属性“d”定义了绘制路径。
4.根据权利要求1所述的一种基于SVG的分布式云平台网络拓扑绘制方法，其特征在于：监听方法为重写“on”事件，双击事件为“cell:dbclick”，方法中先获取节点，判断节点是否为“node”然后移除原有节点效果，再通过“addTools”的方式进行编辑；移入元素事件实现为监听“edge:mouseenter”事件，对边类型的节点通过“addTools”方式进行编辑和删除。
5.根据权利要求1所述的一种基于SVG的分布式云平台网络拓扑绘制方法，其特征在于：绘制结果保存为半结构化的JSON数据，并存储在数据库中，每个云中心保存一份网络拓扑数据。
6.一种如上述权利要求1-5任意一项所述的基于SVG的分布式云平台网络拓扑绘制系统，其特征在于：该系统由创建模块、渲染模块、监听模块以及存储模块构成；
创建模块，用于创建DOM对象，绑定NG-X6组件；
渲染模块，用于渲染画布和元素；
监听模块，用于监听事件，监听鼠标的双击、移入元素等事件，实现文本编辑、元素删除；
存储模块，用于保存JSON数据。
7.根据权利要求6所述的一种基于SVG的分布式云平台网络拓扑绘制方法及系统，其特征在于：所述创建模块中，引入X6组件，通过npminstall安装antv x6的安装包，安装完成之后，使用import或require在页面引用Graph组件，将Angular template作为节点渲染，并且将参数传递给模板。
8.根据权利要求6所述的一种基于SVG的分布式云平台网络拓扑绘制方法及系统，其特征在于：所述渲染模块中，在页面中通过@ViewChild标签进行引入，通过模板名称注册模板并进行渲染，节点需要定义4个基本属性，其中“x”、“y”为坐标位置，“width”、“height”为宽度和高度，通过Graph的“addNode”方法进行图像渲染，即可在页面显示为图片；
通过SVG实现设备图标绘制，基于属性“width”和“height”定义图标大小，通过属性“viewBox”定义可视窗体大小，图标填充色通过“fill”属性定义，采用16进制编码的方式，属性“d”定义了绘制路径。
9.根据权利要求6所述的一种基于SVG的分布式云平台网络拓扑绘制方法及系统，其特征在于：所述监听模块中，监听方法为重写“on”事件，双击事件为“cell:dbclick”，方法中先获取节点，判断节点是否为“node”然后移除原有节点效果，再通过“addTools”的方式进行编辑；移入元素事件实现为监听“edge:mouseenter”事件，对边类型的节点通过“addTools”方式进行编辑和删除。
10.根据权利要求6所述的一种基于SVG的分布式云平台网络拓扑绘制方法及系统，其特征在于：所述存储模块中，绘制结果保存为半结构化的JSON数据，并存储在数据库中，每个云中心保存一份网络拓扑数据。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211423456.XA CN115658064A (zh) | 2022-11-15 | 2022-11-15 | 一种基于svg的分布式云平台网络拓扑绘制方法及系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211423456.XA CN115658064A (zh) | 2022-11-15 | 2022-11-15 | 一种基于svg的分布式云平台网络拓扑绘制方法及系统 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115658064A true CN115658064A (zh) | 2023-01-31 |
Family
ID=85020482
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211423456.XA Pending CN115658064A (zh) | 2022-11-15 | 2022-11-15 | 一种基于svg的分布式云平台网络拓扑绘制方法及系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115658064A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115793914A (zh) * | 2023-02-08 | 2023-03-14 | 广州市玄武无线科技股份有限公司 | 多轮场景交互流程图生成方法、电子设备及其存储介质 |
-
2022
- 2022-11-15 CN CN202211423456.XA patent/CN115658064A/zh active Pending
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115793914A (zh) * | 2023-02-08 | 2023-03-14 | 广州市玄武无线科技股份有限公司 | 多轮场景交互流程图生成方法、电子设备及其存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8887132B1 (en) | Application runtime environment and framework | |
| US7299411B2 (en) | Providing a presentation engine adapted for use by a constrained resource client device | |
| Leggett et al. | Viewing Dexter with open eyes. | |
| CN104484216B (zh) | 服务接口文档和在线测试工具生成方法、装置 | |
| US20050203764A1 (en) | Software development using visual interfaces | |
| US20070061428A1 (en) | Customization of applications through deployable templates | |
| US20130339924A1 (en) | Gateway data distribution engine | |
| CN109254771B (zh) | 一种监控页面生成方法和装置 | |
| US20080250392A1 (en) | Content management system for computer software with dynamic traceability between code and design documents | |
| CN111427556B (zh) | 基于Web的SysML建模平台 | |
| US20140149837A1 (en) | Spreadsheet Cell Dependency Management | |
| US20020066074A1 (en) | Method and system for developing and executing software applications at an abstract design level | |
| US8117537B1 (en) | Platform-independent method for computer aided schematic drawings | |
| CN115658064A (zh) | 一种基于svg的分布式云平台网络拓扑绘制方法及系统 | |
| CN111813403A (zh) | 大屏数据可视化开发中拖拽组件数据管理的方法和装置 | |
| CN106919406A (zh) | 一种桌面应用组件发布、更新方法及装置 | |
| US20100169333A1 (en) | Document processor | |
| CN112083926A (zh) | 一种Web用户界面生成方法及装置 | |
| US8091016B2 (en) | Visually manipulating instance collections | |
| CN113900650A (zh) | 一种数据处理的方法、装置、电子设备及可读存储介质 | |
| US20060184913A1 (en) | Method, system, and program product for extending java server faces web pages to support multiple devices | |
| CN109614143B (zh) | Ietm浏览器中自动生成故障流程图的开发方法 | |
| CN116432624A (zh) | 一种微服务api文档生成方法、装置、设备、存储介质 | |
| CN110717134A (zh) | 产品说明发布方法、装置、存储介质及电子设备 | |
| CN113255026B (zh) | 一种基于语义信息交换的cad协同设计方法 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |