类似淘票票选座功能（svg）

最近项目需要在移动端做一个可以选座订票的功能。上网搜了一下没找到一个现成的库可以解决需求，所以就自己写了一个粗糙的版本。

需求

前端展示座位分布
可拖动放大缩小点击选座

技术栈

svg
hammerjs

效果图

详细效果可以去demo那体验一下，建议用手机端体验。

svg

座位分布图的SVG是UI画好后导出来，并且通过后端接口返回整个SVG标签以及里面的内容。前端只要发请求获得SVG并且插入就好了。插入后需要将已订购的座位置黑，无法选择。

hammerjs

hammerjs是一个手势库，提供了tap, doubletap, press, pan, swipe, pinch以及 rotate等多种手势事件，同时也提供丰富的自定义配置可以让你完成产品各(nao)种(dong)各(da)样(kai)的需求。

用法

let hammertime = new Hammer(myElement, myOptions);
hammertime.on('pan', function(ev) {console.log(ev)
})
复制代码

html 结构

箱子svg-box用以捏放（缩放）

svg用以偏移

<div class="ticket-map"><div class=svg-box><svg>.....</svg></div>
</div>
复制代码

初始化

设置一个变量用以记录手势操作后的属性变化

// 记录位移变量
let transform = {svgScale: 0.5, // svg 默认缩放scale: 1, // svg-box 缩放maxScale: 7, // svg-box 最大缩放minScale: 1,  // svg-box 最小缩放translateX: 0, // svg X轴偏移translateY: 0, // svg Y轴偏移minX: 0, // svg 最小X轴偏移maxX: 0, // svg 最大X轴偏移minY: 0, // svg 最小Y轴偏移maxY: 0  // svg 最大Y轴偏移
}
复制代码

因为UI提供的SVG是1000*715 略大，为了适应屏幕作了svgScale: 0.5的缩放。

获取到SVG后需要进行居中并且计算出拖动边界（minX/Y maxX/Y）

    let svgTarget = document.querySelector('svg')let svgBox = document.querySelector('.svg-box')transform.translateX = Math.round((svgBox.clientWidth - svgTarget.clientWidth) / 2) // 垂直居中时的X偏移transform.translateY = Math.round((svgBox.clientHeight - svgTarget.clientHeight) / 2) // 垂直居中时的Y偏移transform.minX = transform.translateX - svgBox.clientWidth / 4transform.maxX = transform.translateX + svgBox.clientWidth / 4transform.minY = transform.translateY - svgBox.clientHeight / 2.5transform.maxY = transform.translateY + svgBox.clientHeight / 2.5svgTarget.style.transform = `translate(${transform.translateX}px, ${transform.translateY}px) scale(${transform.svgScale})`复制代码

以svg-box的width的4分之一，以及height的2.5分之一作为svg的X Y轴偏移量的极限，以免svg被拖动出屏幕之外。可以根据实际SVG调整分数。

手势配置

  //  初始化 hammer对象var svgHam = new Hammer(svgBox)svgHam.get('pinch').set({ enable: true })  // 返回pinch识别器 设置 可捏放 （放大缩小手势） 默认不监听svgHam.get('pan').set({ direction: Hammer.DIRECTION_ALL }) // 返回pan识别器 设置拖动方向为 所有方向
复制代码

监听svg-box，以免svg移动后手指点击不到触发不了事件

捏放事件

svgHam.on('pinchstart pinchmove', (e) => {let { scale, maxScale, minScale } = transformscale *= e.scalescale = scale >= maxScale ? maxScale : scalescale = scale <= minScale ? minScale : scaletransform.scale = scalesvgBox.style.transform = `scale(${scale})`})
复制代码

设置maxScale，minScale以免无限大或者无限小

· 注意这里缩放的是box而不是svg本身，否则拖动后再缩放就会发现整个SVG都跑偏了

拖动事件

function checkXY(x, y) {let { minX, minY, maxX, maxY } = transformx = x > maxX ? maxX : xx = x < minX ? minX : xy = y > maxY ? maxY : yy = y < minY ? minY : yreturn {x,y}
}svgHam.on('panstart panmove', (e) => {let { scale, translateX, translateY, svgScale } = transformlet y = translateY + e.deltaY / scalelet x = translateX + e.deltaX / scalelet validXY = checkXY(x, y)svgTarget.style.transform = `translate(${validXY.x}px, ${validXY.y}px) scale(${svgScale})`
})svgHam.on('panend', (e) => {let { scale, translateX, translateY} = transformlet y = translateY + e.deltaY / scalelet x = translateX + e.deltaX / scalelet validXY = checkXY(x, y)transform.translateY = validXY.ytransform.translateX = validXY.x
})
复制代码

偏移结束后更新偏移值，因为hammer提供的event事件的偏差值deltaY/deltaX是你手指点击初始位置以及移动后的差值。

偏移量 / scale 可以有效的控制放大后的拖动速度，否则放大后一拖动，整个SVG就跑走了。

选座

做好了上述效果，选座就简单了直接一个点击事件就好了

document.querySelector('.svg-box').addEventListener('click', selectSeat)
// svg 点击事件 选座
function selectSeat (e) {if (e.target.tagName !== 'circle') return falsee.target.style.fill = e.target.style.fill === 'red' ? '#ccc' : 'red' // 选中的座位变成红色// do something...
}
复制代码

完整代码

写在最后

不是十分完美，不过也满足现在的需求，希望能给大家带来一点启发。不足的地方，也望各位大神指点迷津。