[发明专利]一种可编辑ER图生成方法和装置

说明书

本发明实施例涉及信息获取技术领域，公开了一种可编辑ER图生成方法和装置。该方法包括：使用Vue监听使用者在G6框架中对ER图的操作，并基于所述操作计算渲染内容；Vue根据所述渲染内容使用SVG矢量图对ER图进行渲染，形成更新后的ER图，所述SVG矢量图组装于所述G6框架中。实施本发明实施例，使用Vue以及G6框架相结合，通过Vue监听用户操作，根据用户需求动态更新SVG矢量图，可以解决ER图不可编辑，视图数据不精细，用户操作冲突，功能点太少等问题。

技术领域

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

背景技术

E-R方法是实体-联系方法(Entity-Relationship Approach)的简称。它是描述现实世界概念结构模型的有效方法，而ER图就是这个方法在界面上的可视化呈现。无论是普遍的数据库驱动的开发方式，还是高大上的DDD，或者是模型驱动的Lowcode平台，亦或主数据驱动的APaas平台，ER图提供了一种可视化业务的视角。

需要展示成百上千个模型是ER图建构工具最核心的功能，主流工具Canvas是现有优化选择。但是，由于Canvas提供的是更底层绘图api，缺乏上层封装，无法对ER图进行有效的编辑。

发明内容

针对所述缺陷，本发明实施例公开了一种可编辑ER图生成方法和装置，其通过G6框架、Vue框架以及SVG矢量图的结合，使绘制的ER图可以编辑。

本发明实施例第一方面公开一种可编辑ER图生成方法，其包括：

使用Vue监听使用者在G6框架中对ER图的操作，并基于所述操作计算渲染内容；

Vue根据所述渲染内容使用SVG矢量图对ER图进行渲染，形成更新后的ER图，所述SVG矢量图组装于所述G6框架中。

作为较佳的实施例，在本发明实施例的第一方面中，所述使用Vue监听使用者在G6框架中对ER图的操作，并基于所述操作计算渲染内容，包括：

Vue监听使用者在所述G6框架中对ER图的操作；

针对所述操作对Vue计算得到的数组进行更新，以更新后的所述数组作为渲染内容。

作为较佳的实施例，在本发明实施例的第一方面中，Vue根据所述渲染内容使用SVG矢量图对ER图进行渲染，形成更新后的ER图，包括：

Vue将所述更新后的数组发送至SVG矢量图，由SVG矢量图根据所述更新后的数组对所述ER图进行渲染。

作为较佳的实施例，在本发明实施例的第一方面中，所述操作为添加操作；

所述使用Vue监听使用者在G6框架中对ER图的操作，并基于所述操作计算渲染内容；Vue根据所述渲染内容使用SVG矢量图对ER图进行渲染，形成更新后的ER图，包括：

Vue监听使用者利用SVG矢量图内置图形或/和颜色对ER图的操作；

当所述操作为添加图形时，获取所述图形的形状以及放置位置，根据所述图形的形状和放置位置确定渲染内容，利用SVG矢量图渲染得到的图形形状和放置位置；

当所述操作为添加颜色时，获取所述颜色值以及添加的图形的位置，根据所述图形的位置判断所述待添加颜色的图形是否有文字，如果有文字，渲染结果为将所述颜色值对应的颜色覆盖至所述待添加颜色的图形，并将所述文字设置于所述背景颜色之上，如果没有文字，则渲染结果为直接将所述颜色值对应的颜色覆盖至所述待添加颜色的图形。

作为较佳的实施例，在本发明实施例的第一方面中，所述操作为滚动或缩放操作；