阿里妹攻略：疫情之下，宅在家就是保护自己。相信大家可以一起渡过难关，早日迎来与亲友一起看电影看球直播的日子。今天，我们就来说说如何在10万人的大型场馆“刷位子”？怀念从前的快乐相聚，期待下次再见。说到“抽座”，最常见的场景莫过于在线选座、影院购票。这个场景的需求对于开发者来说并不难，但是你知道10万座的大场馆怎么画吗？如何应对座位不固定、场景复杂等一系列挑战？下面阿里文娱技术专家梦娜和阿里文娱高级工程师土豪将为大家揭秘。一、背景1、网上售票需彩绘席位：购票所见即所得。大麦的主要业务是票务，包括演唱会、体育赛事、音乐节等，种类繁多。卖票需要画场地和座位。大家都在网上买过电影票，这也不难理解。虽然可以用电影票销售类比，但背后的难度差别很大。没有10万座的电影院，但有10万座的演唱会，演出/体育场馆变化多端，所以挑战还是蛮大的。2、大麦绘图座椅的演变：从示意图到实景图。大麦之前的绘图系统是程序的安装版。座位只能一个一个抽出，看台之间没有任何联系。几乎每一个看台都能画出来，看起来都一样，而且只有一张座位相对位置示意图，没有角度，没有距离，更谈不上精确定位。图1：旧版画座页面（废弃）大麦网2017年开始设计新版画座系统，这里没有修复，没有重构，全新的布局完全重做，并且甚至技术栈也从.NET换成了Java，从C/S换成了B/S。新会作以SVG矢量图为核心，通过Canvas进行绘制，在演化过程中克服了大量的性能和技术难关，最终成型，任重而道远。图2：新会座的页面2.新会座：Flash没了，Canvas来了1.Flash死了，到了路口，别无选择。命中注定。老版本的选座和选座是基于Flash的。可悲的是，Adobe宣布2020年后不再维护Flash，相关技术也将在2020年底退役，大麦的绘图席位和席位选择系统被迫转型。Flash只是原因之一。看了竞争对手的产品，你会发现SVG是一个很好的方式。即使没有Flash，大麦网也会朝这个方向发展。2、技术选择1）任何过度使用DOM的应用程序都不会很快。经过技术研究，发现国外一些体育场座位是采用SVG方案绘制的，每个座位都是一个独立的SVG元素。但是，如果直接把SVG移到浏览器上，是无法支持几万座的场地的，因为浏览器无法支持太多的DOM，一旦DOM数量过多，运行起来肯定效率低下。“任何过度使用DOM的应用程序，都不会太快。”于是，技术同学想到了Canvas，也就是浏览器上的画布。不管上面绘制了多少元素，对于浏览器来说，它都只是一个DOM元素。对于不了解Canvas的同学，我们可以简单说明一下，Canvas是在浏览器上的，就是下面这个标签：在Canvas上绘图就是用JS获取Canvas对象，使用封装好的方法进行绘图。Canvas上的图形变化完全通过擦除+重绘的方式展现出来。那么新会早的目标就变得非常明确了。我们想在Canvas上绘制出想要的场馆座位图，然后将地图保存为SVG格式，供选座和售票之用。2）Canvas不是灵丹妙药：单个Canvas的大小是有限制的，超过限制就会卡住。选型前期，技术同学用Canvas+SVG做了一个demo，模拟了10W座位的渲染，实现了拖动缩放。但是当真正开发成绘画座组件的时候，发现座达到2W就出现了卡顿，因为Canvas的宽高达到一定值，就会出现卡顿。于是，技术同学按照将整个canvas打散的思路，将整个canvas分成了多个Canvas，组成了一个Canvas矩阵。通过对各个Canvas的操作，完美解决了单个Canvas过大导致卡顿的问题。关于Canvas绘图组件，网上可以找到很多资料，这里就不赘述了。3、新版土佐初期：青苹果新版土佐刚刚上线，就像一个青苹果，虽然漂亮，但没有那么好吃。最突出的问题有两个：第一是变形难用，因为算法比较简陋，座椅矩阵变形很难满足用户需求；二是接口速度慢，开个1W席位的会场要几分钟，超过5W，直接死机，根本支持不了。为什么理想如此丰满，结果却不尽如人意？根本原因是第一个版本只注重功能，忽略了算法的效率。和服务器的接口调用都是整个场馆层面的，几万个座位数据，再加上关联的看台、门票、状态等等，一个巨大的数据包在前前后后丢来丢去结束，系统不堪重负，用户疲惫不堪。折磨。4.艰巨的改进之路新会座上线后，随即启动了改进优化项目。主要需要克服三个难点：1.页面响应时间；2、座椅自由组合变形；3.印刷顺序计算。1）交互+界面优化。秒开时代首先要做的就是解决界面慢的问题，而解决效率低下的法宝：化整为零。从一次加载一个体育场的数据，到一次加载多个看台的数据。服务器端数据随着前端视口（页面可见范围）的变化而逐渐加载，类似于地图中常用的“拉出查询”。前端交互也由全加载改为视口取数据。仅此一项优化，数万个大型场馆的系统响应速度立刻从几分钟下降到1~2秒，小型场馆瞬间开启，系统使用方便了许多。这里最重要的技术点是视口计算。原理是这样的：前端先获取屏幕视口在Canvas画布上的坐标，然后与支架的外接矩形进行碰撞检测。一旦两个矩形相交，就意味着Thestand已经暴露在视口中，因此加载了该stand的数据。从界面优化入手，新会座逐渐走向成熟。图3：viewport加载示意图2）Mergeseatmatrix，freedeformationseatfreedeformation包括倾斜，错位，行距，座距，旋转，弧度等多种操作。除了圆弧变形，其他的基本都是一些数学坐标计算，我们就不细说了，这里重点说一下圆弧变形。全新的弧形变形利用贝塞尔二阶曲线原理，根据用户输入的数据计算出对应的贝塞尔曲线，然后在曲线上均匀排列每一排座位。以下为二阶贝塞尔公式：图4：贝塞尔曲线示意图注：P0、P2为一排座位（一排第一个和最后一个座位）的左右端点。好像一套公式就可以搞定，很简单。但是这里有一个难点：从图中可以看出t是一个比例值，不同比例下线段P0P2的圆弧位置是不同的。如果所有的座位都在P0P2线段上，还好计算，但是如果座位前面有弧线怎么办？中间的所有座位都不在P0P2线段上，如何计算中间座位的每个比例？我们用圆弧对每个座位，做一条P0P2线段的竖线。垂线与线段P0P2的交点即为这些座位所在行的原位置。计算这些原始位置的坐标。根据这些原始位置，你可以计算出所有中间位置的座位比例。这样圆弧形变问题就完美的通过贝塞尔二阶曲线解决了。图5：弯曲座椅矩阵贝塞尔曲线变形示意图图6：弧形变形实际操作图7：座椅可以自由组合，随意变形3）打印顺序计算“打印顺序”是什么鬼？说起来，主办方有时会分批出票，分发给相关人员，有时是整个展台一起打印。分配门票时，需要根据座位的物理位置进行排序，避免座位不相邻、“两口子”“分手”的情况。例如：在下图中，组织者希望打印门票的顺序是“5-3-1-2-4-6”，而不是“1-2-3-4-5-6”，这样他们可以按打印顺序匹配票，不用担心两张票不会挨着。然后，在绘制座位的过程中，我们要计算座位的顺序，看似简单，实现起来却非常困难。原因只有一个，场地的形状不同，座位的排列也多种多样。图：8：北京奥林匹克体育中心某看台。如果上图可以根据座位Y坐标的比较进行排序，那么下面的情况就没那么好处理了：图9：各种特殊座位布置对于场景打印问题，我们通过总结场景来划分场地，终于找到了排序规则，解决了。打印问题技术方案的原理：第一步：将场地划分为8个象限，各象限内的座位如何排序已经标注（标注是比较X坐标还是Y坐标排序）；步骤2：将座位矩阵每组Group，取出第一行，求第一个和最后一个座位连线的斜率，然后根据斜率将座位矩阵分成相应的象限；step3：根据对应象限的排序标记，比较座位的X坐标（或Y坐标），进行座位排序。图10：座位排序示意图4）在解决了“沙发和角度”效率、变形和小彩蛋打印三大问题后，大量的产品优化需求出现，我们开始关注细微之处，比如小沙发和Seatangle就是两个典型的功能。这两个功能虽然难度不大，但是却大大提升了体验。图11：圆点和沙发效果对比5）小彩蛋的“回缩”不断优化和添加，大麦绘图系统越来越像专业的绘图工具。好的绘图工具必须具有“进退”功能。新绘图座位系统退出功能的实现原理：设计一个“历史数据”数组，数组中的每一个元素，记录一个操作步骤对应的编辑座位数据和座位位置信息，找到对应的数组返回元素时的操作步骤，重新绘制座位位置??，从而回滚整个操作。因为无论座椅的相对位置如何变形，本质上都是坐标数据的变化。通过记录和重绘历史坐标信息，达到撤单操作的目的。3、在正确的道路上前行到目前为止，新的绘图座椅系统已经能够承接国内外任何大型场馆的绘图座椅项目，各种细节的优化也日趋完善，并且效率得到了很大的提高。然而，产品与技术同学的努力并没有停止，而是在正确的道路上继续前行。这里有几个有用的功能供大家参考：1）区域编辑：自由绘制矩形、圆形、多边形等形状，自由变换；2）一键自动变形：选中看台内所有座位，点击“一键变形按钮”，座位瞬间适应看台形状自动排列。图12：一键变形效果图3）座位复制和镜像：分区用户可以自由复制选中的座位，支持镜像、翻转等多种复制方式，行号和座位号根据需要自动处理。设置；：用户选中一个看台数据，点击“一键正对舞台”，系统会自动计算出舞台方向和座位角度，瞬间“对齐”整个看台座位。
