html怎么添加导航图片格式,高德车载导航自研图片格式的探索和实践
背景
随着近年来车内多媒体设备从无屏向有屏的发展,市场上出现了各种形状、尺寸和分辨率的车机屏幕,其丰富程度远远超过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时代的到来,“显示”作为用户在车载交互体验中重要的一环,我们将在为用户提供感官上更加真实的体验方面不断创新,后续也会在该方案基础上融入更多能力和提供相关工具,在动态化、主题定制等场景扩大使用范围。
关于找一找教程网
本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[高德车载导航自研图片格式的探索和实践]http://www.zyiz.net/tech/detail-116198.html
html怎么添加导航图片格式,高德车载导航自研图片格式的探索和实践相关推荐
- 高德车载导航自研图片格式的探索和实践
背景 随着近年来车内多媒体设备从无屏向有屏的发展,市场上出现了各种形状.尺寸和分辨率的车机屏幕,其丰富程度远远超过Android适配的手机屏幕. 高德车载导航过去采用的多套UI 图片资源,通过拉伸.缩 ...
- 高德车载导航Android平台DR回放技术方案
导读 DR:(英文为Dead Reckoning,航迹推算).用于推算的传感器大致有:陀螺仪.四轮速.车速脉冲.3D加速度计等.在车载导航中,航位推算是使用先前确定的位置,通过测量移动的距离和方位,计 ...
- 凯立德地图导航2020年最新版车载_明明有车载导航,为什么很多人还是选择用手机导航?有5个原因...
提到导航,你首先会想到什么导航产品呢? 如果是高德导航.百度导航之类的,那你主要用手机导航. 但是如果除了高德导航和百度导航之外,你还能随口说出四维图新导航.凯立德导航,甚至是道道通导航之类的话,那你 ...
- 移动简报026—智慧餐厅出新服务:吃饭用微信就可排队;支付宝上线银行卡安全险:盗刷最高获赔 50 万;高德正式发布车载导航App...
移动简报026 [移动营销] 艾瑞:2015年中国移动广告市场规模突破900亿 2015年移动广告市场规模达到901.3亿元,同比增长率高达178.3%,发展势头十分强劲.移动广告的整体市场增速远远高 ...
- arcmap给tif添加地理坐标_如何将JPG格式的图片转化为带地理坐标的TIFF格式
最近有个项目需要用到开源软件GeoServer,数据源是一张高分辨率的2.5维图片,格式是jpg的,由于GeoServer不支持jpg格式的发布,因此考虑到要进行格式转换,将其转换成tiff格式. 1 ...
- 导航上显示某个地点已关闭什么意思_导航只认手机高德和百度?已经有车载导航帅到我了...
汽车的本质是运输工具,运输人或物,本来并不需要联网,但这已成为过去式 时间的脚步已经到了 9102 年,新车上市如果不提车联网方面的建树,已然不好意思说自己是新车.但在大多数车主的印象中,似乎还是没有 ...
- 新旧手机改车载导航,随车点火开机,熄火关机,全自动化操作,语音控制导航
第一次写文章多多见谅 第一步手机必须root,自己手机怎么root自己百度方法,需要的软件有地图软件,百度carLife.高德地图车机版.根据个人爱好自己选择(个人推荐百度carLife,主要因为可以 ...
- 飞歌viper4android,【图】六步教你如何正确使用飞歌3G四核智能车载导航_汽配中国网...
1.准备一个一拖四的USB集线器 飞歌G7四核机,只有一个USB口,如果又要插U盘听歌看视频,又想同时给手机充电,那么一个USB口是不够的. 还好,G7支持USB集线器,只要买一个一拖三,或者一拖四的 ...
- 车载导航应用中基于Sketch UI主题定制方案的实现
点击上方蓝字,关注高德技术! 1. 导读 关于应用的主题定制,相信大家或多或少都有接触,基本上,实现思路可以分为两类: 内置主题(应用内自定义style) 外部加载方式(资源apk形式.压缩资源.插件 ...
最新文章
- 玻利维亚java_BlogJava
- C# 字符串 数据类型 判断 与特定规则验证
- 【正一专栏】读《怎样做社会研究》——社会研究的意义
- Jquery Mobile转场特效之slide | 小小iPhone开发
- shell中的>/dev/null 2>1(转载)
- pat 乙级 1020 月饼(C++实现)
- VBA——Msgbox
- 26.idea导入jar包
- 30万条数据,搜索文本字段的各种方式对比
- mysql 改表面_CSS表面(outline)是什么【html5教程】,CSS
- RMAN-06023: no backup or copy of datafile 6 found to restore
- 【ElasticSearch】es Elasticsearch压测实战 II esrally 进阶实战 笔记
- Linux stat命令和AIX istat命令 (查看文件修改时间)
- 亲历者说:Kubernetes API 与 Operator,不为人知的开发者战争
- Excel数据透视表教程小结
- js解压gzip(解决RangeError: Maximum call stack size exceeded)
- ssm房屋中介管理系统毕业设计(附源码、运行环境)
- Javascript DOM readyState 属性
- ddl是什么意思网络语_ddl是什么意思(网络语ddl是什么梗)
- 硅谷中那些潜在的颠覆世界的力量