阿里妹導(dǎo)讀：疫情之下，宅在家里就是對(duì)自己的保護(hù)。我們相信大家能夠共度難關(guān)，早日迎來(lái)與親友們現(xiàn)場(chǎng)看電影、看球賽的那天。今天，我們就來(lái)講講10萬(wàn)人的大場(chǎng)館如何“畫座位”?懷念過(guò)去的歡聚，期待下一次的再見(jiàn)。

說(shuō)到“畫座位”，最常見(jiàn)的場(chǎng)景莫過(guò)于影院的在線選座購(gòu)票。這個(gè)場(chǎng)景下的需求，對(duì)開(kāi)發(fā)者來(lái)說(shuō)并不難，但你知道10萬(wàn)座位的大場(chǎng)館該如何畫嗎?座位不固定，場(chǎng)景復(fù)雜等一系列挑戰(zhàn)該如何應(yīng)對(duì)?接下來(lái)，阿里文娛技術(shù)專家莫那和阿里文娛高級(jí)工程師土嚎，為你揭秘。

一、背景

1、網(wǎng)絡(luò)售票，需要畫座：購(gòu)票所見(jiàn)即所得

大麥主要業(yè)務(wù)是票務(wù)，包括演唱會(huì)、體育賽事、音樂(lè)節(jié)等，品類繁多。賣票就要畫場(chǎng)館、畫座位，大家都在網(wǎng)上買過(guò)電影票，這不難理解。雖然可以拿電影售票做類比，但底層難度差異很大。沒(méi)有10W座的電影院，卻有10W座的演唱會(huì)，而且演出/體育類場(chǎng)館變化多，挑戰(zhàn)相當(dāng)大。 2、大麥繪座演進(jìn)：從示意圖到實(shí)際場(chǎng)景圖

大麥以前的繪座系統(tǒng)，是安裝版的程序，畫座位只能一個(gè)看臺(tái)一個(gè)看臺(tái)地畫，看臺(tái)之間完全無(wú)關(guān)聯(lián)，畫出來(lái)幾乎每個(gè)看臺(tái)都長(zhǎng)一個(gè)模樣，座位只有相對(duì)位置的示意圖，沒(méi)有角度、距離，更談不上精確定位。 

?

??

圖1：老版繪座頁(yè)面(已淘汰) 大麥網(wǎng)從2017年，開(kāi)始設(shè)計(jì)新版繪座系統(tǒng)。這里沒(méi)有修補(bǔ)，沒(méi)有重構(gòu)，新版繪座完全重來(lái)，連技術(shù)棧也由.NET換成了Java，由C/S換成了B/S。

新繪座以SVG矢量圖為核心，通過(guò)Canvas進(jìn)行繪制，在演進(jìn)的過(guò)程中攻克了大量的性能卡點(diǎn)和技術(shù)難點(diǎn)，最終打造成型，堪以重任。  

?

??

?

??

圖2：新繪座頁(yè)面

二、新繪座：Flash走了，Canvas來(lái)了

1、Flash已死，來(lái)到路口，別無(wú)選擇

新繪座已誕生2年多，現(xiàn)在回首，這條路似乎早已注定。

老版繪座和選座是基于Flash的，悲劇的是，Adobe宣稱Flash 2020年后，將不再維護(hù)，相關(guān)技術(shù)會(huì)在2020年底全部退役，大麥的繪座和選座系統(tǒng)，都被迫轉(zhuǎn)型。

Flash只是原因之一，看過(guò)競(jìng)爭(zhēng)對(duì)手的產(chǎn)品，會(huì)發(fā)現(xiàn)SVG是條不錯(cuò)的道路，即使沒(méi)有Flash這一出，大麥網(wǎng)也會(huì)朝這個(gè)方向邁進(jìn)。

2、技術(shù)選型

1)任何過(guò)度使用DOM的應(yīng)用，都不會(huì)快。

