10倍高清不花!大麦端选座SVG渲染

用户在大麦上购票,需要自行选座。在大型场馆下,如何让10万+座位绘制达到闪开?这需要技术在绘制上保证性能流程,在选座渲染上通过技术手段赋予更多可能性。因此,大麦引用SVG绘制技术,并根据业务场景下作了很多优化,本文是大麦在用户端的技术方案设计与应用实践。

10万+座位绘制面临以下挑战

大麦C端场景下SVG应用

1.SVG介绍

可伸缩矢量图形(ScalableVectorGraphics),用来定义用于网络的基于矢量的图形,使用XML格式定义图形,图像在放大或改变尺寸的情况下其图形质量不会有所损失,是万维网联盟的标准,DOM和XSL之类的W3C标准是一个整体,不失真,兼容现有图片能力前提还支持矢量(浏览器兼容情况),通过浏览器很早版本支持情况在主流浏览器都支持,SVG提供的功能集涵盖了嵌套转换、裁剪路径、Alpha通道、滤镜效果等能力,它还具备了传统图片没有的矢量功能,在任何高清设备都很高清。

图1SVG与其他格式图片比较

2.SVGKit使用

浏览器默认就支持SVG渲染,属于XML-Dom家族系列,但是在移动端上并没有做原生支持,还是按照XML进行的读取,支持的开源库也不多,在IOS上,目前OC版本SvgKit还不错,官方Github也在继续维护,虽然更新较慢,通过几次patch提交PR还是很快merge的,一些通用属性和控件支持的不够完善,需要进行定制开发,swift版本的macaw也不错,在动画效果上更加酷炫,目前也正在做swift效果迁移到OC中,渲染流程如下:

图2SVGKit渲染加载流程图

1)SVGKit有哪些标签?

circle=SVGCircleElement;【圆形】clipPath=SVGClipPathElement;【层叠路径】description=SVGDescriptionElement;【描述】ellipse=SVGEllipseElement;【椭圆】g=SVGGElement;【容器标签】line=SVGLineElement;【直线】path=SVGPathElement;【路径】polygon=SVGPolygonElement;【多角形】polyline=SVGPolylineElement;【多边形】rect=SVGRectElement;【矩形】svg=SVGSVGElement;【SVG容器标签】switch=SVGSwitchElement;【选择】text=SVGTextElement;【文本】textArea=TinySVGTextAreaElement;【区域文本】title=SVGTitleElement;【标题】2)扩展基于三端统一SVG标签和属性

图3SVG标签属性扩展大图

3)SVG标签在SVGKit中渲染流程

a)SVGKit核心渲染原理分析

视图SVGKFastImageView.m加载到窗口显示核心中心处理类,主要加载SVG文件资源文件

类:SVGKimage:NSObjectSVGKParseResult*parsedSVG=[parserparseSynchronously];//解析SVGKImage*finalImage=[[SVGKImagealloc]initWithParsedSVG:parsedSVGfromSource:source];

b)分析:

解析SVG-到合成ViewLayer初始化SVGKSourcesourcesvg资源实例初始化SVGSVGElement->DomTree初始化SVGDocument->DomDocumentCALayerTree最终合成的Layer树SVGKParser*parser=[SVGKParsernewParserWithDefaultSVGKParserExtensions:source];开始解析

c)解析XML类SVGKParser:NSObject解析SVG(XML)文件

