1、网络售票，需要画座：购票所见即所得

大麦主要业务是票务，包括演唱会、体育赛事、音乐节等，品类繁多。卖票就要画场馆、画座位，大家都在网上买过电影票，这不难理解。虽然可以拿电影售票做类比，但底层难度差异很大。没有 10W 座的电影院，却有 10W 座的演唱会，而且演出 / 体育类场馆变化多，挑战相当大。

2、大麦绘座演进：从示意图到实际场景图

大麦以前的绘座系统，是安装版的程序，画座位只能一个看台一个看台地画，看台之间完全无关联，画出来几乎每个看台都长一个模样，座位只有相对位置的示意图，没有角度、距离，更谈不上精确定位。
图 1：老版绘座页面（已淘汰）

大麦网从 2017 年，开始设计新版绘座系统。这里没有修补，没有重构，新版绘座完全重来，连技术栈也由.NET 换成了 Java，由 C/S 换成了 B/S。

新绘座以 SVG 矢量图为核心，通过 Canvas 进行绘制，在演进的过程中攻克了大量的性能卡点和技术难点，最终打造成型，堪以重任。

1、Flash 已死，来到路口，别无选择

新绘座已诞生 2 年多，现在回首，这条路似乎早已注定。

老版绘座和选座是基于 Flash 的，悲剧的是，Adobe 宣称 Flash 2020 年后，将不再维护，相关技术会在 2020 年底全部退役，大麦的绘座和选座系统，都被迫转型。

Flash 只是原因之一，看过竞争对手的产品，会发现 SVG 是条不错的道路，即使没有 Flash 这一出，大麦网也会朝这个方向迈进。

1）任何过度使用 DOM 的应用，都不会快。

经过技术调研，发现国外一些场馆座位绘制，选用的是 SVG 方案，每个座位都是一个独立的 SVG 元素。但如果直接把 SVG 搬到浏览器，无法支持几万座位的场馆，因为浏览器无法支持过多的 DOM 数量，并且，一旦 DOM 数量太多，操作一定是低效的，“任何过度使用 DOM 的应用，都不会太快”。

于是，技术同学想到了 Canvas，Canvas 是浏览器上的一个画布，无论上面绘制多少元素，对于浏览器而言，都只是一个 DOM 元素。

对于不了解 Canvas 的同学，我们可以简单做个说明，Canvas 在浏览器上，就是下面一个标签：

在 Canvas 上绘图，就是使用 JS 获取 Canvas 对象，使用封装好的方法进行绘制。Canvas 画布上的图形变化，完全通过擦除 + 重绘的方式展现。

那么新绘座的目标就变得很明确了，我们就是要在 Canvas 上绘制出想要的场馆座位图，然后以 SVG 的格式把图形保存起来，用以选座、售票。

2）Canvas 也不是银弹：单个 Canvas 的大小是有限制的，超限之后也会卡顿。

选型初期，技术同学使用 Canvas+SVG 做了个 Demo，模拟了 10W 座位的渲染，并实现了拖拽、缩放。但真正作为画座组件开发的时候，发现座位达到 2W 就出现了卡顿，因为 Canvas 的宽高达到一定的数值，就会出现卡顿。于是，沿着化整为零的思路，技术同学将整个画布，分成了多份 Canvas，形成了一个 Canvas 矩阵，通过对每个 Canvas 的操作，完美解决了单个 Canvas 过大引起卡顿的问题。

关于 Canvas 绘图组件，大家可以在网上搜到很多资料，这里不再赘述。

3、新版绘座上线初期：青苹果

刚上线的新版绘座，就像个青涩的苹果，虽然漂亮，却没那么好吃。

最突出的问题有 2 个：第 1 个是变形难用，由于算法比较初级，座位矩阵变形很难满足用户需求；第 2 个是接口速度慢，打开一个 1W 座的场馆，好几分钟，超过 5W，直接崩溃，根本无法支持。

为什么理想很丰满，结果却差强人意呢？根源在于第一版只重功能，忽略了算法效率。与服务端的接口调用，都是整个场馆级别的，几万座位数据，加上关联的看台、票、以及状态等，一个硕大的数据包在前后端丢来丢去，系统不堪重负，用户受尽折磨。

新绘座上线后，立刻启动了改进优化工程，主要攻克的难关有三点：1. 页面响应时间；2. 座位自由组合变形；3. 打印顺序计算。

1）交互 + 接口优化，进入秒开时代

