Question

38

Pinch to zoom using Hammer.js

rated 0 times [ 41] [ 3] / answers: 1 / hits: 59086 / 11 Years ago, fri, august 2, 2013, 12:00:00

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

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>

Here's my SCRIPT

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;

    });

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

karivictoriab

Add To Favorites

Follow

Total Points: 530

Total Questions: 90

Total Answers: 95

Location: Honduras

Member since Sun, Dec 26, 2021

2 Years ago

karivictoriab questions

1 JSX props should not use arrow functions eslint warning

Wed, Feb 10, 21, 00:00, 3 Years ago

1 How to scroll and expand an Accordion by onClick on an icon from a component?

Fri, Aug 21, 20, 00:00, 4 Years ago

1 Hide all labels and tooltips in Chart.js and make it very small size

Wed, Apr 8, 20, 00:00, 4 Years ago

1 CORS – Cross Origin Request Blocked – The 'Access-Control-Allow-Origin' header contains invalid value

Fri, Jan 24, 20, 00:00, 4 Years ago

1 VueJs clear form after success

Mon, Dec 30, 19, 00:00, 4 Years ago

View All

answered 11 Years ago osvaldo · Accepted Answer

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.

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).

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;

        }

    });

}

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.

Cheers!