+(SVGKParser)newParserWithDefaultSVGKParserExtensions:(SVGKSource)source(SVGKParseResult*)parseSynchronously.解析异常处理XML解析处理XML解析过程SAX//每解析一个Node添加到DOMTree中.(SVGKParserStyles)SVGKParserDefsAndUse【解析useAndDefs样式】SVGKParserDOM【解析DOM】SVGKParserGradient【解析渐变标签】SVGKParserPatternsAndGradients【解析图案】SVGKParserStyles【解析样式】SVGKParserSVG【解析SVG标签】d)解析XML中CSS样式类SVGKParserStyles:标签解析到生成Layer层1.类:SVGKParserDOM.m:SVGElement.2.核心思想:SVG标签渲染流程一、SVGKImage.m渲染核心思想:遍历DOM映射到iOSlayer绘制3.生成UILayer:-(CALayer*)newCALayerTreeCALayer*newLayerTree=[selfnewLayerWithElement:self.DOMTree];CALayersublayer=[selfnewLayerWithElement:(SVGElement)child];[newLayerTreeaddlayer.Sublayer][elementlayoutLayer:layer];[layersetNeedsDisplay];

4)SVGKit分析总结

[NSDatadataContentWithBase64Str:str]

3.基于CSS着色能力

1)为什么用CSS着?

SVG虽然是绘制图形,原理如同HTML,是给每一个标签设置一个单独style好还是通过CSSId/class映射好呢,这个思路和HTML处理STYLE样式是一样的,便于更改和维护,在性能上也更好,同时增加了important属性,可以更好的配置样式,可做到运营侧根据样式style下发方式达到更改SVG图效果,可以做到更多活动效果及个性化需求。

2)SVG-CSS着色渲染过程

SVG标签基于CSS样式快速应用,通过遍历DomTree,找到对应的Node节点,在给node节点设置id或者class,然后局部刷新Tree父节点,实现换色,细节流程如下

图4CSS着色原理与时序图

3)大麦端选座渲染效果

图5CSS着色渲染效果

4)CSS着色原理总结及性能比较如何确定属性使用的是CSS颜色还是自带style属性?

当SVG在解析生成DomTree后,我们可以根据CSSStyle样式存储的CSS样式,给Node标签设置id及class,当更改nodeList后,相当于树结构进行了修改,在绘制时候查找属性会根据优先策略id>class>进行查找进行属性赋值,我们根据CSS属性!important来设置最高优先级,这样就避免了此问题。

端侧渲染流程如下,左侧:是基于node遍历后修改,右侧是修改id/class方式【推荐】。性能比对:为了兼容W3C标准,端上增加了CSS特殊属性important。

图6SVG-Codec总体性能提升对比

4.SVG约束DTD

1)背景介绍

当SVG生产端在制作SVG图,可能会用到Adobe等软件,有很多复杂属性及层叠,可能会产生复杂XML格式,这样在渲染过程中会造成大量遍历,影响性能,也有一些特殊属性,端上并没有支持,例如滤镜、动画,这样,我们就需要有一种约束来校验生产和渲染SVG能够一致。

2)文档类型定义

(DTD)可定义合法的XML文档构建模块。它使用一系列合法的元素来定义文档的结构。

3)定义一个名为note的DTD

一个DTD的内容示例:

其中:

!ELEMENTnote定义note元素有四个元素:"to、from、heading、body"

!ELEMENTto定义to元素为"#PCDATA"类型。

PCDATA的意思是被解析的字符数据(parsedcharacterdata)。可想象为XML元素的开始标签与结束标签之间的文本,PCDATA是会被解析器解析的文本。这些文本将被解析器检查以及标记,文本中的标签会被当作标记来处理,而实体会被展开,不过,被解析的字符数据不应当包含任何&、<或者>字符;需要使用&、<以及>实体来分别替换它们。

它表示在和之间可以插入字符或者子标签,CDATA的意思是字符数据(characterdata,CDATA是不会被解析器解析的文本。在这些文本中的标签不会被当作标记来对待,其中的实体也不会被展开。

5)如何校验

其中,必须设置setValidating(true);才能使DTD校验xml生效,为方面使用,提供了可以动态读取dtd的方式,为不需要将dtd信息添加到svg的文件中:执行Java-jar命令,传入两个参数:一个是svg的全路径;一个在同目录下的dtd的文件名(带扩展名)。

5.选座性能优化

1)性能调研:APP端/H5上渲染如何解决10万座位渲染,端侧通过组件复用,手机设备性能天然还是不错的,加上我们通过预加载资源与分区加载结合方式,点击区域后进行绘制策略,避免一次性加载全量10万数据,也给用户更好的交互体验,然而H5侧,浏览器就不那么流畅了,随着H5技术发展,H5新特性的支持,通过实践使用SVG方案,每个座位都用一个svg元素显示,由于svg的矢量特性,缩放无锯齿,展现效果比较好,但也就支持到3万左右的座位,座位再多也会出现渲染慢和缩放卡顿等问题。Svg的每个元素也算是一个浏览器的dom,dom数量一多起来,达到3万到10万,浏览器渲染显然不行。

图7选座性能优化-预加载

图8端选座性能交互图

6.SVG场馆彩虹图实现

1)SVG彩虹图介绍:

在售票选座业务中,需要为用户显示场馆图(SVG格式),给用户一个场馆的整体印象,同时方便用户选择场馆的看台,进而展示看台座位进行选座。但是,在使用彩虹图展示场馆图之前,场馆图的看台区域仅展示看台当前可售座位中的最高票价对应的颜色进行展示,如下图所示:

图9非彩虹场馆图

每个看台都是单一颜色的,不能反映出当前看台中可售的座位的价格分布情况,很容易迷惑用户,造成每个看台只有一种票价的印象,同时不方便用户快速定位他的目标价位所在的区域。为了准确的反映出场馆每个看台的价格情况,需要将看台中所售的所有的座位的价格展示出来,因此,采用彩虹图的形式。目标效果如下所示:

图10彩虹场馆图

每个区域的所有的座位价格以彩虹的形式显示出来,相比以前的只显示最高票价的颜色,彩虹图可以清晰的展示每个区域中座位的价格情况。

2)总体思路:在每个看台区域中以彩虹图形式展示多个颜色,就需要将每个看台区域进行划分,放弃之前用一个这类的绘制标签来展示一个看台区域,一个区域内应该包含多个排,对每个排按照座位价格进行着色,进而对每个看台进行同样的处理,总体上形成彩虹样式展示。因此,一个看台区域,应该是多个svg标签组合而成的。如图:

图11SVG文件说明

对SVG底图进行改造,将老的一个SVG标签代表一个看台区域的形式,改造成每个看台区域由标签进行包裹的多个标签的组合。

为了方便降级,处理不显示彩虹图的业务需求,同时约定标签下的第一个标签,表示整个区域,同时不再解析渲染后面的排信息。

3)算法生成彩虹图方案a)介绍:

彩虹图生成算法主要是通过座位的分布和座位的票档圈出一个看台中相同票档座位的范围,然后生成一个path路径。将这些path路径加入到svg底图中去并且和相应的票档绑定,就能实现一个区域多种颜色的效果。

b)步骤如下:

对看台中所有排和座位进行分组排序;

②计算看台方向;

③获取同种颜色座位边界;

④计算色块的方向;

⑤获取色块的路径;

⑥生成看台的彩虹图效果;

⑦遍历所有看台生成完整的彩虹图。首先将某个看台所有座位按排分组,然后将排按排号从小到大进行排序。数据结构如下:

图12看台编号与座位号示例

座位数据是必备的基础数据,后续一切的计算都依赖于座位数据。通过第一排和第二排座位的相对位置算出看台的方向。

比如:拿到1排1号和2排1号座位的坐标,从2排1号向1排1号画一条射线,这个射线的角度就当做看台的方向。

后期如果在生产SVG的时候将舞台位置标记出来的话就可以利用舞台来确定看台方向。

图13看台方向-1

每个看台的座位分布可以分成两种,一排一种价格和一排多种价格。其中一排一种价格的情况就以同色最后一排为边界。如下图绿色的线。一排多种价格的情况就需要把每一排不同颜色转换处的那两个点记录下来连成边界线。如下图红色和黄色的线。