經(jīng)過(guò)技術(shù)調(diào)研，發(fā)現(xiàn)國(guó)外一些場(chǎng)館座位繪制，選用的是SVG方案，每個(gè)座位都是一個(gè)獨(dú)立的SVG元素。但如果直接把SVG搬到瀏覽器，無(wú)法支持幾萬(wàn)座位的場(chǎng)館，因?yàn)闉g覽器無(wú)法支持過(guò)多的DOM數(shù)量，并且，一旦DOM數(shù)量太多，操作一定是低效的，“任何過(guò)度使用DOM的應(yīng)用，都不會(huì)太快”。

于是，技術(shù)同學(xué)想到了Canvas，Canvas是瀏覽器上的一個(gè)畫布，無(wú)論上面繪制多少元素，對(duì)于瀏覽器而言，都只是一個(gè)DOM元素。

對(duì)于不了解Canvas的同學(xué)，我們可以簡(jiǎn)單做個(gè)說(shuō)明，Canvas在瀏覽器上，就是下面一個(gè)標(biāo)簽：

 <canvasid="myCanvas" width="200" height="100"style="border:1px solid #000000;">
</canvas>

在Canvas上繪圖，就是使用JS獲取Canvas對(duì)象，使用封裝好的方法進(jìn)行繪制。Canvas畫布上的圖形變化，完全通過(guò)擦除+重繪的方式展現(xiàn)。

那么新繪座的目標(biāo)就變得很明確了，我們就是要在Canvas上繪制出想要的場(chǎng)館座位圖，然后以SVG的格式把圖形保存起來(lái)，用以選座、售票。 2)Canvas也不是銀彈：?jiǎn)蝹€(gè)Canvas的大小是有限制的，超限之后也會(huì)卡頓。

選型初期，技術(shù)同學(xué)使用Canvas+SVG做了個(gè)Demo，模擬了10W座位的渲染，并實(shí)現(xiàn)了拖拽、縮放。但真正作為畫座組件開(kāi)發(fā)的時(shí)候，發(fā)現(xiàn)座位達(dá)到2W就出現(xiàn)了卡頓，因?yàn)镃anvas的寬高達(dá)到一定的數(shù)值，就會(huì)出現(xiàn)卡頓。于是，沿著化整為零的思路，技術(shù)同學(xué)將整個(gè)畫布，分成了多份Canvas，形成了一個(gè)Canvas矩陣，通過(guò)對(duì)每個(gè)Canvas的操作，完美解決了單個(gè)Canvas過(guò)大引起卡頓的問(wèn)題。

關(guān)于Canvas繪圖組件，大家可以在網(wǎng)上搜到很多資料，這里不再贅述。

3、新版繪座上線初期：青蘋果

剛上線的新版繪座，就像個(gè)青澀的蘋果，雖然漂亮，卻沒(méi)那么好吃。

最突出的問(wèn)題有2個(gè)：第1個(gè)是變形難用，由于算法比較初級(jí)，座位矩陣變形很難滿足用戶需求;第2個(gè)是接口速度慢，打開(kāi)一個(gè)1W座的場(chǎng)館，好幾分鐘，超過(guò)5W，直接崩潰，根本無(wú)法支持。

為什么理想很豐滿，結(jié)果卻差強(qiáng)人意呢?根源在于第一版只重功能，忽略了算法效率。與服務(wù)端的接口調(diào)用，都是整個(gè)場(chǎng)館級(jí)別的，幾萬(wàn)座位數(shù)據(jù)，加上關(guān)聯(lián)的看臺(tái)、票、以及狀態(tài)等，一個(gè)碩大的數(shù)據(jù)包在前后端丟來(lái)丟去，系統(tǒng)不堪重負(fù)，用戶受盡折磨。 4、艱苦改進(jìn)之旅

新繪座上線后，立刻啟動(dòng)了改進(jìn)優(yōu)化工程，主要攻克的難關(guān)有三點(diǎn)：1. 頁(yè)面響應(yīng)時(shí)間;2. 座位自由組合變形;3. 打印順序計(jì)算。

1)交互+接口優(yōu)化，進(jìn)入秒開(kāi)時(shí)代

首先要解決接口慢的問(wèn)題，解決效率低的一大法寶：化整為零。

