背景
最近項目提出新需求寄纵，在小程序上根據(jù)不同客戶提供的門店座位圖，實現(xiàn)點擊座位圖上的座位就能預定選座脖苏，并且要像貓眼電影一樣可縮放程拭、拖拉、單擊放大棍潘、雙擊縮小恃鞋。剛接到需求有點蒙，每一個客戶的圖片都不一樣亦歉，沒有規(guī)律可循恤浪，怎么搞？
于是開始技術研究肴楷，首先座位圖以及每個座位的信息肯定是由API返回水由，加之需要縮放、拖拉赛蔫，單純由小程序端布局難度很大（目前還沒有發(fā)現(xiàn)很好的手勢庫）砂客，因此果斷選擇webview與小程序進行交互；webview我將采用vue編寫呵恢，拖拉鞠值、縮放我選用了hammerjs這個手勢庫；最重點的是如何生產(chǎn)每個座位的信息瑰剃，我采用svg熱區(qū)的形式齿诉，通過ps的矩形工具將圖片的每個座位框選出來，導出svg，使用瀏覽器打開粤剧，按下F12拿到每個座位的x/y/width/height歇竟。
好了，技術分析完畢抵恋。此篇文章不講簡單的移動端適配和webview交互焕议，我重點記錄座位圖的實現(xiàn)原理以及縮放、拖放的計算邏輯弧关。
技術選型
1. 移動端適配選用lib-flexible+px2rem-loader盅安；
2. 小程序與webview交互使用weixin-js-sdk；
3. vue手勢庫使用hammerjs?
制作座位圖熱區(qū)信息
前面講過世囊，通過ps的矩形工具將圖片的每個座位框選出來别瞭，導出svg，使用瀏覽器打開株憾，按下F12拿到每個座位的x/y/width/heigth蝙寨。至于如何生產(chǎn)svg需要大家自行去百度，或者問問美工嗤瞎。瀏覽器打開后墙歪，看到的界面是這樣的，記錄好x,y,width,heigth贝奇。
vue布局
原理：將座位圖座位background-image虹菲，使用svg標簽包裹每個座位的熱區(qū)，每個座位是一個rect標簽掉瞳，如下圖
hammerjs使用講解
1. 這里使用到縮放毕源、拖拉手勢，注意縮放手勢我們是對座位圖的外部盒子進行縮放陕习，即svg-box的元素脑豹；移動是對我們的座位圖進行移動，即id=“seat-img”的元素衡查；
2. hammerjs的使用可查看鏈接：http://www.reibang.com/p/0b0b9364f967
座位圖業(yè)務交互開發(fā)
1. 首先需要定義好此次需要聲明的變量結(jié)構(gòu)，如下圖：
2. 首次加載成功后必盖，座位圖需要按比例縮放到屏幕視圖中拌牲，即需要看到一整張座位圖；其中縮放的級數(shù)是外部容器（樣式設置了width為100%歌粥，即視圖窗口可見寬度）與圖片寬度的比重塌忽；XY軸偏移量的計算相對復雜：假設座位圖縮放肯定是按照中心點縮放，因此縮放之后中心點的坐標軸是不會改變的失驶；那么偏移的距離就是外部容器的中心點與座位圖的中心點的距離土居，應為外部容器寬度的一半減去座位圖寬度的一半，及X、Y偏移量 =（容器寬擦耀、高-圖像原寬棉圈、原高）/ 2。 上代碼：
3. 之后點擊任意座位眷蜓，需要放大座位圖分瘾，并且將視圖偏移到以此座位為中心的位置。
4. 雙擊放大很簡單吁系，在此之前需要聲明好hammerjs對象
5. 捏合縮放事件
6. 移動事件
注意：3德召、4、5步驟放大后汽纤，需要對圖片的左右移動偏移進行限制上岗，以防止圖片偏移到視圖外
結(jié)語
由于座位圖的計算太多，我實在沒時間一個個解釋蕴坪，大家看代碼應該可以理解肴掷。不懂的地方咱們隨時交流。
技術方面主要是使用了svg+熱區(qū)實現(xiàn)座位圖的渲染和交互辞嗡，手勢方面使用hammerjs捆等。
希望有更好做法的大神留下你們的寶貴意見！
