Hammer.js 进行图片缩放

前言

在 webapp的潮流中，捕获用户的手势是大势所趋，而众多框架中，我还是选择了轻量级的Hammer.js，除了官方提供文档超级烂之外，其他的都还好，零零散散看了网上的许多博文，加上官网的介绍，觉得大概有个眉目，其实捕获手势的API并不难，但是我当初使用的时候还是进了一个小坑，所以特地要拿出来想要跟大家一起谈谈。

hammer官方提供的缩放的API主要为pinch。

大致看一下hammer.js 里的6大event，但是今天只聊pinch

pinch

hammer.js里的pinch事件，默认是不被监听的，官方是这样解释的

This recognizer is disabled by default because it would make the element blocking. You can enable it by calling: javascript hammertime.get(‘pinch’).set({ enable: true });

hammer认为，默认打开pinch会使元素阻塞。
但是我们手动将它开启就行了。

hammertime.get('pinch').set({ enable: true });

hammertime 利用hammer的构造函数创建的Hammer对象。

最初的思路应该是这样的。

1.拿到Img的DOM对象，创建Hammer对象
2.监听该对象的pinchin 和 pinchout事件，并对其作出transform的变换

看上去思路很清晰也特别简单，可是这样的话容易出现缩放延迟的问题。
这是原先的代码

var count = 0;
        var scaleCount = 1;
        imgHammer.on("pinchout",e => {
            //console.log("触发" + (count++));
            if(scaleCount >= 2.5){
                //alert("max");
                return;
            }
            scaleCount += 0.03;
            img.style.transform = "scale("+scaleCount+")";
        });

        imgHammer.on("pinchin",e => {
            if(scaleCount <= 0.6){
                //alert("min");
                return;
            }
            scaleCount -= 0.03;
            img.style.transform = "scale("+scaleCount+")";
        });

解决方案

hammer封装了一个Event事件对象
;

可以发现有个叫作scale的属性，它可以让我们的缩放变得更加平稳

比如我现在可以这样来做:

imgHammer.on("pinch",e => {
    img.style.transform = "scale("+e.scale+")";
});

现在我们的放大缩小就变得很平稳了，并且代码也简短了不少(img为图片的DOM对象)

但是我们发现，在进行下一次缩放的时候，pinch会从新回到scale为1的时候开始。我们再修改一下代码。

imgHammer.on("pinchmove pinchstart pinchin pinchout",e => {
                if(e.type == "pinchstart"){
                    scaleIndex = transform.scale || 1;
                }
                transform.scale = scaleIndex * e.scale;
                img.style.transform = "scale(" + (scaleIndex * e.scale)+ ")";
            });

这样的话就能解决一些在Pinch操作上的问题.