[发明专利]基于SVG的图形渲染方法以及装置

说明书

本申请公开了一种基于SVG的图形渲染方法，包括：获取待渲染场地的场地数据中最小网格单元的网格集合；根据所述网格集合中最小网格单元之间的相邻关系，将所述网格集合划分为至少一个网格子集；根据所述网格子集中最小网格单元的网格边框，确定所述网格子集对应的网格图形的图形边框；根据所述图形边框渲染所述网格图形。所述基于SVG的图形渲染方法通过引入SVG作为底层图形渲染技术实现最小网格单元这一级别的图形渲染，图形渲染更加成熟稳定，学习成本更低，不仅能满足多样化业务场景的实际需求，还提升了渲染效率。

技术领域

本申请涉及云计算技术领域，具体涉及一种基于SVG的图形渲染方法。本申请同时涉及一种基于SVG的图形渲染装置，以及一种电子设备。

背景技术

随着移动互联网的飞速发展，基于移动互联网的电子商务也得到广泛普及，而这其中，物流成为决定电子商务普及和推广的重要一环，物流业务中存在一些实操业务是在场地内进行的，经过简化抽象过的业务模型，场地一般可以使用网格布局(Grid Layout)表示，其中的最小业务单元可以用一个网格(Grid)表示，但实际业务场景中业务元素的粒度往往并不一致，所以会有一些业务元素需要直接或间接相邻的网格集合(Grid Set)来描述，这个网格集合的形状是不规则的，每个业务元素都应该能够绘制出边框。

使用SVG(Scalable Vector Graphics，可缩放矢量图形)作为底层技术渲染，只支持绘制矩形、圆形、多边形、折线等基本几何图形，对于一些特殊业务元素需要通过组合图形来渲染，组合图形会增加DOM(Document Object Model，文档对象模型)元素的数量，导致渲染效率降低，但是业务上要求地图实时刷新，刷新频率很高，不能依赖用户使用高配置的电脑，也不能让用户感知到明显的卡顿，并且能够让用户以更友好的方式与地图进行交互，所以需要性能和体验兼顾的技术方案。

目前，在进行图形渲染时，其一是使用Canvas作为底层模型的方案，该方案是基于像素点进行开发，不支持浏览器的事件，开发成本高，交互性差，渲染结果不是矢量图，存在失真现象；同时需要有Canvas知识背景和开发经验的前端工程师进行维护，维护成本较高。其二，为了支持不规则图形的渲染，前端使用每个网格矩形作为基本图形，可以组成任何不规则的组合图形，但是这种方案的最终地图的性能与区域的大小有关系，当大量的区域变化时会导致很多的DOM元素重绘，重绘所需的计算量和计算耗时都比较高，在配置较低的电脑上容易出现明显的卡顿，用户体验较差。

发明内容

本申请提供一种基于SVG的图形渲染方法，以解决现有技术存在的缺陷。本申请同时涉及一种基于SVG的图形渲染装置，以及一种电子设备。

本申请提供一种基于SVG的图形渲染方法，包括：

获取待渲染场地的场地数据中最小网格单元的网格集合；

根据所述网格集合中最小网格单元之间的相邻关系，将所述网格集合划分为至少一个网格子集；

根据所述网格子集中最小网格单元的网格边框，确定所述网格子集对应的网格图形的图形边框；

根据所述图形边框渲染所述网格图形。

可选的，所述获取待渲染场地的场地数据中最小网格单元的网格集合，采用如下方式实现：

从所述场地数据中筛选满足特定业务类型的最小网格单元，根据筛选出的最小网格单元形成所述网格集合。

可选的，所述根据所述网格子集中最小网格单元的网格边框，确定所述网格子集对应的网格图形的图形边框，采用如下方式实现：

针对所述网格子集中的至少一个最小网格单元，执行如下操作：

判断所述最小网格单元在上、下、左和/或右四个方向是否存在网格边框，若存在，将所述网格边框加入所述网格子集对应的边框集合中；