高德車載導航自研圖片格式的探索和實踐

背景
隨着近年來車內多媒體設備從無屏向有屏的發展，市場上出現了各類形狀、尺寸和分辨率的車機屏幕，其豐富程度遠遠超過Android適配的手機屏幕。

高德車載導航過去採用的多套UI 圖片資源，經過拉伸、縮小來適應各類車機屏幕以便減小內部UI資源開發和管理成本的方式受到愈來愈大的挑戰：軟件包的Size不斷增長，對安裝空間和用戶流量提出更高要求、多套UI資源的維護成本愈來愈高、拉伸或者縮小致使適配效果上存在各類失真的狀況。

本文小結了高德技術團隊在車載導航自研圖片格式解決方案上的探索和實踐，但願對你們有所啓發。

本地化方案和動態化方案的比較

行業上的解決方案基本上分紅兩大類：

本地化方案：UI資源存在於軟件包中，而後從圖片格式入手，解決使用過程當中的性能和成本問題。

動態化方案：經過在線識別目標機器的硬件配置，動態下載合適的UI資源，經過在線的方式動態生成。

從車機應用的角度思考，這兩種方案的優缺點以下：

從以上能夠看出，當前階段，業內的車載生態體系的建設並不健全，採用本地化方案更具備現實意義。在大屏時代，隨着硬件性能的逐步提高，矢量化的圖片方案會成爲將來應用的趨勢。因而，咱們決定在圖片矢量化方向上開展建設，以肯定適合高德車載的圖片適配方案。

矢量化方案的探索與實踐

如下是經常使用的矢量圖片方案的能力支持狀況：

注：Shape支持簡單的Path指的是：矩形、圓角矩形、橢圓、線。

經過除動畫外的經常使用圖形設計元素進行對比，能夠看出除SVG外，其它表達方式在當下個性化訴求下，存在必定的不知足性。所以，SVG應該是高德車機在矢量圖上的最優選擇。

SVG在車載業務上的適用性分析

車機硬件屬於嵌入式硬件，車機上的導航應用，一樣要遵循通常的規則，即用最少的資源（磁盤、內存、CPU）取得最大的運行效果。結合高德業務的需求，經過對SVG格式的分析，咱們發現了SVG格式存在以下的不足：

• SVG文件類型爲文本文件，讀寫效率存在必定的提高空間；
• SVG數據中存在大量非必要數據，對文件大小和讀寫效率存在影響；
• 高德業務中，存在大量差別性較小的資源，須要提供更優的解決方案；
• UED在提供的設計資源中可能會提供.9圖片，須要考慮合適的支持方案；
• 不支持顏色描述主題化、圓角信息ID化等爲支持高德動態HMI所需的需求；

基於以上分析，爲了知足業務的需求，咱們考慮擴展標準的SVG格式建立高德自用的圖片格式，格式名稱定義爲ASVG（Amapauto SVG）。

ASVG在車載業務上的實踐

ASVG在車機導航中，須要經歷以下四個環節。咱們主要從建立、解析和繪製環節對ASVG的使用進行了優化。

1.針對建立環節，從ASVG格式的角度進行優化：

數據結構優化

在SVG的設計意圖自己是更加傾向於讓使用者更易用，因此在表達矢量化過程當中存在大量冗餘的意圖數據，這致使使用過程當中存在較高的解析成本。在嵌入式系統上，咱們須要充分利用格式中的每個字節，有效提升讀取效率並下降資源大小。

對SVG進行解析並將對應的節點和屬性變成一個特定的中間結構，並扁平化存放，除magic等數據外，其它數據可直接用於圖形運算，去掉非必要數據，從而達到壓縮和提升解析效率的目的。以下表格：

完成優化後，整個運算過程當中再也不進行字符串運算，在連續內存中讀取順序變量Buffer並進行賦值，解碼時間降到微秒級別，資源大小平均縮減60%左右：

結合業務去冗餘

在車機導航應用中，同一個控件對象在不一樣的場景下，UED會製做不一樣的圖片資源。以下圖，設計師根據晝夜不一樣的色彩飽和度和陰影效果來達到車標Icon的設計效果。

這種狀況下，形狀描述相關信息基本一致，經過設計中間結構在圖形狀態及主題上進行去冗餘。

點9圖片ASVG化

點九圖片是PNG柵格圖片中一類特殊的圖片。將點九圖片ASVG化，面臨點九圖片信息管理的問題。

對策方案：

a.從數據結構上，將點九信息從點九圖片中拆分出來。點九信息直接存入ASVG文件中,將點九信息直接數據化。

b.從規則上，製做點九圖片時，保證點九信息的點九長度只有一個像素，點九信息周圍一個像素點也能夠作點九信息點。保證在矢量圖片縮放過程當中，解決進退位計算帶來的點九長度位置偏差。

2.針對解析和繪製環節，選擇合適的矢量方案：

矢量圖形的解析方案

矢量圖形的解析就是將矢量圖形中的Path部分翻譯成可由GPU繪製形狀。方案主要有兩種：

方案A. 將Path經過分格化（tessellation）分格成多個小的凸多邊形。最後，利用標準渲染API直接完成繪製。

方案B. 將Path經過路徑解析利用掃描線的方式，將Path轉成一張bitmap。最後，利用標準渲染API直接完成繪製。

矢量圖形解析方案的效能對比

下圖是各矢量圖形繪製方案的解析效率對比。在同等試驗條件下，方案B的加載和解析效率要高不少。

矢量圖形方案的繪製效果對比

在顯示效果上，車載終端的設備差別較大，部分設備不支持抗鋸齒能力。使用方案A繪製出來的圖形在處理斜多邊形部分會出現鋸齒，而使用方案B繪製出來的圖形卻平滑不少：

綜合考慮，咱們採用方案B做爲ASVG矢量圖的最終方案。

小結
經過ASVG的使用，高德車載導航業務取得了較大收益，在界面顯示效果、圖片加載效率、資源維護效率等方面有了很大提高，同時APK包大小大幅降低。面對車載行業個性化需求及5G時代的到來，「顯示」做爲用戶在車載交互體驗中重要的一環，咱們將在爲用戶提供感官上更加真實的體驗方面不斷創新，後續也會在該方案基礎上融入更多能力和提供相關工具，在動態化、主題定製等場景擴大使用範圍。