html5手指滑动图片放大缩小,如何在移动端实现手势缩放（缩放图片，div等）

前几天有一个需求，需要在移动端能通过手势来实现对一个canvas的缩放功能，网上找了挺多方法的，最终实现的效果如下：

简单说下思路：

获取手势

根据手势事件修改dom进行缩放

获取手势的方式可以监听touch事件，但是处理的东西还挺多的。

看了一个现成的手势缩放库PinchZoom.js，总出现一些奇怪的bug，一顿折腾后无解，果断弃用。

网上找到了鹅厂的一些例子http://alloyteam.github.io/AlloyFinger/感觉还不错。

最终的方案:

最终的方案:

贴下代码

先引入库

webpack方式

先装下3个库：

npm i -D alloyfinger

npm i -D css3transform

还有一个To.js在npm里没找到，下载http://alloyteam.github.io/AlloyFinger/asset/to.js放本地(上面demo里有)。

后面加了一个模块导出 module.exports = To;就可以当模块用了。

// 引入库

const To = require("path_to/to.js"); //根据你项目引入to.js

const AlloyFinger = require("alloyfinger");

const Transform = require("css3t