CN114461324A

CN114461324A - 绘图工具、基于绘图工具的图形生成方法、装置、设备及介质

Info

Publication number: CN114461324A
Application number: CN202210102624.9A
Authority: CN
Inventors: 刘金山
Original assignee: Lianxin Hongfang Beijing Technology Co ltd
Current assignee: Lianxin Hongfang Beijing Technology Co ltd
Priority date: 2022-01-27
Filing date: 2022-01-27
Publication date: 2022-05-10
Anticipated expiration: 2042-01-27
Also published as: CN114461324B

Abstract

本申请涉及一种绘图工具、基于绘图工具的图形生成方法、装置、设备及介质，应用于web绘图技术领域，绘图工具包括：基础组件，所述基础组件封装有图源基本要素、事件监听控制器、布局器算法、图形渲染引擎、基本数学函数库和辅助工具。本申请具有提高开发效率的效果。

Description

绘图工具、基于绘图工具的图形生成方法、装置、设备及介质

技术领域

本申请涉及web绘图的技术领域，尤其是涉及一种绘图工具、基于绘图工具的图形生成方法、装置、设备及介质。

背景技术

随着用户对软件体验的要求不断提高，界面图形化展示操作往往能提升用户的体验感，同时也会提高用户对软件认可，尤其在WEB页面上，一般的软件系统图形界面开发需要花费大量的时间和人力，运行效率低下，界面不够专业美观。

基于Html5的图形函数库比较少，好用又跨浏览器平台的通用的工具包数量较少，目前在Web浏览器里绘制图形有很多种方式，在Html5中使用canvas是目前最为常见的一种，但是canvas仅仅提供了一个画板，利用JavaScript进行编程绘制静态图形，开发过程复杂，对开发人员绘图技术要求较高，绘图难度大，从而导致开发效率低。

发明内容

为了提高开发效率，本申请提供一种绘图工具、基于绘图工具的图形生成方法、装置、设备及介质。

第一方面，本申请提供一种绘图工具，采用如下的技术方案：

一种绘图工具，包括：基础组件，所述基础组件封装有图源基本要素、事件监听控制器、布局器算法、图形渲染引擎、基本数学函数库和辅助工具。

通过采用上述技术方案，绘图工具为js 文件的形式，将基础组件封装成API，无需引用第三方，使用者只需在html页面添加引用即可，根据应用需求，选取不同的图形组件实例化绘图对象，绑定数据源，调用封装的API，自动生成所需可视化图形页面。

可选的，还包括：基于所述基础组件封装多个用于继承基础组件功能的拓展组件，其中，所述拓展组件包括拓扑组件、地图组件、导图组件、画板组件、图表组件和自定义组件。

可选的，所述图源基本要素包括构造基本图形、连接关系对象、复合图形和图形编辑选择器。

可选的，所述辅助工具包括鹰眼、图形右键菜单、鼠标悬停提示框和图例。

第二方面，本申请提供一种基于绘图工具的图形生成方法，采用如下的技术方案：

一种基于如第一方面所述的绘图工具的图形生成方法，应用于HTML页面，所述方法包括：

响应于用户的绘图指令，获取输入数据并实例化拓展组件对象；

基于所述拓展组件对象，绑定数据源；

初始化画布页面；

基于所述数据源调用绘图模板，在所述绘图模板中解析所述输入数据；

基于所述绘图模板、解析后的输入数据和所述画布页面对待绘制图形进行布局和绘制；

显示所述待绘制图形。

通过采用上述技术方案，绘图工具为js 文件的形式，将基础组件封装成API，无需引用第三方，使用者只需在html页面添加引用即可，根据应用需求，选取不同的图形组件实例化绘图对象，绑定数据源，调用封装的API，自动生成所需可视化图形页面

可选的，在所述基于所述绘图模板、解析后的输入数据和所述画布页面对待绘制图形进行布局和绘制之后，所述方法还包括：

获取所述待绘制图形的图源信息，将所述图源信息存储于数据库中。

可选的，在所述显示所述待绘制图形之后，所述方法还包括：

