一种可编辑ER图生成方法和装置与流程

一种可编辑er图生成方法和装置
技术领域
1.本发明涉及基于数据库模型技术领域，具体涉及一种可编辑er图生成方法和装置。


背景技术：

2.e
‑
r方法是实体
‑
联系方法(entity
‑
relationship approach)的简称。它是描述现实世界概念结构模型的有效方法，而er图就是这个方法在界面上的可视化呈现。无论是普遍的数据库驱动的开发方式，还是高大上的ddd，或者是模型驱动的lowcode平台，亦或主数据驱动的apaas平台，er图提供了一种可视化业务的视角。
3.需要展示成百上千个模型是er图建构工具最核心的功能，主流工具canvas是现有优化选择。但是，由于canvas提供的是更底层绘图api，缺乏上层封装，无法对er图进行有效的编辑。


技术实现要素：

4.针对所述缺陷，本发明实施例公开了一种可编辑er图生成方法和装置，其通过g6框架、vue框架以及svg矢量图的结合，使绘制的er图可以编辑。
5.本发明实施例第一方面公开一种可编辑er图生成方法，其包括：
6.使用vue监听使用者在g6框架中对er图的操作，并基于所述操作计算渲染内容；
7.vue根据所述渲染内容使用svg矢量图对er图进行渲染，形成更新后的er图，所述svg矢量图组装于所述g6框架中。
8.作为较佳的实施例，在本发明实施例的第一方面中，所述使用vue监听使用者在g6框架中对er图的操作，并基于所述操作计算渲染内容，包括：
9.vue监听使用者在所述g6框架中对er图的操作；
10.针对所述操作对vue计算得到的数组进行更新，以更新后的所述数组作为渲染内容。
11.作为较佳的实施例，在本发明实施例的第一方面中，vue根据所述渲染内容使用svg矢量图对er图进行渲染，形成更新后的er图，包括：
12.vue将所述更新后的数组发送至svg矢量图，由svg矢量图根据所述更新后的数组对所述er图进行渲染。
13.作为较佳的实施例，在本发明实施例的第一方面中，所述操作为添加操作；
14.所述使用vue监听使用者在g6框架中对er图的操作，并基于所述操作计算渲染内容；vue根据所述渲染内容使用svg矢量图对er图进行渲染，形成更新后的er图，包括：
15.vue监听使用者利用svg矢量图内置图形或/和颜色对er图的操作；
16.当所述操作为添加图形时，获取所述图形的形状以及放置位置，根据所述图形的形状和放置位置确定渲染内容，利用svg矢量图渲染得到的图形形状和放置位置；
17.当所述操作为添加颜色时，获取所述颜色值以及添加的图形的位置，根据所述图
形的位置判断所述待添加颜色的图形是否有文字，如果有文字，渲染结果为将所述颜色值对应的颜色覆盖至所述待添加颜色的图形，并将所述文字设置于所述背景颜色之上，如果没有文字，则渲染结果为直接将所述颜色值对应的颜色覆盖至所述待添加颜色的图形。
18.作为较佳的实施例，在本发明实施例的第一方面中，所述操作为滚动或缩放操作；
19.所述使用vue监听使用者在g6框架中对er图的操作，并基于所述操作计算渲染内容；vue根据所述渲染内容使用svg矢量图对er图进行渲染，形成更新后的er图，包括：
20.vue利用svg矢量图内部的name以及x轴，y轴属性，监听使用者操作的具体位置，确定操作针对的节点；
21.当所述操作的具体位置为节点内部时，执行滚动操作；
22.当所述操作的具体位置不在任意节点内部时，执行缩小或放大操作。
23.作为较佳的实施例，在本发明实施例的第一方面中，所述操作为删除或拖动操作；
24.所述使用vue监听使用者在g6框架中对er图的操作，并基于所述操作计算渲染内容；vue根据所述渲染内容使用svg矢量图对er图进行渲染，形成更新后的er图，包括：
25.vue利用svg矢量图内部的name以及x轴，y轴属性，监听使用者操作的具体位置，确定操作针对的目标节点；
26.当所述操作的具体位置为目标节点的按钮上时，执行删除操作；
27.当所述操作的具体位置不在目标节点的按钮上时，执行拖动操作。
28.本发明实施例第二方面公开一种可编辑er图生成装置，其包括：
29.监听单元，用于使用vue监听使用者在g6框架中对er图的操作，并基于所述操作计算渲染内容；
30.渲染单元，用于vue根据所述渲染内容使用svg矢量图对er图进行渲染，形成更新后的er图，所述svg矢量图组装于所述g6框架中。
31.作为较佳的实施例，在本发明实施例的第二方面中，所述监听单元，包括：
32.监听子单元，用于通过vue监听使用者在所述g6框架中对er图的操作；
33.更新子单元，用于针对所述操作对vue计算得到的数组进行更新，以更新后的所述数组作为渲染内容。
34.作为较佳的实施例，在本发明实施例的第二方面中，所述渲染单元，包括：
35.渲染子单元，用于通过vue将所述更新后的数组发送至svg矢量图，由svg矢量图根据所述更新后的数组对所述er图进行渲染。
36.本发明实施例第三方面公开一种电子设备，包括：存储有可执行程序代码的存储器；与所述存储器耦合的处理器；所述处理器调用所述存储器中存储的所述可执行程序代码，用于执行本发明实施例第一方面公开的一种可编辑er图生成方法。
37.本发明实施例第四方面公开一种计算机可读存储介质，其存储计算机程序，其中，所述计算机程序使得计算机执行本发明实施例第一方面公开的一种可编辑er图生成方法。
38.本发明实施例第五方面公开一种计算机程序产品，当所述计算机程序产品在计算机上运行时，使得所述计算机执行本发明实施例第一方面公开的一种可编辑er图生成方法。
39.本发明实施例第六方面公开一种应用发布平台，所述应用发布平台用于发布计算机程序产品，其中，当所述计算机程序产品在计算机上运行时，使得所述计算机执行本发明
实施例第一方面公开的一种可编辑er图生成方法。
40.与现有技术相比，本发明实施例具有以下有益效果：
41.本发明实施例基于g6初始化引擎，结合vue以及g6框架的优缺点，监听用户操作，根据用户需求动态更新svg矢量图，可以解决er图不可编辑，视图数据不精细，用户操作冲突，功能点太少等问题。
附图说明
42.为了更清楚地说明本发明实施例中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人体来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
43.图1是本发明实施例公开的一种可编辑er图生成方法的流程示意图；
44.图2是本发明实施例公开的一种可编辑er图生成装置的结构示意图；
45.图3是本发明实施例公开的一种电子设备的结构示意图。
具体实施方式
46.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人体在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
47.需要说明的是，本发明的说明书和权利要求书中的术语“第一”、“第二”、“第三”、“第四”等是用于区别不同的对象，而不是用于描述特定顺序。本发明实施例的术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，示例性地，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
48.实施例一
49.请参阅图1，图1是本发明实施例公开的一种可编辑er图生成方法的流程示意图。如图1所示，该可编辑er图生成方法包括以下步骤：
50.s110、使用vue监听使用者在g6框架中对er图的操作，并基于所述操作计算渲染内容。
51.antv是蚂蚁金服全新一代数据可视化解决方案，主要包含「数据驱动的高交互可视化图形语法」g2、开源的g6、适于对性能、体积、扩展性要求严苛场景下使用的移动端图表库f2以及一套完整的图表使用指引和可视化设计规范，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。g6是一个简单、易用、完备、开源的图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图可视化、图分析、或图编辑器应用。其本身不提供上层建筑(例如节点类型、边类型、基础交互、布局算法等)的具体实现，只提供一套高可扩展的机制，g6优化了大量接口设计，能明显感受到接口更精简，更自洽，概念更清晰。
52.vue是一套用于构建用户界面的渐进式javascript框架。与其它大型框架不同的
是，vue被设计为可以自底向上逐层应用。vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，vue也完全能够为复杂的单页应用(spa)提供驱动。
53.在本发明较佳的实施例中，使用vue框架和g6框架相结合，其中，g6框架作为图可视化引擎，将g6集成于vue框架中，通过vue框架的watch来监听使用者(用户)在g6框架中的可视化操作，获取相应的操作内容，并将监听内容更新其内部数据，即对g6框架进行监控的数据集合，包括未改变数据和因操作内容增加、或改变的数据，通过该数据集合去驱动svg矢量图实现整体渲染。
54.s120、vue根据所述渲染内容使用svg矢量图对er图进行渲染，形成更新后的er图，所述svg矢量图组装于所述g6框架中。
55.svg是一种图像文件格式，它的英文全称为scalable vector graphics，意思为可缩放的矢量图形。它是基于xml(extensible markup language)，由world wide webconsortium(w3c)联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开svg图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到html中通过浏览器来观看。html5<canvas>标签用于绘制图像(通过脚本，通常是javascript)。不过，<canvas>元素本身并没有绘制能力，它仅仅是图形的容器，必须使用脚本来完成实际的绘图任务。getcontext()方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
56.本发明实施例将svg矢量图组装于g6框架中，从而可以使用svg矢量图替代canvas画布，可以有效解决现有er图使用canvas无法插入html标签，无法修改内置方法，以及渲染性能问题。
57.vue将监听确定的更新后的数据(一般为数组)发送给svg，由svg根据该更新后的数组进行渲染，从而实现er图的编辑功能，并且内容层级更高，更加精细。
58.以下各种操作的具体方法为例，对本发明实现er图可编辑的方法进行解释和说明：
59.1、提供拖拉拽功能，使用者无需通过代码创建关联关系，直接重视图层级即可创建可视化关系。具体包括：
60.通过拖拉拽svg矢量图中的相应组件(例如图形、颜色、连线等)，将相应的操作在g6框架中可视化添加。
61.当执行添加图形操作时，可通过拖拽方式实现，vue获取所述图形的形状以及放置位置，根据所述图形的形状和放置位置确定渲染内容，利用svg矢量图渲染得到的图形形状和放置位置。具体为：根据vue树选择器的拖拽功能，在拖拽结束的时候，vue首先判断用户鼠标是否停留在svg矢量图上面，如果是的话，vue请求后台接口，后台根据拖拽参数生成一个新的nodes节点数据，然后把nodes节点数据与本来的nodes数组合并一下，通过updateitem加入到当前er模型中。
62.拖拽新的连线：根据vue树选择器的拖拽功能，在拖拽结束的时候，vue首先判断用户鼠标是否停留在svg矢量图上面，且两端是否连接在两个节点上，如果是的话，vue请求后台接口，后台根据拖拽参数生成一个新的连线数据，然后把新的连线数据与本来的连线数
组合并一下，更新vue的数组，通过updateitem加入到当前er模型中。
63.在渲染er图节点的时候，vue会根据后端传回来的type，然后根据type内容，判断当前用户需要的是哪个图形，达到er图多样化的功能，线段箭头与样式，也可通过后台数据linetype的数据进行判断以渲染不同的线段。
64.2、添加关系的过程中，操作者可以通过喜好等选择各个节点(nodes)关系类型。
65.操作者可以为节点和连线添加颜色，从而可以方便操作者在节点相隔层级非常多时依然可以确认关系来源。
66.当所述操作为添加颜色时，获取所述颜色值以及添加的图形的位置，根据所述图形的位置判断所述待添加颜色的图形是否有文字，如果有文字，渲染结果为将所述颜色值对应的颜色覆盖至所述待添加颜色的图形，并将所述文字设置于所述背景颜色之上，如果没有文字，则渲染结果为直接将所述颜色值对应的颜色覆盖至所述待添加颜色的图形。
67.连线过程中通过vue判断节点和节点的目标连线是否已经有颜色属性，如果有，通过判断鼠标松开事件删除当前连线，在删除连线关系的过程中，同样也通过判断当前节点还有没有其他连线的目标节点，如果有，颜色保留，如果没有，颜色回到默认状态。
68.3、拖动操作
69.利用svg图形内部的name以及x轴，y轴属性，由vue判断对象鼠标操作的具体位置，以及用户当前操作具体是哪个节点，即vue监听svg内部的name以及x轴，y轴属性，可以解决操作方法冲突的问题，如矢量图的放大缩小是使用了g6的zoom
‑
canvas方法，捕抓用户事件，在shouldupdate的时候，判断用户触发位置是否在nodes节点上面，如果是，就不触发放大缩小，而执行滚动事件的操作。
70.滚动事件是通过vue获取当前滚动距离，定义为suby，然后把nodes的裁剪区域向下移动suby的距离，并且计算当前nodes节点的每条path向下移动suby的距离，即当前nodes节点整体被向下拖动suby的距离。
71.如果用户触发位置不在nodes节点上面，则执行放大缩小操作。
72.4、tooltip(提示)效果
73.本发明实施例利用vue封装成组件，可以与vue的其他组件结合，利用组件的特性，使er图可以有tooltip(提示)效果，给关系添加多条属性，更改线段属性等功能，开发人员可根据喜好随意添加功能，也可以只使用组件内置的功能，如tooltip是新建另一张画布，然后覆盖到er矢量图上面，然后根据用户鼠标位置获取鼠标位置文字，生成提示，然后2张图片覆盖的效果形成tooltip效果。
74.5、多种模式的切换
75.利用vue的computed属性，提供了几种可视化模式，操作者可以根据自己的需要切换不同的模式。在用户切换模式的时候，计算当前模式所需要的值，例如nodes裁剪值，子节点数据，搜索数据等，然后根据计算出来的值动态更新svg，使渲染性能提高。
76.6、单节点搜索功能
77.利用svg矢量图可插入html标签，使er图可实现单节点搜索功能，并把方法与搜索对象挂在到window对象上面，把搜索框的参数与nodes子节点的参数拷贝一份保存到window上面，以免改变页面固定数据，搜索的时候页面重新渲染，根据window上面搜索的参数与nodes子节点参数做一个过滤，再把过滤的内容放入nodes里面，以实现搜索功能，以解
决vue与g6作用域不同以及svg只可使用原生方法的问题。
78.7、恢复初始状态
79.利用vue的vuex功能，储存初试参数，使er操作不仅仅只能撤回，还会回归初始状态。
80.8、移动功能
81.移动子节点的方法是通过g6内置方法drag
‑
nodes实现的，本发明在drag
‑
nodes的基础上由vue先通过一层判断，vue先在nodes新增一个头部rect(矩形)作为可拖动区域，然后vue给rect设置一个唯一name，在拖动前(shouldbegin)vue判断用户点击位置是否为可拖动区域(vue利用svg矢量图内部的name以及x轴，y轴属性，监听使用者操作的具体位置，如果该具体位置是节点的按钮，则执行删除操作，如果该具体位置不是节点的按钮，意味着属于可拖动区域)，如果是，即可拖动，然后vue再做一层判断，判断参数是否有children或者是否为简单图形nodes节点，如果是，即可整个拖动。
82.9、删除功能
83.删除关系或nodes节点，是利用vue的弹框功能，点击svg矢量图，触发弹框方法，然后删除关系的时候，vue先判断当前关系的颜色回到默认，然后再做一层判断，如果目标关系还有其他关系，保留与其他关系的连线以及连线颜色，然后使用vuex保存数据再通过updataitem更新内容。删除nodes节点，同样需要判断这个nodes上面所有的关系，然后把所有的关系做类似删除线的判断，使用vuex保存在通过updataitem更新内容。
84.另外，本发明实施例还可以利用g6的布局属性，用户可传入自定义的x值和y值，动态更新nodes节点，如果用户不传入自定义坐标，本发明实施例会自动使用g6提供的一些基础布局。
85.实施例二
86.请参阅图2，图2是本发明实施例公开的一种可编辑er图生成装置的结构示意图。如图2所示，该可编辑er图生成装置，可以包括：
87.监听单元210，用于使用vue监听使用者在g6框架中对er图的操作，并基于所述操作计算渲染内容；
88.渲染单元220，用于vue根据所述渲染内容使用svg矢量图对er图进行渲染，形成更新后的er图，所述svg矢量图组装于所述g6框架中。
89.优选地，所述监听单元，包括：
90.监听子单元，用于通过vue监听使用者在所述g6框架中对er图的操作；
91.更新子单元，用于针对所述操作对vue计算得到的数组进行更新，以更新后的所述数组作为渲染内容。
92.优选地，所述渲染单元，包括：
93.渲染子单元，用于通过vue将所述更新后的数组发送至svg矢量图，由svg矢量图根据所述更新后的数组对所述er图进行渲染。
94.实施例三
95.请参阅图3，图3是本发明实施例公开的一种电子设备的结构示意图。如图3所示，该电子设备可以包括：
96.存储有可执行程序代码的存储器310；
97.与存储器310耦合的处理器320；
98.其中，处理器320调用存储器310中存储的可执行程序代码，执行实施例一中的一种可编辑er图生成方法中的部分或全部步骤。
99.本发明实施例公开一种计算机可读存储介质，其存储计算机程序，其中，该计算机程序使得计算机执行实施例一中的一种可编辑er图生成方法中的部分或全部步骤。
100.本发明实施例还公开一种计算机程序产品，其中，当计算机程序产品在计算机上运行时，使得计算机执行实施例一中的一种可编辑er图生成方法中的部分或全部步骤。
101.本发明实施例还公开一种应用发布平台，其中，应用发布平台用于发布计算机程序产品，其中，当计算机程序产品在计算机上运行时，使得计算机执行实施例一中的一种可编辑er图生成方法中的部分或全部步骤。
102.在本发明的各种实施例中，应理解，所述各过程的序号的大小并不意味着执行顺序的必然先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。
103.所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物单元，即可位于一个地方，或者也可以分布到多个网络单元上。可根据实际的需要选择其中的部分或全部单元来实现本实施例方案的目的。
104.另外，在本发明各实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。所述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
105.所述集成的单元若以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可获取的存储器中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或者部分，可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储器中，包括若干请求用以使得一台计算机设备(可以为个人计算机、服务器或者网络设备等，具体可以是计算机设备中的处理器)执行本发明的各个实施例所述方法的部分或全部步骤。
106.在本发明所提供的实施例中，应理解，“与a对应的b”表示b与a相关联，根据a可以确定b。但还应理解，根据a确定b并不意味着仅仅根据a确定b，还可以根据a和/或其他信息确定b。
107.本领域普通技术人体可以理解所述实施例的各种方法中的部分或全部步骤是可以通过程序来指令相关的硬件来完成，该程序可以存储于一计算机可读存储介质中，存储介质包括只读存储器(read
‑
only memory，rom)、随机存储器(random access memory，ram)、可编程只读存储器(programmable read
‑
only memory，prom)、可擦除可编程只读存储器(erasable programmable read
‑
only memory，eprom)、一次可编程只读存储器(one
‑
time programmable read
‑
only memory，otprom)、电子抹除式可复写只读存储器(electrically
‑
erasable programmable read
‑
only memory，eeprom)、只读光盘(compact disc read
‑
only memory，cd
‑
rom)或其他光盘存储器、磁盘存储器、磁带存储器、或者能够用于携带或存储数据的计算机可读的任何其他介质。
108.以上对本发明实施例公开的一种可编辑er图生成方法和装置进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于
帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。