大场馆绘座技术演进：从Flash到Canvas的挑战与解决方案
本文介绍了大麦网如何从Flash绘座系统过渡到基于Canvas的新版绘座系统，面对Adobe Flash的退役，大麦网选择了SVG+Canvas的技术路线，通过化整为零的策略解决了大量座位渲染的性能问题。文章详细讨论了接口优化、座位自由组合变形、打印顺序计算等关键改进，展示了大麦网在技术演进中遇到的挑战和解决方案。
一、背景
1、网络售票，需要画座：购票所见即所得
大麦主要业务是票务，包括演唱会、体育赛事、音乐节等，品类繁多。卖票就要画场馆、画座位，大家都在网上买过电影票，这不难理解。虽然可以拿电影售票做类比，但底层难度差异很大。没有 10W 座的电影院，却有 10W 座的演唱会，而且演出 / 体育类场馆变化多，挑战相当大。
2、大麦绘座演进：从示意图到实际场景图
大麦以前的绘座系统，是安装版的程序，画座位只能一个看台一个看台地画，看台之间完全无关联，画出来几乎每个看台都长一个模样，座位只有相对位置的示意图，没有角度、距离，更谈不上精确定位。
图 1：老版绘座页面（已淘汰）
大麦网从 2017 年，开始设计新版绘座系统。这里没有修补，没有重构，新版绘座完全重来，连技术栈也由.NET 换成了 Java，由 C/S 换成了 B/S。
新绘座以 SVG 矢量图为核心，通过 Canvas 进行绘制，在演进的过程中攻克了大量的性能卡点和技术难点，最终打造成型，堪以重任。
图 2：新绘座页面
二、新绘座：Flash 走了，Canvas 来了
1、Flash 已死，来到路口，别无选择
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