图14看台方向-2

红黄绿三条线所在的座位就是我们需要的色块边界。拿到色块边界座位数组之后还需要知道色块的角度。一排同色的色块方向就直接使用看台

的方向。一排多色的色块方向计算方法如下:

图15确定颜色区域-1

将第一个座位P1和最后一个座位P2连线,取这个线段的垂直线a1和a2。用这两条垂直线分别和看台方向取夹角。夹角小于90度的垂直线的角度作为色块的方向。图中a1就是色块的方向。得到色块边界和色块方向后就可以计算色块path的路径了。

①得到包含这个看台path路径的最小矩形rect(图1);

②从上一步获取的座位边界数组中取四个点分别为:第一个点P1,第二个点P2,倒数第二个点P3,最后一个点P4(图2);

③由P2向P1方向做一条射线得到和rect的交点A1,由P3向P4方向做一条射线得到和

rect的交点A2(图2);

④根据色块方向获取色块路径的几个关键点:A1A2A3(图2);

⑤将几个关键点和座位边界所有点连接起来生成一个闭合的路径(图3橙色线框)。

图16确定颜色区域-2

拿到所有色块路径后就可以将色块填充对应的颜色并且按顺序叠加到看台上形成彩虹图效果。

色块的叠加方式如下:色块的生成顺序是path1->path2->path3->path4,然后倒序叠加到看台上path4->path3->path2->path1。最后就是遍历所有的看台,生成一张完整的彩虹图。

图17确定颜色区域-3

总结

本文主要讲解了大麦核心链路选座SVG应用,并结合实际场景做了一些创新尝试,包括:丰富SVG应用的业务场景、SVG标签属性及扩展、CSS着色、渲染性能优化等,目的是让端解析接近浏览器解析效果,并提供更好的端选座性能体验。

