[發明專利]基于SVG的圖形渲染方法以及裝置

有效

• 申請號: 201810908705.1
• 申請日: 2018-08-10
• 公開（公告）號: CN110838165B
• 公開（公告）日: 2023-05-16
• 發明（設計）人: 劉林
• 申請（專利權）人: 菜鳥智能物流控股有限公司
• 主分類號: G06T15/20
• 分類號: G06T15/20;G06T17/20
• 代理公司: 北京清源匯知識產權代理事務所(特殊普通合伙) 11644
• 代理人: 馮德魁;竇曉慧

本申請公開了一種基于SVG的圖形渲染方法，包括：獲取待渲染場地的場地數據中最小網格單元的網格集合；根據所述網格集合中最小網格單元之間的相鄰關系，將所述網格集合劃分為至少一個網格子集；根據所述網格子集中最小網格單元的網格邊框，確定所述網格子集對應的網格圖形的圖形邊框；根據所述圖形邊框渲染所述網格圖形。所述基于SVG的圖形渲染方法通過引入SVG作為底層圖形渲染技術實現最小網格單元這一級別的圖形渲染，圖形渲染更加成熟穩定，學習成本更低，不僅能滿足多樣化業務場景的實際需求，還提升了渲染效率。

技術領域

本申請涉及云計算技術領域，具體涉及一種基于SVG的圖形渲染方法。本申請同時涉及一種基于SVG的圖形渲染裝置，以及一種電子設備。

背景技術

隨著移動互聯網的飛速發展，基于移動互聯網的電子商務也得到廣泛普及，而這其中，物流成為決定電子商務普及和推廣的重要一環，物流業務中存在一些實操業務是在場地內進行的，經過簡化抽象過的業務模型，場地一般可以使用網格布局(Grid?Layout)表示，其中的最小業務單元可以用一個網格(Grid)表示，但實際業務場景中業務元素的粒度往往并不一致，所以會有一些業務元素需要直接或間接相鄰的網格集合(Grid?Set)來描述，這個網格集合的形狀是不規則的，每個業務元素都應該能夠繪制出邊框。

使用SVG(Scalable?Vector?Graphics，可縮放矢量圖形)作為底層技術渲染，只支持繪制矩形、圓形、多邊形、折線等基本幾何圖形，對于一些特殊業務元素需要通過組合圖形來渲染，組合圖形會增加DOM(Document?Object?Model，文檔對象模型)元素的數量，導致渲染效率降低，但是業務上要求地圖實時刷新，刷新頻率很高，不能依賴用戶使用高配置的電腦，也不能讓用戶感知到明顯的卡頓，并且能夠讓用戶以更友好的方式與地圖進行交互，所以需要性能和體驗兼顧的技術方案。

目前，在進行圖形渲染時，其一是使用Canvas作為底層模型的方案，該方案是基于像素點進行開發，不支持瀏覽器的事件，開發成本高，交互性差，渲染結果不是矢量圖，存在失真現象；同時需要有Canvas知識背景和開發經驗的前端工程師進行維護，維護成本較高。其二，為了支持不規則圖形的渲染，前端使用每個網格矩形作為基本圖形，可以組成任何不規則的組合圖形，但是這種方案的最終地圖的性能與區域的大小有關系，當大量的區域變化時會導致很多的DOM元素重繪，重繪所需的計算量和計算耗時都比較高，在配置較低的電腦上容易出現明顯的卡頓，用戶體驗較差。

發明內容

本申請提供一種基于SVG的圖形渲染方法，以解決現有技術存在的缺陷。本申請同時涉及一種基于SVG的圖形渲染裝置，以及一種電子設備。

本申請提供一種基于SVG的圖形渲染方法，包括：

獲取待渲染場地的場地數據中最小網格單元的網格集合；

根據所述網格集合中最小網格單元之間的相鄰關系，將所述網格集合劃分為至少一個網格子集；

根據所述網格子集中最小網格單元的網格邊框，確定所述網格子集對應的網格圖形的圖形邊框；

根據所述圖形邊框渲染所述網格圖形。

可選的，所述獲取待渲染場地的場地數據中最小網格單元的網格集合，采用如下方式實現：

從所述場地數據中篩選滿足特定業務類型的最小網格單元，根據篩選出的最小網格單元形成所述網格集合。

可選的，所述根據所述網格子集中最小網格單元的網格邊框，確定所述網格子集對應的網格圖形的圖形邊框，采用如下方式實現：

針對所述網格子集中的至少一個最小網格單元，執行如下操作：

判斷所述最小網格單元在上、下、左和/或右四個方向是否存在網格邊框，若存在，將所述網格邊框加入所述網格子集對應的邊框集合中；