首先要解决接口慢的问题，解决效率低的一大法宝：化整为零。

从一次 load 一个场馆的数据，改成一次 load 几个看台的数据。服务端数据随着前端视口（页面可视范围）的变化，逐渐加载，类似地图常用的“拉框查询”。前端交互也从全加载，改为按视口取数据。仅此一项优化，几万座大场馆的系统响应速度，立刻由几分钟，降到了 1~2s，小场馆更是瞬时打开，系统好用了不少。

这里面最重要的一个技术点，就是视口计算，原理如下：

前端首先获取到屏幕视口在 Canvas 画布上的坐标，然后和看台的外接矩形进行碰撞检测，两个矩形一旦相交，就说明该看台已暴露在视口之内，于是就加载该看台的数据。

从接口优化开始，新绘座逐渐走向成熟。
图 3：按视口加载原理图

2）合并座位矩阵，自由变形

座位自由变形包括倾斜、错位、排距、座距、旋转、弧度等多种操作。除了弧度变形，其它基本上是一些数学上的坐标计算，我们不赘述，这里重点说一下弧度变形。

新弧度变形，运用贝塞尔二阶曲线原理，根据用户的数据输入，计算出相应的贝塞尔曲线，再把每排座位，均匀排列到曲线上。下面是贝塞尔二阶公式：
图 4：贝塞尔曲线示意图

注释：P0、P2 为一排座位的左右端点（一排的第一个座位和最后一个座位）。

看似套公式就可以搞定，非常简单的样子。但是这里有一个难点：从图中可以看出，t 为比例值，处在线段 P0P2 不同的比例，所在的弧度位置也是不一样的。

如果所有的座位都在 P0P2 线段上，很好算，但是如果座位之前就是一条弧线呢？

中间所有的座位都不在 P0P2 线段上，要怎么算出中间座位的每个比例？

我们通过弧线上的每个座位，做一条 P0P2 线段的垂线，垂线与线段 P0P2 的交点，就是这些座位所在这一排的原始位置，计算出这些原始位置的坐标，根据这些原始位置，就可以算出中间所有座位的比例了。

这样，弧度变形问题就通过贝塞尔二阶曲线完美解决。
图 5：弧形座位矩阵贝塞尔曲线变形原理图

图 6：弧度变形实际操作
图 7：座位自由组合，随意变形

“打印顺序”是个什么鬼？

这得从大麦的业务特点说起，主办有时候会批量出票并将票配发给相关人群，有时整个看台一起打印。在配票的时候，需要按照座位的物理位置关系排序，避免座位没挨着、“2 个情侣”被“拆散”的情况发生。举个例子：下图中，主办期望打印票的顺序是“5-3-1-2-4-6”，而不是“1-2-3-4-5-6”，这样他们就可以按打印顺序配票，而不用担心两张票不挨着。那么，在绘座过程中，我们就要计算出座位的顺序，看似简单，实现起来有难度很大，原因只有一个，场馆形状各异，座位排列多样。

图 8：北京奥体中心的某个看台

如果说，上图还能按照座位 Y 坐标对比进行排序，那么下面的几个情形，就不那么好处理了：
图 9：各种特殊的座位排列场景

打印问题，我们通过场景汇总，对场馆进行分区，最终找到了排序的规律，得以解决。打印问题技术方案原理：

第 1 步：将场馆分成 8 个象限，象限内的座位，已标识出该如何排序（标识出了应该对比 X 坐标还是 Y 坐标来进行排序）；

第 2 步：每一组座位矩阵，取出首排，求首尾座位连线的斜率，然后根据斜率将座位矩阵划分到对应象限；

第 3 步：按照对应象限的排序标识，对比座位的 X 坐标（或 Y 坐标），进行座位排序。
图 10：座位排序原理图

4）小彩蛋之“沙发、角度”

效率、变形和打印 3 个主要问题根解之后，随之出现了大量的产品优化需求，开始着眼于细微之处，小沙发和座位角度就是 2 个典型的功能。这两个功能虽然难度不大，但却在体验上有了一大步的提升。

图 11：圆点、沙发效果对比

经过不断优化和添砖加瓦，大麦的绘座系统，越来越像一款专业的绘图工具。好的绘图工具一定需要“前进 & 撤回”功能。