响应于用户的调整指令，对所述待绘制图形进行动态调整。

第三方面，本申请提供一种基于绘图工具的图形生成装置，采用如下的技术方案：

一种基于如第一方面所述的绘图工具的图形生成装置，包括：

指令响应模块，用于响应于用户的绘图指令，获取输入数据并实例化拓展组件对象；

数据绑定模块，用于基于所述拓展组件对象，绑定数据源；

画布初始模块，用于初始化画布页面；

模板调用模块，用于基于所述数据源调用绘图模板，在所述绘图模板中解析所述输入数据；

图形绘制模块，用于基于所述绘图模板、解析后的输入数据和所述画布页面对待绘制图形进行布局和绘制；

图形显示模块，用于显示所述待绘制图形。

第四方面，本申请提供一种电子设备，采用如下的技术方案：

一种电子设备，包括存储器和处理器，所述存储器上存储有能够被处理器加载并执行第二方面任一项所述的基于绘图工具的图形生成方法的计算机程序。

第五方面，本申请提供一种计算机可读存储介质，采用如下的技术方案：

一种计算机可读存储介质，存储有能够被处理器加载并执行第二方面任一项所述的基于绘图工具的图形生成方法的计算机程序。

附图说明

图1是本申请实施例的一种绘图工具的结构框图。

图2是本申请实施例的一种基于绘图工具的图形生成方法的流程示意图。

图3是本申请实施例的一种汇聚网络拓扑图。

图4是本申请实施例的一种基于绘图工具的图形生成装置的结构框图。

图5是本申请实施例的一种电子设备的结构框图。

具体实施方式

绘图工具以webGragh-Core.js 文件形式对外发布，纯原生javaScript开发。

以下结合附图对本申请作进一步详细说明。

图1为本申请实施例提供的一种绘图工具的结构框图。

如图1所示，该绘图工具主要包括：

封装成API用于对外调用的基础组件，基础组件封装有图源基本要素、事件监听控制器、布局器算法、图形渲染引擎、基本数学函数库和辅助工具等。基于基础组件封装多个用于继承基础组件功能的拓展组件，其中，拓展组件包括拓扑组件、地图组件、导图组件、画板组件、图表组件和自定义组件，其中，自定义组件用于根据用户的使用需要在基础组件上进行二次封装，封装为例如拓扑组件的适用于自身的组件。图源基本要素包括构造基本图形、连接关系对象、复合图形和图形编辑选择器。辅助工具包括鹰眼、图形右键菜单、鼠标悬停提示框和图例等。

在本实施例中，对拓扑组件、地图组件、导图组件和自定义组件进行解释说明：（1）拓扑图组件：基于基础组件构建拓扑图组件，通过业务建模，数据驱动绘制网络图，用于绘制社交网络图、拓扑图、流程图等，提供的矢量图形可以进行点线之类数据的展现，还可以用于绘制地铁、管线和网络等管理图。（2）地图组件：支持漫游交互、无极缩放、不限制坐标范围，将地图完整的进行的呈现。（3）导图组件：借助树形布局器，可以解决树形结构数据的自动布局问题，可运用于组织图、思维导图等。（4）自定义组件：可构建其他如组织图、流程图、属性页、列表、树、表格、树表、图表等组件。对于其他组件，其应用方法与上述组件的应用方法思想一致，在此不继续进行举例说明。

在本实施例中，基于组件层构建，进行业务数据建模，所有的应用都是依据数据驱动组件、根据特定布局算法自动绘制并输出图形，图形视图具备人机交互特性。其中，构建的应用层提供人机交互操作功能如下：（1）图形要素：线、矩形、多边形、圆、文字、图片、椭圆；（2）基本操作：保存、打开、载入数据、放大、缩小、漫游；（3）图形操作：选择、修改图形要素、修改图形要素大小、修改、undo、redo、旋转、移动旋转图形、复制、粘贴、剪切、编辑文字、修改线型(端点/中间加图形)、修改图形要素属性、上移、下移等操作；（4）事件：图形要素的增加、删除、修改前后、选中状态变化都有事件，支持如单击、双击、悬停、选择、橡皮筋选择、复制、删除、调整大小和移动等事件；（5）复杂操作：如拖和拖放，无限次的撤销/重做和剪贴板操作等；（6）布局：对组件进行布局、间隔、顺序编排；（7）打印：打印、打印预览以及输出等；（8）其他常用功能：如自动布局、多图层、鹰眼图导航等。人机交互功能包括但不限于上述功能，在此不做具体限定。