THE END
1.飞机安全座位图飞机安全座位图,指飞机出事时,飞机座位相对安全的位置,在不同的情况下,不同的位置生存率都有所不同。 快速导航 词条图册 中文名 飞机安全座位图 制作 格林威治大学 1简介 编辑 飞机安全座位图飞机安全座位图,指飞机出事时,飞机座位相对安全的位置。但其科学性还有待证实。 https://baike.sogou.com/v60828968.htm
2.南美四国行巴西篇:马瑙斯1890~1920年间因周围橡胶业繁荣而得以快速发展。1912年橡胶出口居世界第一位。1967年巴西政府把该市辟为自由贸易区。 这段水域是巴西的一个海军军港, 岸边有几艘军舰。 这是岸边的大型集装箱码头及仓库, 水域中的还有一艘集装箱船在卸货。 亚马逊流域中的巴士, https://www.meipian.cn/1umfhtoh
3.幼儿园数学幼小衔接教案(精选19篇)⑴用图画纸画鱼,并用剪刀剪下来,再用回形针夹在鱼的嘴巴上,一只鱼就完成了,鼓励幼儿制作不同种类的鱼。 ⑵接着,利用竹筷子、毛线、磁铁制作钓竿:将毛线的一端绑上竹筷子,另一端绑磁铁。如果担心不牢,可用胶带固定,不要缠太厚的胶带即可。 ㈡团体活动 https://www.yuwenmi.com/jiaoan/youeryuan/3676077.html
4.端午节活动策划书(15篇)1.1营销店各制作横幅一条,悬挂于xx店店招下。 1.2门口处用气球进行布置,可选择吊挂式或是拱形悬挂式。 2.场内布置 2.1商场内主要是对专区进行布置,配合商品合理布置。 2.2对主通道重点布置,可用气球悬挂(见附图)。 2.3专区可用粽子悬挂成形状(如端午节快乐等) https://www.9136.com/shiyongwendang/cehuashu/190259.html
5.荐幼儿园中班社会教案提问:图上看到了什么?安全网有什么作用?红色横幅告诉大家什么? 2、 观察有各种大型建筑工具的图片 提问:这些建筑工具的名称叫什么?它们分别有什么本领? 3、 欣赏工人打地基、砌墙、做框架、刷墙等的图片 三、感受建筑工人的辛苦劳动 1、 讨论:你觉得建筑工人辛苦吗? https://www.cnfla.com/jiaoan/2668563.html
6.会议实施方案(12篇)(四)参会领导安排主席台桌椅,各市级部门和县(市)区领导在观众席前排就座,其他人员依次就座。印制全体参会人员座位图,确保对号入座,并装入文件袋。参会各单位座签核对、增补及摆放,段瑛琦负责; (五)会场安排4名服务员负责茶水服务,发奖仪式安排礼仪小姐,**负责; https://www.liuxue86.com/a/5028998.html
7.开工典礼策划方案(通用10篇)9、提供宣传展板内容,制作现场分区及领导座位分布图; 10、安排主席台座次,负责联络到奠基区参加奠基的领导; 11、负责庆典仪式经费预算安排和审计工作; 12、负责庆典仪式各组工作督促检查。 (二)接待组 组长: 副组长: 成员: 主要职责: 1、发送邀请函; https://www.yjbys.com/cehuashu/2733813.html
8.2024西安无界长安演出(时间+地址+时长+座位图+价格表)记录大国盛典,探索演艺科技,制造城市名片,这就是西安无界长安,是中国首部大型驻场观念演出,以“长安”为原点书写丝路新篇,将传统艺术和现代科技相结合,为观众带来一场视觉文化盛宴,演出票价、介绍、演出时间等内容快来看。 西安《无界长安》演出开放时间:全年 周一, 周三-周日 17:00-20:30开放;全年 周二 全天不开https://www.dahepiao.com/lvyounews1/20240531467572.html
9.婚宴的礼仪七、制作座位图 一张座位图表,可以让婚礼井然有序,还能彰显出新人的品味。图上有客人的姓名及餐桌的编号,以便让客人很快找到自己的座位,如果有领位人最好,宾客们会觉得自己受重视。图表放在婚礼迎宾区通往来宾席的位置。 八、桌号与名签 婚礼中每个桌子配备桌号是必备的,方便来宾入座。而名签,不必每个座位都有。https://www.jy135.com/zhichang/1547450.html
10.图标制作软件下载图标制作工具下载图标免费下载AxialisIconGenerator官方版是一款功能相当实用的图标制作软件,Axialis IconGenerator官方版可以帮助用户从专业图标集的大型数据库中生成矢量和位图图标,软件中有着各种图标模板帮助用户进行图标制作,Axialis IconGenerator最新版软件还支持的矢量格式有SVG,XAML,pdf,EPS,PS。 AxialisIconGenerator软件功能 1、生成矢量和位图图标https://soft.onlinedown.net/sort/81/
11.Vectorworks软件中文视频教程(2)案例丰富,首先使用Vectorworks软件绘制大型模型,出图纸,导入Depence软件,出图出视频编灯光秀。然后涉及到大量的第三方软件,比如BEYOND激光、Arkaos软件、Resolume Arena、Madrix、MA2模拟器、声光同步软件等其他辅助软件。4套案例,各种类型让你随心所欲,掌握绘图精髓。 https://www.dgyxpxsp.com/ease/903.html
12.图纸会审快速审查指南(2022年).pdf图纸会审快速审查指南 (2022 年第一版) 目录 第一部分总则3 1.1 编制目的3 1.2 基本注意事项4 第二部分房屋建筑工程图纸会审审查要点5 2.1 建筑施工图5 2.1.1 常规房屋建筑5 2.1.2 其他类型建筑 10 2.2 结构施工图 12 2.2.1 常规混凝土框架、框剪、剪力墙结构 12 2.2.2 其他类型结构或专业工程 15 2.3 https://max.book118.com/html/2022/0508/8121115125004077.shtm