從一次load一個(gè)場(chǎng)館的數(shù)據(jù)，改成一次load幾個(gè)看臺(tái)的數(shù)據(jù)。服務(wù)端數(shù)據(jù)隨著前端視口(頁(yè)面可視范圍)的變化，逐漸加載，類似地圖常用的“拉框查詢”。前端交互也從全加載，改為按視口取數(shù)據(jù)。僅此一項(xiàng)優(yōu)化，幾萬(wàn)座大場(chǎng)館的系統(tǒng)響應(yīng)速度，立刻由幾分鐘，降到了1~2s，小場(chǎng)館更是瞬時(shí)打開(kāi)，系統(tǒng)好用了不少。

這里面最重要的一個(gè)技術(shù)點(diǎn)，就是視口計(jì)算，原理如下：

前端首先獲取到屏幕視口在Canvas畫布上的坐標(biāo)，然后和看臺(tái)的外接矩形進(jìn)行碰撞檢測(cè)，兩個(gè)矩形一旦相交，就說(shuō)明該看臺(tái)已暴露在視口之內(nèi)，于是就加載該看臺(tái)的數(shù)據(jù)。

從接口優(yōu)化開(kāi)始，新繪座逐漸走向成熟。

?

??

圖3：按視口加載原理圖

2)合并座位矩陣，自由變形

座位自由變形包括傾斜、錯(cuò)位、排距、座距、旋轉(zhuǎn)、弧度等多種操作。除了弧度變形，其它基本上是一些數(shù)學(xué)上的坐標(biāo)計(jì)算，我們不贅述，這里重點(diǎn)說(shuō)一下弧度變形。

新弧度變形，運(yùn)用貝塞爾二階曲線原理，根據(jù)用戶的數(shù)據(jù)輸入，計(jì)算出相應(yīng)的貝塞爾曲線，再把每排座位，均勻排列到曲線上。下面是貝塞爾二階公式：

?

??

圖4：貝塞爾曲線示意圖

?

??

注釋：P0、P2為一排座位的左右端點(diǎn)(一排的第一個(gè)座位和最后一個(gè)座位)。

看似套公式就可以搞定，非常簡(jiǎn)單的樣子。但是這里有一個(gè)難點(diǎn)：從圖中可以看出，t為比例值，處在線段P0P2不同的比例，所在的弧度位置也是不一樣的。

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

中間所有的座位都不在P0P2線段上，要怎么算出中間座位的每個(gè)比例?

我們通過(guò)弧線上的每個(gè)座位，做一條P0P2線段的垂線，垂線與線段P0P2的交點(diǎn)，就是這些座位所在這一排的原始位置，計(jì)算出這些原始位置的坐標(biāo)，根據(jù)這些原始位置，就可以算出中間所有座位的比例了。

這樣，弧度變形問(wèn)題就通過(guò)貝塞爾二階曲線完美解決。

?

??

圖5：弧形座位矩陣貝塞爾曲線變形原理圖

?

??

圖6：弧度變形實(shí)際操作

?

??

圖7：座位自由組合，隨意變形

3) 打印順序計(jì)算

“打印順序”是個(gè)什么鬼?

這得從大麥的業(yè)務(wù)特點(diǎn)說(shuō)起，主辦有時(shí)候會(huì)批量出票并將票配發(fā)給相關(guān)人群，有時(shí)整個(gè)看臺(tái)一起打印。在配票的時(shí)候，需要按照座位的物理位置關(guān)系排序，避免座位沒(méi)挨著、“2個(gè)情侶”被“拆散”的情況發(fā)生。舉個(gè)例子：下圖中，主辦期望打印票的順序是“5-3-1-2-4-6”，而不是“1-2-3-4-5-6”，這樣他們就可以按打印順序配票，而不用擔(dān)心兩張票不挨著。那么，在繪座過(guò)程中，我們就要計(jì)算出座位的順序，看似簡(jiǎn)單，實(shí)現(xiàn)起來(lái)有難度很大，原因只有一個(gè)，場(chǎng)館形狀各異，座位排列多樣。

?

??

圖:8：北京奧體中心的某個(gè)看臺(tái)

如果說(shuō)，上圖還能按照座位Y坐標(biāo)對(duì)比進(jìn)行排序，那么下面的幾個(gè)情形，就不那么好處理了：

?

??