图2为本申请实施例提供的一种基于绘图工具的图形生成方法的流程示意图。

如图2所示，该方法主要流程描述如下（步骤S101～S104）：

步骤S101，响应于用户的绘图指令，获取输入数据并实例化拓展组件对象；

在本实施例中，用户根据待绘制图形的类型选择与待绘制图形类型相匹配的拓展组件，需要说明的是，用户也可以直接使用基础组件进行绘制，在此不做具体限定。

步骤S102，基于拓展组件对象，绑定数据源；

在本实施例中，数据源一般采用json格式，也可以根据用户的需要直接选择导航栏内的组件进行点击或拖拽使用，在此不做具体限定。

步骤S103，初始化画布页面；

步骤S104，基于数据源调用绘图模板，在绘图模板中解析输入数据；

步骤S105，基于绘图模板、解析后的输入数据和画布页面对待绘制图形进行布局和绘制；

在本实施例中，获取待绘制图形的图源信息，将图源信息存储于数据库中。

步骤S106，显示待绘制图形。

在本实施例中，响应于用户的调整指令，对待绘制图形进行动态调整。

在本实施例中，在完成图形绘制之后，所绘制的图形并非简单的图片形式，基于组件中的事件监听控制器，还可以进行人机交互，即用户在图形上进行拖动、鼠标悬停和点击图形等操作。

对于步骤S101至步骤S106中的基于绘图工具的图像生成方法，通过代码实例进行说明：

1.实例化拓扑组件对象：

VarmyGraph=WebGraph.Controls.WebTopology.createNew('canvasContainer')；

2.绑定数据源，通用JSON格式数据源

myGraph.dataSorce=jsonData；

3.初始化画布页面

myGraph.init(1000,100)；

4.调用模板

myGraph.topologyTemplate()；

5.执行绘制

myGraph.draw()；

图3为申请实施例提供的汇聚网络拓扑图，如图3所示，在绑定数据源之后，需要执行如下代码构建汇聚网络拓扑图：

Var jsonData=[{"id":"1","name":"核心层","border":"1","image":"hxjhj.png","nodes":[{"id":"hx_1","name":"核心网设备-123"}]},{"id":"2","name":"汇聚层","border":"1","image":"route.png","nodes":[{"id":"hj_1","name":"汇聚设备-001"},{"id":"hj_2","name":"汇聚设备-002"}]},{"id":"3","name":"接入层","border":"1","image":"HJ-JHJ.png","nodes":[{"id":"jr_1","name":"接入设备-01"},{"id":"jr_2","name":"接入设备2"},{"id":"jr_3","name":"接入设备3"},{"id":"jr_4","name":"接入设备4"},{"id":"jr_5","name":"接入设备5"},{"id":"jr_6","name":"接入设备6"},{"id":"jr_7","name":"接入设备7"},{"id":"jr_8","name":"接入设备8"},{"id":"jr_9","name":"接入设备9"},{"id":"jr_10","name":"接入设备10"}]},

{"id":"4","border":"0","relations":[

{"fromId":"hx_1","toId":"hj_1","id":"光纤路id","name":"主G-001"},

{"fromId":"hx_1","toId":"hj_1","id":"光纤路id","name":"备G-002"},

{"fromId":"hj_1","toId":"hj_2","id":"光纤路id","name":"G-004"},

{"fromId":"hx_1","toId":"hj_2","id":"光纤路id","name":"G-003"},

{"fromId":"hj_1","toId":"jr_2","id":"光纤路id","name":"G-005"},

{"fromId":"hj_2","toId":"jr_10","id":"光纤路id","name":"G-021"},

{"fromId":"hj_1","toId":"jr_5","id":"光纤路id","name":"G-101"},

{"fromId":"hj_2","toId":"jr_8","id":"光纤路id","name":"G-301"},

{"fromId":"jr_1","toId":"jr_2","id":"光纤路id","name":"G-041"},

{"fromId":"jr_2","toId":"jr_3","id":"光纤路id","name":"G-051"},

{"fromId":"jr_3","toId":"jr_4"},

{"fromId":"jr_4","toId":"jr_5","id":"光纤路id","name":"主G-101"},

{"fromId":"jr_5","toId":"jr_6","id":"光纤路id","name":"备G-101"},

{"fromId":"jr_6","toId":"jr_7","id":"光纤路id","name":"主G-205"},

{"fromId":"jr_7","toId":"jr_8","id":"光纤路id","name":"备G-206"},

{"fromId":"jr_8","toId":"jr_9"},{"fromId":"jr_9","toId":"jr_10"}]}]。

