Skip to content

Instantly share code, notes, and snippets.

@jshbrntt
Last active October 16, 2018 11:10
Show Gist options
  • Save jshbrntt/f778e4f5a559268a874e to your computer and use it in GitHub Desktop.
Save jshbrntt/f778e4f5a559268a874e to your computer and use it in GitHub Desktop.
A simple way of panning and zooming an image using Hammer.js.
// <img id="myimage" src="http://placecage/1280/720">
var image = document.getElementById('myimage');
var mc = new Hammer.Manager(image);
var pinch = new Hammer.Pinch();
var pan = new Hammer.Pan();
pinch.recognizeWith(pan);
mc.add([pinch, pan]);
var adjustScale = 1;
var adjustDeltaX = 0;
var adjustDeltaY = 0;
var currentScale = null;
var currentDeltaX = null;
var currentDeltaY = null;
// Prevent long press saving on mobiles.
webpage.addEventListener('touchstart', function (e) {
e.preventDefault()
});
// Handles pinch and pan events/transforming at the same time;
mc.on("pinch pan", function (ev) {
var transforms = [];
// Adjusting the current pinch/pan event properties using the previous ones set when they finished touching
currentScale = adjustScale * ev.scale;
currentDeltaX = adjustDeltaX + (ev.deltaX / currentScale);
currentDeltaY = adjustDeltaY + (ev.deltaY / currentScale);
// Concatinating and applying parameters.
transforms.push('scale({0})'.format(currentScale));
transforms.push('translate({0}px,{1}px)'.format(currentDeltaX, currentDeltaY));
webpage.style.transform = transforms.join(' ');
});
mc.on("panend pinchend", function (ev) {
// Saving the final transforms for adjustment next time the user interacts.
adjustScale = currentScale;
adjustDeltaX = currentDeltaX;
adjustDeltaY = currentDeltaY;
});
@davidalexander
Copy link

Hi there
Just trying to get this to work but the webpage variable isn't declared. Could you confirm the intended markup?
Thanks!

@Krishna25Vrinsoft
Copy link

Hi.
I have also same error webpage is not declared.Can you Please help me for this.
Thanks:)

@griable
Copy link

griable commented Nov 20, 2015

@davidalexander @Krishna25Vrinsoft

Just use your image container instead or set it to var webpage = document.querySelector('.myContainer').

@artstudio123
Copy link

Hi,
I'm trying to get this code to work. Things trip up during execution when I get an error reported on the following code:

// Concatinating and applying parameters.
transforms.push('scale({0})'.format(currentScale));

The exact error message is: uncaught TypeError: "scale({)})".format is not a function.

I include the following reference to hammer in my code:

<script type="text/javascript" src="https://hammerjs.github.io/dist/hammer.js"></script>

Do I need to reference an additional library?

Thanks for any help you can provide.

@ndraiman
Copy link

@artstudio123 you can use the following instead:

transforms.push('scale(' + currentScale + ')');
transforms.push('translate(' + currentDeltaX + 'px,' + currentDeltaY + 'px)');

@fedyd
Copy link

fedyd commented Mar 15, 2017

Hello,

I am trying to make Hammer to work, but I can't do it neither for a very simple task.
Here is my code
`

    <meta name="msapplication-tap-highlight" content="no" />

    <title>HammerTest</title>

    <style>
        * {
          margin: 0;
          padding: 0;
          border: 0;
        }
        html, body {
          height: 100%;
          width: 100%;
        }
        #test {
          position: relative;
          height: 50%;
          width: 50%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);

          background-color: rgb(16, 19, 37);
          font-family: Georgia;
          font-size: 60px;
          color: #fff;
        }
        #p1 {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div id="test">
        <p id="p1">Hello World!</p>
    </div>

    <script src="javascripts\Hammer\hammer.min.js"> </script>

    <!-- Custom gesture manager for touch devices -->
    <script>
        var myElement = document.getElementById("test");

        var mc = new Hammer.Manager(myElement);

        mc.get("pinch").set({ enable: true });

        mc.on("pinch", function(ev) {
            alert(ev);
        });
    </script>

</body>
`

I tested it on old Android (4) and IPad2 devices. I expected to see an alert with the name of the event, but nothing to do.
Where am I wrong?

Thank you very much,
Federico

@fedyd
Copy link

fedyd commented Mar 15, 2017

...the first part of my code has been cutted in my previous message...I wanted to add it here but it is not shown....I don't know why...
Anyway there was the meta tag that suppress the native pinch to zoom function.. i.e.

and the html doctype declaration, the html and head tags openings

@fedyd
Copy link

fedyd commented Mar 15, 2017

Sorry, the meta tag has been still deleted....??

@fedyd
Copy link

fedyd commented Mar 15, 2017

I solved and also posted an answer on Stackoverflow to an user who experienced my same problem. I discovered that console said that the mc.get() returned a null value. As a matter of fact, with my above statements, the mc object.recognizers array was void.
So I used this way to initializate the hammer instance:
var mc = new Hammer.Manager(myElement, { recognizers: [ [Hammer.Pinch, {enable: false}] ] });
and now it works.

@ivanberry
Copy link

Why should recognize pinch and pan? and in my config, the pinch event will always trigger the pan event, This really bother me.

@valentinHruzinski92
Copy link

Maybe somebody knows packages where it is implemented?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment