CN113626746A - 一种基于web页面自定义绘图的方法 - Google Patents

一种基于web页面自定义绘图的方法 Download PDF

Info

Publication number
CN113626746A
CN113626746A CN202110868150.4A CN202110868150A CN113626746A CN 113626746 A CN113626746 A CN 113626746A CN 202110868150 A CN202110868150 A CN 202110868150A CN 113626746 A CN113626746 A CN 113626746A
Authority
CN
China
Prior art keywords
canvas
svg
web page
basic
customizing
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
Application number
CN202110868150.4A
Other languages
English (en)
Inventor
贺茂林
高传集
董玉全
徐士强
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Inspur Cloud Information Technology Co Ltd
Original Assignee
Inspur Cloud Information Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Inspur Cloud Information Technology Co Ltd filed Critical Inspur Cloud Information Technology Co Ltd
Priority to CN202110868150.4A priority Critical patent/CN113626746A/zh
Publication of CN113626746A publication Critical patent/CN113626746A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486—Drag-and-drop
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Software Systems (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Processing Or Creating Images (AREA)

Abstract

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

Description

一种基于web页面自定义绘图的方法
技术领域
本发明涉及网页制作技术领域，具体提供一种基于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画布中间区域时，添加编辑输入框，运行用户更改元素的文字内容。
所述方法的实现还包括内容如下：
点击svg画布中元素时，给点击的元素添加外层矩形边线，给矩形的四个边角添加鼠标拖动事件，通过鼠标拖动对元素的大小进行修改；
给svg画布中的元素添加鼠标右键点击功能，右键点击弹窗选择复制、删除、粘贴等功能。
所述WEB页面的设置还包括：
元素编辑模块，包括颜色、字体、边线、内容模块；
当点击画布中的元素时，元素的样式及内容信息，加载到对应模块中，例如将元素内容加载到text输入框内、边线信息加载到边线模块中；
元素编辑模块信息修改时，修改后的信息加载到画布中对应的元素上，如修改颜色模块的信息时，将对应的颜色直接加载到元素上。
所述方法编辑输出的数据以json数据形式保存，以json文件的形式导出，以便用户下次编辑；
所述svg画布的信息可根据用户的选择，导出为图片或者PDF格式以供使用。
与现有技术相比，本发明一种基于web页面自定义绘图的方法具有以下突出的有益效果：
本发明方法操作简单、部署方便，用户可以轻松快捷绘制自己需要的图形，同时本发明方法是基于html、css、js的web服务，占用资源少，用户可以直接在本机打开编辑，在保证了机密性安全性的同时减少了对资源的使用，可以更好的完成工作。本发明可预先设计要展示SVG的模板，直接导入到画布中进行加工编辑。
附图说明
图1是本发明方法功能设计示意图。
具体实施方式
下面将结合附图和实施例，对本发明作进一步详细说明。
一种基于web页面自定义绘图的方法，所述方法的实现过程包括步骤如下：
S1、前期基础绘图单元准备，使用Illustrator或者Inkscape来创建基础SVG图像，如矩形、梯形、三角形、多边形等形状单元及实线、虚线、曲线、箭头等。
S2、准备绘制UML时常使用的基础图片(使用透明背景的png图片以便后续修改)，如人物图、服务器图、交换机、路由器等等。
S3、规划整体web页面布局，在页面左侧放置准备好的基础绘图单元并添加拖拽事件，在中间添加svg画布，在页面右侧添加对画布中基础单元编辑修改的模块。
S4、在左侧按分类添加基础模块，将准备好的svg和透明png等比例缩小分别加载到各个模块中，给每一个基础单元添加允许拖拽事件。
S5、初始化画布,使用svg绘制中间的画布，同时给画布添加允许拖拽及拖拽完成后放下的事件，使用svg的原因是svg画布中的每个元素都是单独存在的，方便后续对其进行操作。
S6、给画布添加拖拽完成事件，拖拽完成后给加载到画布中的元素添加点击、右键、边框放大缩小、元素内容修改等事件。
S7、对加载到画布中的元素添加点击边框中间区域事件，点击后自动添加连线，在鼠标拖动过程中绘制带箭头实线，直至再次点击同一个或者另外一个在画布中的元素边框时结束。
S8、点击画布中间区域时，添加编辑输入框，运行用户更改元素内文字内容。
S9、点击画布中元素时，给元素添加外层矩形边线，给矩形的四个边角添加鼠标拖动事件，鼠标拖动时对元素的大小进行修改。
S10、给画布中的元素添加鼠标右键点击功能，右键点击弹窗选择复制、删除、粘贴等功能。
S11、在页面右侧添加对画布中间的元素的编辑功能，如颜色、字体、边线、内容等。
S12、点击画布中的元素时，右侧对应加载点击元素的样式及内容信息，将相应信息加载到对应模块中，例如将元素内容加载到text输入框内、边线信息加载到边线模块中。
S13、修改右侧信息时，动态将修改后的信息加载到画布中对应的元素上，如修改颜色时将对应的颜色直接加载到元素上。
S14、用户绘制完成后点击保存按钮时，弹出弹窗给用户选择保存文件格式。
S15、用户选择JSON格式时，使用基于node服务的svgToJson插件将整个画布信息导出。
S16、用户选择图片格式时，使用html2canvas插件将整个画布转为png图片，以便用户直接使用。
S17、用户选择PDF格式时，使用JSPDF插件将整个画布转为PDF文件，以便用户直接使用。
S19、设置导入按钮，用户可以直接将导出的JSON文件上传至服务中，服务使用D3.js将json信息加载成svg展示在画布中，以便用户进行编辑。
以上所述的实施例，只是本发明较优选的具体实施方式，本领域的技术人员在本发明技术方案范围内进行的通常变化和替换都应包含在本发明的保护范围内。

Claims (10)

1.一种基于web页面自定义绘图的方法，其特征在于，所述web页面布局包括：
基础绘图单元；
svg画布；
所述方法通过svg技术内置所述基础绘图单元，通过拖拽形式在所述svg画布上对所述基础绘图单元进行编辑，修改其位置及样式信息。
2.根据权利要求1所述的一种基于web页面自定义绘图的方法，其特征在于，所述基础绘图单元包括：
基础SVG图像，
绘制UML时使用的基础图片。
3.根据权利要求1所述的一种基于web页面自定义绘图的方法，其特征在于，
所述web页面设置有若干基础模块，所述基础绘图单元等比例缩小后分别加载到各个基础模块中，所述基础绘图单元添加允许拖拽事件。
4.根据权利要求1、2或3所述的一种基于web页面自定义绘图的方法，所述svg画布添加允许拖拽事件及拖拽完成后放下事件。
5.根据权利要求4所述的一种基于web页面自定义绘图的方法，其特征在于，所述svg画布添加拖拽完成事件，拖拽完成后，给加载到画布中的元素添加点击、右键、边框放大缩小、元素内容修改事件。
6.根据权利要求5所述的一种基于web页面自定义绘图的方法，其特征在于，所述方法的实现还包括内容如下：
对加载到svg画布中的元素添加点击边框中间区域事件，点击后自动添加连线，在鼠标拖动过程中绘制带箭头实线，直至再次点击同一个或者另外一个在画布中的元素边框时结束。
7.根据权利要求5所述的一种基于web页面自定义绘图的方法，其特征在于，所述svg画布的设置包括内容如下：
点击svg画布中间区域时，添加编辑输入框，运行用户更改元素的文字内容。
8.根据权利要求4所述的一种基于web页面自定义绘图的方法，其特征在于，所述方法的实现还包括内容如下：
点击svg画布中元素时，给点击的元素添加外层矩形边线，给矩形的四个边角添加鼠标拖动事件，通过鼠标拖动对元素的大小进行修改；
给svg画布中的元素添加鼠标右键点击功能，右键点击弹窗选择复制、删除、粘贴等功能。
9.根据权利要求8所述的一种基于web页面自定义绘图的方法，其特征在于，所述WEB页面的设置还包括：
元素编辑模块，包括颜色、字体、边线、内容模块；
当点击画布中的元素时，元素的样式及内容信息，加载到对应模块中；
元素编辑模块信息修改时，修改后的信息加载到画布中对应的元素上。
10.根据权利要求9所述的一种基于web页面自定义绘图的方法，其特征在于，
所述方法编辑输出的数据以json数据形式保存，以json文件的形式导；
所述svg画布的信息可根据用户的选择，导出为图片或者PDF格式以供使用。
CN202110868150.4A 2021-07-30 2021-07-30 一种基于web页面自定义绘图的方法 Pending CN113626746A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110868150.4A CN113626746A (zh) 2021-07-30 2021-07-30 一种基于web页面自定义绘图的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110868150.4A CN113626746A (zh) 2021-07-30 2021-07-30 一种基于web页面自定义绘图的方法

Publications (1)

Publication Number Publication Date
CN113626746A true CN113626746A (zh) 2021-11-09

Family

ID=78381787

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110868150.4A Pending CN113626746A (zh) 2021-07-30 2021-07-30 一种基于web页面自定义绘图的方法

Country Status (1)

Country Link
CN (1) CN113626746A (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113934876A (zh) * 2021-12-21 2022-01-14 成都泰盟软件有限公司 一种基于Web的作业批改方法、装置及系统
CN114461324A (zh) * 2022-01-27 2022-05-10 联信弘方(北京)科技股份有限公司 绘图工具、基于绘图工具的图形生成方法、装置、设备及介质

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113934876A (zh) * 2021-12-21 2022-01-14 成都泰盟软件有限公司 一种基于Web的作业批改方法、装置及系统
CN114461324A (zh) * 2022-01-27 2022-05-10 联信弘方(北京)科技股份有限公司 绘图工具、基于绘图工具的图形生成方法、装置、设备及介质
CN114461324B (zh) * 2022-01-27 2022-12-13 联信弘方(北京)科技股份有限公司 绘图工具、基于绘图工具的图形生成方法、装置、设备及介质

Similar Documents

Publication Publication Date Title
CN109801347B (zh) 一种可编辑图像模板的生成方法、装置、设备和介质
CN111506310B (zh) 生成多平台样式的方法、装置、设备及存储介质
EP1920350B1 (en) Markup based extensibility for user interfaces
US7124398B2 (en) Rapid GUI refacing of a legacy application
JP2006050445A (ja) レイアウト調整方法及び装置並びにプログラム
JP2005339564A (ja) カラー化されたテンプレートプレビュー
CN113626746A (zh) 一种基于web页面自定义绘图的方法
CN110096275B (zh) 一种页面处理方法及装置
CN105404512B (zh) 一种应用程序窗口界面更改方法及装置
CN112364496B (zh) 基于html5和vue技术的航电仿真面板生成系统
CN113391808A (zh) 页面的配置方法、装置及电子设备
US20240160413A1 (en) Application Development Platform, Micro-program Generation Method, and Device and Storage Medium
CN115495069A (zh) 基于模型驱动的煤炭工业软件流程实现方法、装置及设备
US20100269036A1 (en) System and method for designing and generating online stationery
CN117055987A (zh) 网页显示方法、装置、电子设备及计算机可读存储介质
US20030154462A1 (en) Software maintenance material generation apparatus and generation program therefor
Signer et al. Advanced authoring of paper-digital systems: Introducing templates and variable content elements for interactive paper publishing
US5956033A (en) Document control interface and method for graphical message document software
CN112269960B (zh) 基于关联报表的网页更新方法、系统、设备及存储介质
CN114461324B (zh) 绘图工具、基于绘图工具的图形生成方法、装置、设备及介质
Harder Interactive Infographics with SVG
CN117032666A (zh) 基于编辑器的页面编辑方法、装置、终端设备及存储介质
CN112269961A (zh) 基于关联报表的网页生成方法、系统、设备及存储介质
EP4374286A1 (en) Systems and methods for editing electronic documents
CN117075892A (zh) 可视化页面生成方法以及可视化模板编辑器

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