圖9：各種特殊的座位排列場(chǎng)景

打印問(wèn)題，我們通過(guò)場(chǎng)景匯總，對(duì)場(chǎng)館進(jìn)行分區(qū)，最終找到了排序的規(guī)律，得以解決。打印問(wèn)題技術(shù)方案原理：

第1步：將場(chǎng)館分成8個(gè)象限，象限內(nèi)的座位，已標(biāo)識(shí)出該如何排序(標(biāo)識(shí)出了應(yīng)該對(duì)比X坐標(biāo)還是Y坐標(biāo)來(lái)進(jìn)行排序);

第2步：每一組座位矩陣，取出首排，求首尾座位連線的斜率，然后根據(jù)斜率將座位矩陣劃分到對(duì)應(yīng)象限;

第3步：按照對(duì)應(yīng)象限的排序標(biāo)識(shí)，對(duì)比座位的X坐標(biāo)(或Y坐標(biāo))，進(jìn)行座位排序。

?

??

圖10：座位排序原理圖

4)小彩蛋之“沙發(fā)、角度”

效率、變形和打印3個(gè)主要問(wèn)題根解之后，隨之出現(xiàn)了大量的產(chǎn)品優(yōu)化需求，開(kāi)始著眼于細(xì)微之處，小沙發(fā)和座位角度就是2個(gè)典型的功能。這兩個(gè)功能雖然難度不大，但卻在體驗(yàn)上有了一大步的提升。

?

??

圖11：圓點(diǎn)、沙發(fā)效果對(duì)比

5)小彩蛋之“撤回”

經(jīng)過(guò)不斷優(yōu)化和添磚加瓦，大麥的繪座系統(tǒng)，越來(lái)越像一款專業(yè)的繪圖工具。好的繪圖工具一定需要“前進(jìn)&撤回”功能。

新繪座系統(tǒng)的撤回功能實(shí)現(xiàn)原理：設(shè)計(jì)一個(gè)“歷史數(shù)據(jù)”數(shù)組，數(shù)組里的每個(gè)元素，記錄一個(gè)操作步驟對(duì)應(yīng)的被編輯座位數(shù)據(jù)以及座位位置信息，回退時(shí)，找到對(duì)應(yīng)操作步驟的數(shù)組元素，重繪座位位置，這樣就回退了整個(gè)操作。因?yàn)闊o(wú)論座位相對(duì)位置如何變形，本質(zhì)上，其實(shí)都是坐標(biāo)數(shù)據(jù)的改變，通過(guò)記錄和重繪歷史坐標(biāo)信息，就達(dá)到了撤回操作的目的。 三、 在正確的路上繼續(xù)前行

到目前為止，新繪座系統(tǒng)已能夠承接國(guó)內(nèi)外任何大型場(chǎng)館的繪座工程，各種細(xì)節(jié)的優(yōu)化也日臻完善，效率大幅提升。但產(chǎn)品和技術(shù)同學(xué)的努力，并沒(méi)有終止，而是在正確的道路上，繼續(xù)前行。

以下簡(jiǎn)單列舉幾個(gè)很實(shí)用的功能，供大家參考：

1)區(qū)域編輯：自由繪制矩形、圓形、多邊形等各種形狀，并自由變形;

2)一鍵自動(dòng)變形：全選看臺(tái)內(nèi)的座位，點(diǎn)擊“一鍵變形按鈕”，座位瞬間適應(yīng)看臺(tái)形狀，自動(dòng)排列。

?

??

圖12：一鍵變形效果圖

3)座位復(fù)制、鏡像：區(qū)用戶可以自由復(fù)制選中座位，并且支持鏡像、翻轉(zhuǎn)等多種復(fù)制模式，排號(hào)、座位號(hào)根據(jù)設(shè)置自動(dòng)處理;

4)一鍵朝向舞臺(tái)：用戶選中一個(gè)看臺(tái)的數(shù)據(jù)，點(diǎn)擊“一鍵朝向舞臺(tái)”，系統(tǒng)會(huì)自動(dòng)計(jì)算舞臺(tái)方向和座位角度，瞬間將整個(gè)看臺(tái)座位“擺正”。