图4为申请实施例提供的一种基于绘图工具的图形生成装置200的结构框图。

如图4所示，基于绘图工具的图形生成装置200主要包括：

指令响应模块201，用于响应于用户的绘图指令，获取输入数据并实例化拓展组件对象；

数据绑定模块202，用于基于拓展组件对象，绑定数据源；

画布初始模块203，用于初始化画布页面；

模板调用模块204，用于基于数据源调用绘图模板，在绘图模板中解析输入数据；

图形绘制模块205，用于基于绘图模板、解析后的输入数据和画布页面对待绘制图形进行布局和绘制；

图形显示模块206，用于显示待绘制图形。

作为本实施例的一种可选实施方式，该装置具体还用于获取待绘制图形的图源信息，将图源信息存储于数据库中。

作为本实施例的一种可选实施方式，该装置具体还用于响应于用户的调整指令，对待绘制图形进行动态调整。

在一个例子中，以上任一装置中的模块可以是被配置成实施以上方法的一个或多个集成电路，例如：一个或多个专用集成电路(application specificintegratedcircuit，ASIC)，或，一个或多个数字信号处理器(digital signal processor，DSP)，或，一个或者多个现场可编程门阵列(field programmable gate array，FPGA)，或这些集成电路形式中至少两种的组合。

再如，当装置中的模块可以通过处理元件调度程序的形式实现时，该处理元件可以是通用处理器，例如中央处理器(central processing unit，CPU)或其它可以调用程序的处理器。再如，这些模块可以集成在一起，以片上系统(system-on-a-chip，SOC)的形式实现。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的装置和模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

图5为本申请实施例提供的电子设备300的结构框图。

如图5所示，电子设备300包括处理器301和存储器302，还可以进一步包括信息输入/信息输出(I/O)接口303、通信组件304中的一种或多种以及通信总线305。

其中，处理器301可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器301中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器301可以是通用处理器301，包括中央处理器301(CentralProcessingUnit，CPU)、网络处理器301(NetworkProcessor，NP)等；还可以是数字信号处理器301(DigitalSignalProcessor，DSP)、专用集成电路(ApplicationSpecificIntegratedCircuit，ASIC)、现场可编程门阵列(Field－ProgrammableGateArray，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本说明书实施例中的公开的各方法、步骤及逻辑框图。通用处理器301可以是微处理器301或者该处理器301也可以是任何常规的处理器301等。结合本说明书实施例所公开的方法的步骤可以直接体现为硬件译码处理器301执行完成，或者用译码处理器301中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器302，闪存、只读存储器302，可编程只读存储器302或者电可擦写可编程存储器302、寄存器等本领域成熟的存储介质中。该存储介质位于存储器302，处理器301读取存储器302中的信息，结合其硬件完成上述方法的步骤。

存储器302可能包含内存，例如高速随机存取存储器302(Random-AccessMemory，RAM)，也可能还包括非易失性存储器302(non-volatilememory)，例如至少1个磁盘存储器302等。当然，该电子设备还可能包括其他业务所需要的硬件。存储器302用于存放程序。具体地，程序可以包括程序代码，所述程序代码包括计算机操作指令。存储器302可以包括内存和非易失性存储器302，并向处理器提供指令和数据。处理器从非易失性存储器302中读取对应的计算机程序到内存中然后运行，在逻辑层面上形成图形引擎构建装置。

I/O接口303为处理器301和其他接口模块之间提供接口，上述其他接口模块可以是键盘，鼠标，按钮等。这些按钮可以是虚拟按钮或者实体按钮。通信组件304用于电子设备300与其他设备之间进行有线或无线通信。无线通信，例如Wi-Fi，蓝牙，近场通信(NearField Communication，简称NFC)，2G、3G或4G，或它们中的一种或几种的组合，因此相应的该通信组件104可以包括：Wi-Fi部件，蓝牙部件，NFC部件。

电子设备300可以被一个或多个应用专用集成电路 (Application SpecificIntegrated Circuit，简称ASIC)、数字信号处理器(Digital Signal Processor，简称DSP)、数字信号处理设备(Digital Signal Processing Device，简称DSPD)、可编程逻辑器件(Programmable Logic Device，简称PLD)、现场可编程门阵列(Field ProgrammableGate Array，简称FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述实施例给出的基于绘图工具的图形生成方法。

通信总线305可包括一通路，在上述组件之间传送信息。通信总线305可以是PCI(Peripheral Component Interconnect，外设部件互连标准)总线或EISA (ExtendedIndustry Standard Architecture，扩展工业标准结构)总线等。通信总线305可以分为地址总线、数据总线、控制总线等。

电子设备300可以包括但不限于移动电话、笔记本电脑、数字广播接收器、PDA（个人数字助理）、PAD（平板电脑）、PMP（便携式多媒体播放器）、车载终端（例如车载导航终端）等等的移动终端以及诸如数字TV、台式计算机等等的固定终端，还可以为服务器等。

本申请还提供一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，计算机程序被处理器执行时实现上述的基于绘图工具的图形生成方法的步骤。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

以上描述仅为本申请的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本申请中所涉及的申请范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离前述申请构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本申请中申请的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。

Claims

1.一种绘图工具，其特征在于，包括：基础组件，所述基础组件封装有图源基本要素、事件监听控制器、布局器算法、图形渲染引擎、基本数学函数库和辅助工具。

2.根据权利要求1所述的一种绘图工具，其特征在于，还包括：基于所述基础组件封装多个用于继承基础组件功能的拓展组件，其中，所述拓展组件包括拓扑组件、地图组件、导图组件、画板组件、图表组件和自定义组件。

3.根据权利要求1或2所述的一种绘图工具，其特征在于，所述图源基本要素包括构造基本图形、连接关系对象、复合图形和图形编辑选择器。

4.根据权利要求1或2所述的一种绘图工具，其特征在于，所述辅助工具包括鹰眼、图形右键菜单、鼠标悬停提示框和图例。

5.一种基于如权利要求1至4任一项所述的绘图工具的图形生成方法，其特征在于，应用于HTML页面，所述方法包括：

基于所述拓展组件对象，绑定数据源；

初始化画布页面；

显示所述待绘制图形。

6.根据权利要求5所述的方法，其特征在于，在所述基于所述绘图模板、解析后的输入数据和所述画布页面对待绘制图形进行布局和绘制之后，所述方法还包括：

7.根据权利要求5所述的方法，其特征在于，在所述显示所述待绘制图形之后，所述方法还包括：

响应于用户的调整指令，对所述待绘制图形进行动态调整。

8.一种基于如权利要求1至4任一项所述的绘图工具的图形生成装置，其特征在于，包括：

数据绑定模块，用于基于所述拓展组件对象，绑定数据源；

画布初始模块，用于初始化画布页面；

图形显示模块，用于显示所述待绘制图形。

9.一种电子设备，其特征在于，包括存储器和处理器，所述存储器上存储有能够被所述处理器加载并执行如权利要求5至7中任一种方法的计算机程序。

10.一种计算机可读存储介质，其特征在于，存储有能够被处理器加载并执行如权利要求5至7中任一种方法的计算机程序。