新绘座系统的撤回功能实现原理：设计一个“历史数据”数组，数组里的每个元素，记录一个操作步骤对应的被编辑座位数据以及座位位置信息，回退时，找到对应操作步骤的数组元素，重绘座位位置，这样就回退了整个操作。因为无论座位相对位置如何变形，本质上，其实都是坐标数据的改变，通过记录和重绘历史坐标信息，就达到了撤回操作的目的。

三、 在正确的路上继续前行

到目前为止，新绘座系统已能够承接国内外任何大型场馆的绘座工程，各种细节的优化也日臻完善，效率大幅提升。但产品和技术同学的努力，并没有终止，而是在正确的道路上，继续前行。

以下简单列举几个很实用的功能，供大家参考：

1）区域编辑：自由绘制矩形、圆形、多边形等各种形状，并自由变形；

2）一键自动变形：全选看台内的座位，点击“一键变形按钮”，座位瞬间适应看台形状，自动排列。

图 12：一键变形效果图

3）座位复制、镜像：区用户可以自由复制选中座位，并且支持镜像、翻转等多种复制模式，排号、座位号根据设置自动处理；

4）一键朝向舞台：用户选中一个看台的数据，点击“一键朝向舞台”，系统会自动计算舞台方向和座位角度，瞬间将整个看台座位“摆正”。

猫眼电影是一个在线购票的电影app，线上票价往往比电影院便宜，所以我们很多人都是在猫眼上买好了票再去电影院看，但是看多了电影总会遇到一个问题――赶不上怎么办？可能因为堵车、可能因为行程变动，总之赶不上电影是常有的事，但是以往只能白白的浪费票钱，没法改签，没法退票，但是近日猫眼电影在新版APP中提供电影票在线改签功能，未来在美团网电影频道、电影频道也可享受在线改签服务。那么怎么使用猫眼电影退票改签呢？小编下面就手把手教你用猫眼电影APP改签。

消费者购票后如果观影时间和场次临时有变，在影院限定的改签时间范围内（一般为电影开场前30～120分钟），均可通过猫眼的电影票在线改签功能在同一家影院任意更改观影场次及影片。据猫眼官方称，该项产品功能及服务均属业内首创，并且电影票改签服务免费，消费者无需退票，只要在已付票款基础上调整价差金额即可。

但是目前只支持通过猫眼电影app改签，通过美团和大众点评的电影频道无法进行该操作。

所以我们要先下载猫眼电影

①在【我的】-【我的电影票】-【未消费】中，找到要改签的电影票订单

②点击进入【电影票详情】，点击页面下方的【申请改签】按钮，开始改签

③在同一家影院，选择想看的影片和场次

④改签时，新订单的座位数，不得小于原订单座位数

⑤若新票价>原票价，您只需支付差价，若新票价<原票价，差价会自动退款到您的美团钱包 ―余额中

1、仅有可改签标志的影院支持改签

2、未取票用户开场前30分钟可改签

3、每笔订单限改签一次，改签后不能申请改签、退票

4、目前仅支持整订单改签，不支持改签订单中部分座位

5、V1-V4会员，每月可退改签3次，V5会员，每月可退改签5次

6、在改签过程中，若发现作弊行为（如批量改签、恶意购买等），我们将有权取消您后续的改签权利，时追究法律责任

就在半个月前，阿里砸了60亿要复活口碑网，并在日前升级了支付宝内置了“微信”和“大众点评”；同样是半个月前，百度糯米宣布未来三年要砸200亿挑战美团的市场第一；几天前，坊间消息传出美团最新一轮融资10亿美元，称上一轮7亿美元已近枯竭……

明眼人一看便知，本地生活O2O又要开始血雨腥风了，个个捋袖子秀肌肉——动手前，当然首先是要放狠话。

美团13日在其公司大楼内召开了媒体沟通会，分享了该公司2015年上半年的各项数据盘点。

秀肌肉：第一，第一，第一

重要的事情（行业第一）王兴和他的一干高管们在本次沟通会上说了不下三遍。

上半年交易额达到470亿元，超过去年全年的交易总额，6月单月交易额即突破90亿，王兴自信下半年的交易额将远超上半年，并最终实现其早先宣称的今年千亿总额的目标。

王兴介绍，美团的团购市场份额已超过62%，超过第二名、第三名2~3倍。当然，这在百度糯米方面看来，团购市场的大局尚未确定，李彦宏掷出的200亿，正是要改变这一格局，并“去团购化”。但愿是一场真的有技术含量的对抗，而不是仍然只停留在烧钱抢地盘、抢人的粗放式消耗战。

COO干嘉伟介绍了美团已经覆盖了全国2700多个县级及以上地区，其中包含1111个城市（最新覆盖的是拉萨），在这个意义上干嘉伟称，美团实际上已经覆盖了全国全部的地级市。干嘉伟管理着14000多人的线下团队，是这支庞大的销售队伍帮助美团在T型战略里逐渐垂直打通更多的新业务平台。

随后，分管猫眼电影事业部的美团高级副总裁沈丽、分管酒店旅游事业群的高级副总裁陈亮以及分管外卖配送事业群的联合创始人、高级副总裁王慧文也分别介绍了各自的业务，当然重点还是分享了他们所领导业务的各项“第一”（除了酒店间夜数量为全国第二）。

对手要花200亿夺位：到现在为止，美团也没有花掉过200亿

虎嗅君在现场提问环节问王兴，百度糯米最近豪言要投入200亿元挑战美团的市场第一，美团准备了多少钱应战呢？

王兴表示，到目前为止，美团也没有花掉过200亿，并直言这是一个超过3万亿的市场，就算投入200亿也不够，2000亿都不够。王慧文补充说，在烧钱的效率上，美团的效率比之几个竞争对手来说都是最高的——这一点虎嗅君并不能非常理解，美团、糯米、大众点评都是非上市公司，因此有关烧钱效率的数据统计是从何而来的呢？

此外，有在场其他记者提问，新一轮10亿美元的融资是否属实时，王兴予以了否认——要么是之前7亿美元的弹药仍然充足，要么就是新一轮的融资正在路上，毕竟美团业绩再强，目前的战局仍然是需要依靠烧钱铺开规模挤出对手的竞争模式，那些“第一”的业务可都还没看到盈利的曙光呢。

T型战略率先出发的猫眼，为什么没有升级为事业群？

近日，美团对组织架构进行了升级，将酒店旅游和外卖配送两项业务设立为酒店旅游事业群和外卖配送事业群，将陈亮和王慧文晋升为高级副总裁，与去年空降而来的沈丽平级，不知道是不是对此前被传出的美团内斗的一个平息举措。新设的两个事业群比美团为T型战略最早出发的猫眼的组织形态要更高级，后者目前仍然只是事业部，为什么？

虎嗅君将此问题抛给了王兴和沈丽，接住问题的是王兴，他解释说，设立事业群是因为业务的结构复杂度决定的。言下之意，猫眼电影的业务从复杂程度/难度方面并无必要设立事业群。那么问题也来了，这个相对没有那么复杂的业务为什么需要一个紧挨王兴左手边（干嘉伟紧挨王兴右手边）的高级副总裁掌管呢？

虎嗅君另外好奇的是，被沈丽称为已经是电影行业最主要的票房数据查询平台的猫眼票房分析（）是如何掌握全国的实时票房和排片数据的呢？

沈丽介绍说，因为猫眼已经覆盖了90%以上的全国影院，而因为接入这些影院后实际上就掌握了这些影院的排片数据（否则没法提供在线选座），同时也就掌握了每个接入影院的实时售票情况（被其他第三方或影院自己售出的座位即是猫眼无法提供的座位）。以此估算全国的排片及票房数据，看上去也就八九不离十了。

但是一向严谨的美团，在数字上百密亦有一疏。根据一周前，猫眼发布的大数据显示，其目前覆盖影院数为4000多家，而2014年底全国影院数为5785家，猫眼的覆盖率不到70%。当然，即便以70%的覆盖率做推算，仍然有一定的准确性，毕竟明明掌握着全局最权威数据的专资办迟迟不能上线实时数据的播报（原计划是去年11月上线，但看起来是无限期跳票了），令行业也只能依赖猫眼的这个不精确数据了。

美团正在遭遇新一轮的围剿，尽管这不是第一次了，但历史上著名的反围剿也不是每一次都能从胜利走向胜利。王兴刚刚调整完高管团队，应是为了新一轮的反围剿做好了组织上的充分准备，当然打仗还是要有足够的底牌，毕竟虎视眈眈的百度糯米这次是要在各个细分战场上与美团决一死战的，李彦宏都亲自为糯米站台，要拿出账面500亿现金的200亿，决心不言而喻，王兴和他的团队除了秀肌肉、放狠话之外，这场持久战所需的弹药、粮草准备得如何目前还不得而知。