vue3基于hammerjs实现移动端图片拖动缩放旋转功能案例

首先我们先有一个需求，就是在移动端h5实现图片的拖动，缩放，旋转等手势操作。
假如我们使用原生的touch实现起来是非常麻烦，推荐使用一下hammerjs这个包进行处理这些手势操作。

hammerjs库：它可以让我们轻松的实现移动端上的手势操作， 也去除移动端上的点击事件的300ms延迟。它封装了一下这些方法：

• pan 左右拖动
• tap 点击
• press 长时间按压
• swipe 滑动
• rotate 旋转效果
• pinch 缩放

我写了个案例大概是这样子：
功能：（挂饰拖动滑动，缩放，旋转，重置位置，合成图片，预览图片）

• 环境：vue3.x+vite2 (根据自身环境进行修改)
• ui框架：vant3 （根据自身自行更换）
• 手势库：hammerjs （必需）
• 截图库：html2canvas （必需）

案例预览：

源码部分截图一下：

后续整理会发源码。