使用Hammer.js捏缩放 [英] Pinch to zoom using Hammer.js

问题描述

我正在尝试使用hammer.js实现缩放缩放

I am trying to implement pinch to zoom using hammer.js

这是我的HTML -

Here's my HTML-

 <script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.min.js"></script>

<div id="pinchzoom">
        <div>
            <img id="rect" src="http://blog.gettyimages.com/wp-content/uploads/2013/01/Siberian-Tiger-Running-Through-Snow-Tom-Brakefield-Getty-Images-200353826-001.jpg" width="2835" height="4289" ondragstart="return false" alt="" />
        </div>
    </div>

这是我的脚本

var hammertime = Hammer(document.getElementById('pinchzoom'), {
        transform_always_block: true,
        transform_min_scale: 1,
        drag_block_horizontal: false,
        drag_block_vertical: false,
        drag_min_distance: 0
    });

    var rect = document.getElementById('rect');

    var posX=0, posY=0,
        scale=1, last_scale,
        rotation= 1, last_rotation;

    hammertime.on('touch drag transform', function(ev) {
        switch(ev.type) {
            case 'touch':
                last_scale = scale;
                last_rotation = rotation;
                break;

            case 'drag':
                posX = ev.gesture.deltaX;
                posY = ev.gesture.deltaY;
                break;

            case 'transform':
                rotation = last_rotation + ev.gesture.rotation;
                scale = Math.max(1, Math.min(last_scale * ev.gesture.scale, 10));
                break;
        }

        // transform!
        var transform =
                //"translate3d("+posX+"px,"+posY+"px, 0) " +
                "scale3d("+scale+","+scale+", 0) ";


        rect.style.transform = transform;
        rect.style.oTransform = transform;
        rect.style.msTransform = transform;
        rect.style.mozTransform = transform;
        rect.style.webkitTransform = transform;
    });

它工作正常，但我无法滚动图像。取消注释transform3d它可以工作，但图像在拖动时失去了它的位置。我不能使用jQuery。

It works fine but I am not able to scroll the image. On uncommenting transform3d it works but image looses its position on drag. I can't use jQuery.

推荐答案

对于 hammer.js 2.0+我已经采取@DGS答案并将其改为适合我正在做的事情 cordova 和 intel-xdk 所以它是纯JS和 hammer.js 2.0 for webkit 。

For hammer.js 2.0+ I have taken @DGS answer and changed it to suit what I was doing with cordova and intel-xdk so it's pure JS and hammer.js 2.0 for webkit.

我的实现允许你缩放和同时拖动，不如上所述彼此独立，并提供更原生的感觉。它还实现了双击以放大（和缩小）。我将它设置为在 .999 和 4 之间进行缩放，但您可以按照自己的意愿更改这些值。因此，如果您只是复制并粘贴它，它可能会按照您的预期执行（ on webkit ）。

My implementation allows you to zoom and drag at the same time, not independent of each other as above, and provides for a more native feel. It also implements the double tap to zoom in (and to zoom back out). I have it set to zoom between .999 and 4, but you can do as you like just changing those values. So if you just copy and paste this it will probably do what you expect it to (on webkit).

感谢Eight Media和@DGS让我入门！随意提高它。

Thanks to Eight Media and @DGS for getting me started! Feel free to improve it SO.

function hammerIt(elm) {
    hammertime = new Hammer(elm, {});
    hammertime.get('pinch').set({
        enable: true
    });
    var posX = 0,
        posY = 0,
        scale = 1,
        last_scale = 1,
        last_posX = 0,
        last_posY = 0,
        max_pos_x = 0,
        max_pos_y = 0,
        transform = "",
        el = elm;

    hammertime.on('doubletap pan pinch panend pinchend', function(ev) {
        if (ev.type == "doubletap") {
            transform =
                "translate3d(0, 0, 0) " +
                "scale3d(2, 2, 1) ";
            scale = 2;
            last_scale = 2;
            try {
                if (window.getComputedStyle(el, null).getPropertyValue('-webkit-transform').toString() != "matrix(1, 0, 0, 1, 0, 0)") {
                    transform =
                        "translate3d(0, 0, 0) " +
                        "scale3d(1, 1, 1) ";
                    scale = 1;
                    last_scale = 1;
                }
            } catch (err) {}
            el.style.webkitTransform = transform;
            transform = "";
        }

        //pan    
        if (scale != 1) {
            posX = last_posX + ev.deltaX;
            posY = last_posY + ev.deltaY;
            max_pos_x = Math.ceil((scale - 1) * el.clientWidth / 2);
            max_pos_y = Math.ceil((scale - 1) * el.clientHeight / 2);
            if (posX > max_pos_x) {
                posX = max_pos_x;
            }
            if (posX < -max_pos_x) {
                posX = -max_pos_x;
            }
            if (posY > max_pos_y) {
                posY = max_pos_y;
            }
            if (posY < -max_pos_y) {
                posY = -max_pos_y;
            }
        }


        //pinch
        if (ev.type == "pinch") {
            scale = Math.max(.999, Math.min(last_scale * (ev.scale), 4));
        }
        if(ev.type == "pinchend"){last_scale = scale;}

        //panend
        if(ev.type == "panend"){
            last_posX = posX < max_pos_x ? posX : max_pos_x;
            last_posY = posY < max_pos_y ? posY : max_pos_y;
        }

        if (scale != 1) {
            transform =
                "translate3d(" + posX + "px," + posY + "px, 0) " +
                "scale3d(" + scale + ", " + scale + ", 1)";
        }

        if (transform) {
            el.style.webkitTransform = transform;
        }
    });
}

实现只需用hammerIt调用它（document.getElementById（imagid）） ）;元素加载后。你可以在任意数量的元素上调用它。

To implement just call it with hammerIt(document.getElementById("imagid")); after the element has loaded. You can call this on as many elements as you like.

干杯！

这篇关于使用Hammer.js捏缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！