[发明专利]一种基于web页面自定义绘图的方法

说明书

本发明公开了一种基于web页面自定义绘图的方法，所述web页面布局包括：基础绘图单元、svg画布；所述方法通过svg技术内置所述基础绘图单元，通过拖拽形式在所述svg画布上对所述基础绘图单元进行编辑，修改其位置及样式等信息。本发明方法操作简单、部署方便，用户可以轻松快捷绘制自己需要的图形，同时本发明方法是基于html、css、js的web服务，占用资源少，用户可以直接在本机打开编辑，在保证了机密性安全性的同时减少了对资源的使用，可以更好的完成工作。本发明可预先设计要展示SVG的模板，直接导入到画布中进行加工编辑。

技术领域

本发明涉及网页制作技术领域，具体提供一种基于web页面自定义绘图的方法。

背景技术

在软件开发过程中，从初始的需求分析、概要设计到软件开发再到软件测试过程中涉及到大量的流程图、用例图、类图等。工作中绘制这些图形时常用的工具有MicrosoftVisio及在线的drawio，但是Microsoft Visio安装包巨大，本地使用Microsoft Visio的时候占用系统资源较大，平时运行时经常卡死且样式主题老旧，使用时不可以同时做其他工作，否则会有卡死的可能性，导致之前辛辛苦苦绘制的图形丢失。

目前，在线绘图工具很多，但是软件开发工作涉及公司保密信息，而在线绘图工具的保密性及安全性得不到保证。

发明内容

如何快速构建web页面版绘图，并且可以轻松编辑和使用成为了一个重要的技术问题。

本发明的技术任务是针对上述存在的问题，提供一种基于web页面自定义绘图的方法，主要解决IT工作者在web页面上的绘制流程图、组织架构图、思维导图及UML图等问题。

为实现上述目的，本发明提供了如下技术方案：

一种基于web页面自定义绘图的方法，其特征在于，所述web页面布局包括：

基础绘图单元；

svg画布；

所述方法通过svg技术内置所述基础绘图单元，通过拖拽形式在所述svg画布上对所述基础绘图单元进行编辑，修改其位置及样式等信息。

SVG是一种XML标记语言，它既可以单独保存，以.svg后缀的文件在浏览器中打开显示，也支持建立SVG标记直接嵌入在网页中显示，同时svg支持事件处理器，所以很适合作为基础模块单元。

所述基础绘图单元包括：

基础SVG图像，如矩形、梯形、三角形、多边形等形状单元及实线、虚线、曲线、箭头等

绘制UML时使用的基础图片，透明背景的png图片。

所述web页面设置有若干基础模块，所述基础绘图单元等比例缩小后分别加载到各个基础模块中，所述基础绘图单元添加允许拖拽事件。

所述svg画布添加允许拖拽事件及拖拽完成后放下事件。

所述svg画布添加拖拽完成事件，拖拽完成后，给加载到画布中的元素添加点击、右键、边框放大缩小、元素内容修改等事件。

所述方法的实现还包括内容如下：

对加载到svg画布中的元素添加点击边框中间区域事件，点击后自动添加连线，在鼠标拖动过程中绘制带箭头实线，直至再次点击同一个或者另外一个在画布中的元素边框时结束。

所述svg画布的设置包括内容如下：

点击svg画布中间区域时，添加编辑输入框，运行用户更改元素的文字内容。

所述方法的实现还包括内容如下：