背景
最近项目提出新需求,在小程序上根据不同客户提供的门店座位图,实现点击座位图上的座位就能预定选座,并且要像猫眼电影一样可缩放、拖拉、单击放大、双击缩小。刚接到需求有点蒙,每一个客户的图片都不一样,没有规律可循,怎么搞?
于是开始技术研究,首先座位图以及每个座位的信息肯定是由API返回,加之需要缩放、拖拉,单纯由小程序端布局难度很大(目前还没有发现很好的手势库),因此果断选择webview与小程序进行交互;webview我将采用vue编写,拖拉、缩放我选用了hammerjs这个手势库;最重点的是如何生产每个座位的信息,我采用svg热区的形式,通过ps的矩形工具将图片的每个座位框选出来,导出svg,使用浏览器打开,按下F12拿到每个座位的x/y/width/height。
好了,技术分析完毕。此篇文章不讲简单的移动端适配和webview交互,我重点记录座位图的实现原理以及缩放、拖放的计算逻辑。
技术选型
-
移动端适配选用lib-flexible+px2rem-loader;
-
小程序与webview交互使用weixin-js-sdk;
-
vue手势库使用hammerjs
制作座位图热区信息
前面讲过,通过ps的矩形工具将图片的每个座位框选出来,导出svg,使用浏览器打开,按下F12拿到每个座位的x/y/width/heigth。至于如何生产svg需要大家自行去百度,或者问问美工。浏览器打开后,看到的界面是这样的,记录好x,y,width,heigth。
vue布局