-
-
Save claudiuschan/83dd2d2a1f875bdad36df2f74782aa3d to your computer and use it in GitHub Desktop.
A simple way of panning and zooming an image using Hammer.js.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //image to pinch | |
| <img id="hammerFrame" src="images/tutorials.jpeg" /> | |
| <script> | |
| var myElement = document.getElementById('hammerFrame'); | |
| var mc = new Hammer.Manager(myElement); | |
| var webpage = document.querySelector("#hammerFrame"); | |
| // create a pinch and rotate recognizer | |
| // these require 2 pointers | |
| var pinch = new Hammer.Pinch(); | |
| var rotate = new Hammer.Rotate(); | |
| // we want to detect both the same time | |
| pinch.recognizeWith(rotate); | |
| // add to the Manager | |
| mc.add([pinch]); | |
| //Default scales value | |
| var adjustScale = 1; | |
| var adjustDeltaX = 0; | |
| var adjustDeltaY = 0; | |
| var currentScale = null; | |
| var currentDeltaX = null; | |
| var currentDeltaY = null; | |
| mc.on("pinch", 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(' + currentScale + ')'); | |
| //transforms.push('translate(' + currentDeltaX + 'px,' + currentDeltaY + 'px)'); | |
| webpage.style.transform = transforms.join(' '); | |
| }); | |
| mc.on("pinchend", function (ev) { | |
| // Saving the final transforms for adjustment next time the user interacts. | |
| adjustScale = currentScale; | |
| adjustDeltaX = currentDeltaX; | |
| adjustDeltaY = currentDeltaY; | |
| }); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment