Simplest way to detect a pinch

Question

This is a WEB APP not a native app  Please no Objective-C NS commands   So I need to detect  pinch  events on iOS  Problem is every plugin or method I see for doing gestures or multi-touch events  is  usually  with jQuery and is a whole additional pluggin for every gesture under the sun  My application is huge  and I am very sensitive to deadwood in my code  All I need is to detect a pinch  and using something like jGesture is just way to bloated for my simple needs   Additionally  I have a limited understanding of how to detect a pinch manually  I can get the position of both fingers  can t seem to get the mix right to detect this  Does anyone have a simple snippet that JUST detects pinch

User · Answer

Hammer js all the way  It handles  transforms   pinches   http   eightmedia github com hammer js   But if you wish to implement it youself  i think that Jeffrey s answer is pretty solid

User · Answer

Unfortunately  detecting pinch gestures across browsers is a not as simple as one would hope  but HammerJS makes it a lot easier   Check out the Pinch Zoom and Pan with HammerJS demo  This example has been tested on Android  iOS and Windows Phone   You can find the source code at Pinch Zoom and Pan with HammerJS   For your convenience  here is the source code    x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D     lt meta charset  utf-8  gt  x000D     lt meta name  viewport  x000D          content  user-scalable no  width device-width  initial-scale 1  maximum-scale 1  gt  x000D     lt title gt Pinch Zoom lt  title gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D   x000D     lt div gt  x000D   x000D       lt div style  height 150px background-color  eeeeee  gt  x000D        Ignore this area  Space is needed to test on the iPhone simulator as pinch simulation on the x000D        iPhone simulator requires the target to be near the middle of the screen and we only respect x000D        touch events in the image area  This space is not needed in production  x000D       lt  div gt  x000D   x000D       lt style gt  x000D   x000D         pinch-zoom-container   x000D          overflow  hidden  x000D          height  300px  x000D          x000D   x000D         pinch-zoom-image   x000D          width  100   x000D          x000D   x000D       lt  style gt  x000D   x000D       lt script src  https   hammerjs github io dist hammer js  gt  lt  script gt  x000D   x000D       lt script gt  x000D   x000D        var MIN SCALE   1     1 scaling when first loaded x000D        var MAX SCALE   64  x000D   x000D           HammerJS fires  pinch  and  pan  events that are cumulative in nature and not x000D           deltas  Therefore  we need to store the  last  values of scale  x and y so that we can x000D           adjust the UI accordingly  It isn t until the  pinchend  and  panend  events are received x000D           that we can set the  last  values  x000D   x000D           Our  raw  coordinates are not scaled  This allows us to only have to modify our stored x000D           coordinates when the UI is updated  It also simplifies our calculations as these x000D           coordinates are without respect to the current scale  x000D   x000D        var imgWidth   null  x000D        var imgHeight   null  x000D        var viewportWidth   null  x000D        var viewportHeight   null  x000D        var scale   null  x000D        var lastScale   null  x000D        var container   null  x000D        var img   null  x000D        var x   0  x000D        var lastX   0  x000D        var y   0  x000D        var lastY   0  x000D        var pinchCenter   null  x000D   x000D           We need to disable the following event handlers so that the browser doesn t try to x000D           automatically handle our image drag gestures  x000D        var disableImgEventHandlers   function      x000D          var events     onclick    onmousedown    onmousemove    onmouseout    onmouseover   x000D                         onmouseup    ondblclick    onfocus    onblur    x000D   x000D          events forEach function  event    x000D            img event    function      x000D              return false  x000D               x000D              x000D           x000D   x000D           Traverse the DOM to calculate the absolute position of an element x000D        var absolutePosition   function  el    x000D          var x   0  x000D            y   0  x000D   x000D          while  el     null    x000D            x    el offsetLeft  x000D            y    el offsetTop  x000D            el   el offsetParent  x000D            x000D   x000D          return   x  x  y  y    x000D           x000D   x000D        var restrictScale   function  scale    x000D          if  scale  lt  MIN SCALE    x000D            scale   MIN SCALE  x000D            else if  scale  gt  MAX SCALE    x000D            scale   MAX SCALE  x000D            x000D          return scale  x000D           x000D   x000D        var restrictRawPos   function  pos  viewportDim  imgDim    x000D          if  pos  lt  viewportDim scale - imgDim       too far left up  x000D            pos   viewportDim scale - imgDim  x000D            else if  pos  gt  0       too far right down  x000D            pos   0  x000D            x000D          return pos  x000D           x000D   x000D        var updateLastPos   function  deltaX  deltaY    x000D          lastX   x  x000D          lastY   y  x000D           x000D   x000D        var translate   function  deltaX  deltaY    x000D             We restrict to the min of the viewport width height or current width height as the x000D             current width height may be smaller than the viewport width height x000D   x000D          var newX   restrictRawPos lastX   deltaX scale  x000D                                    Math min viewportWidth  curWidth   imgWidth   x000D          x   newX  x000D          img style marginLeft   Math ceil newX scale     px   x000D   x000D          var newY   restrictRawPos lastY   deltaY scale  x000D                                    Math min viewportHeight  curHeight   imgHeight   x000D          y   newY  x000D          img style marginTop   Math ceil newY scale     px   x000D           x000D   x000D        var zoom   function  scaleBy    x000D          scale   restrictScale lastScale scaleBy   x000D   x000D          curWidth   imgWidth scale  x000D          curHeight   imgHeight scale  x000D   x000D          img style width   Math ceil curWidth     px   x000D          img style height   Math ceil curHeight     px   x000D   x000D             Adjust margins to make sure that we aren t out of bounds x000D          translate 0  0   x000D           x000D   x000D        var rawCenter   function  e    x000D          var pos   absolutePosition container   x000D   x000D             We need to account for the scroll position x000D          var scrollLeft   window pageXOffset   window pageXOffset   document body scrollLeft  x000D          var scrollTop   window pageYOffset   window pageYOffset   document body scrollTop  x000D   x000D          var zoomX   -x    e center x - pos x   scrollLeft  scale  x000D          var zoomY   -y    e center y - pos y   scrollTop  scale  x000D   x000D          return   x  zoomX  y  zoomY    x000D           x000D   x000D        var updateLastScale   function      x000D          lastScale   scale  x000D           x000D   x000D        var zoomAround   function  scaleBy  rawZoomX  rawZoomY  doNotUpdateLast    x000D             Zoom x000D          zoom scaleBy   x000D   x000D             New raw center of viewport x000D          var rawCenterX   -x   Math min viewportWidth  curWidth  2 scale  x000D          var rawCenterY   -y   Math min viewportHeight  curHeight  2 scale  x000D   x000D             Delta x000D          var deltaX    rawCenterX - rawZoomX  scale  x000D          var deltaY    rawCenterY - rawZoomY  scale  x000D   x000D             Translate back to zoom center x000D          translate deltaX  deltaY   x000D   x000D          if   doNotUpdateLast    x000D            updateLastScale    x000D            updateLastPos    x000D            x000D           x000D   x000D        var zoomCenter   function  scaleBy    x000D             Center of viewport x000D          var zoomX   -x   Math min viewportWidth  curWidth  2 scale  x000D          var zoomY   -y   Math min viewportHeight  curHeight  2 scale  x000D   x000D          zoomAround scaleBy  zoomX  zoomY   x000D           x000D   x000D        var zoomIn   function      x000D          zoomCenter 2   x000D           x000D   x000D        var zoomOut   function      x000D          zoomCenter 1 2   x000D           x000D   x000D        var onLoad   function      x000D   x000D          img   document getElementById  pinch-zoom-image-id    x000D          container   img parentElement  x000D   x000D          disableImgEventHandlers    x000D   x000D          imgWidth   img width  x000D          imgHeight   img height  x000D          viewportWidth   img offsetWidth  x000D          scale   viewportWidth imgWidth  x000D          lastScale   scale  x000D          viewportHeight   img parentElement offsetHeight  x000D          curWidth   imgWidth scale  x000D          curHeight   imgHeight scale  x000D   x000D          var hammer   new Hammer container    x000D            domEvents  true x000D              x000D   x000D          hammer get  pinch   set   x000D            enable  true x000D              x000D   x000D          hammer on  pan   function  e    x000D            translate e deltaX  e deltaY   x000D              x000D   x000D          hammer on  panend   function  e    x000D            updateLastPos    x000D              x000D   x000D          hammer on  pinch   function  e    x000D   x000D               We only calculate the pinch center on the first pinch event as we want the center to x000D               stay consistent during the entire pinch x000D            if  pinchCenter     null    x000D              pinchCenter   rawCenter e   x000D              var offsetX   pinchCenter x scale -  -x scale   Math min viewportWidth  curWidth  2   x000D              var offsetY   pinchCenter y scale -  -y scale   Math min viewportHeight  curHeight  2   x000D              pinchCenterOffset     x  offsetX  y  offsetY    x000D              x000D   x000D               When the user pinch zooms  she he expects the pinch center to remain in the same x000D               relative location of the screen  To achieve this  the raw zoom center is calculated by x000D               first storing the pinch center and the scaled offset to the current center of the x000D               image  The new scale is then used to calculate the zoom center  This has the effect of x000D               actually translating the zoom center on each pinch zoom event  x000D            var newScale   restrictScale scale e scale   x000D            var zoomX   pinchCenter x newScale - pinchCenterOffset x  x000D            var zoomY   pinchCenter y newScale - pinchCenterOffset y  x000D            var zoomCenter     x  zoomX newScale  y  zoomY newScale    x000D   x000D            zoomAround e scale  zoomCenter x  zoomCenter y  true   x000D              x000D   x000D          hammer on  pinchend   function  e    x000D            updateLastScale    x000D            updateLastPos    x000D            pinchCenter   null  x000D              x000D   x000D          hammer on  doubletap   function  e    x000D            var c   rawCenter e   x000D            zoomAround 2  c x  c y   x000D              x000D   x000D           x000D   x000D       lt  script gt  x000D   x000D       lt button onclick  zoomIn    gt Zoom In lt  button gt  x000D       lt button onclick  zoomOut    gt Zoom Out lt  button gt  x000D   x000D       lt div class  pinch-zoom-container  gt  x000D         lt img id  pinch-zoom-image-id  class  pinch-zoom-image  onload  onLoad    x000D             src  https   hammerjs github io assets img pano-1 jpg  gt  x000D       lt  div gt  x000D   x000D   x000D     lt  div gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

My answer is inspired by Jeffrey s answer  Where that answer gives a more abstract solution  I try to provide more concrete steps on how to potentially implement it  This is simply a guide  one that can be implemented more elegantly  For a more detailed example check out this tutorial by MDN web docs  HTML   lt div id  quot zoom here quot  gt      lt  div gt   JS  lt script gt  var dist1 0  function start ev               if  ev targetTouches length    2     check if two fingers touched screen                dist1   Math hypot    get rough estimate of distance between two fingers                 ev touches 0  pageX - ev touches 1  pageX                  ev touches 0  pageY - ev touches 1  pageY                                                 function move ev               if  ev targetTouches length    2  amp  amp  ev changedTouches length    2                        Check if the two target touches are the same ones that started                var dist2   Math hypot   get rough estimate of new distance between fingers                 ev touches 0  pageX - ev touches 1  pageX                  ev touches 0  pageY - ev touches 1  pageY                     alert dist                   if dist1 gt dist2     if fingers are closer now than when they first touched screen  they are pinching                   alert  zoom out                                      if dist1 lt dist2     if fingers are further apart than when they first touched the screen  they are making the zoomin gesture                    alert  zoom in                                                             document getElementById   zoom here   addEventListener   touchstart   start  false           document getElementById  zoom here   addEventListener  touchmove   move  false    lt  script gt

User · Answer

Think about what a pinch event is  two fingers on an element  moving toward or away from each other  Gesture events are  to my knowledge  a fairly new standard  so probably the safest way to go about this is to use touch events like so    ontouchstart event   if  e touches length     2        scaling   true      pinchStart e        ontouchmove event   if  scaling        pinchMove e        ontouchend event   if  scaling        pinchEnd e       scaling   false      To get the distance between the two fingers  use the hypot function   var dist   Math hypot      e touches 0  pageX - e touches 1  pageX      e touches 0  pageY - e touches 1  pageY

User · Answer

detect two fingers pinch zoom on any element  easy and w o hassle with 3rd party libs like Hammer js  beware  hammer has issues with scrolling    function onScale el  callback        let hypo   undefined       el addEventListener  touchmove   function event            if  event targetTouches length     2                let hypo1   Math hypot  event targetTouches 0  pageX - event targetTouches 1  pageX                    event targetTouches 0  pageY - event targetTouches 1  pageY                if  hypo     undefined                    hypo   hypo1                            callback hypo1 hypo                    false         el addEventListener  touchend   function event            hypo   undefined         false

User · Answer

None of these answers achieved what I was looking for  so I wound up writing something myself  I wanted to pinch-zoom an image on my website using my MacBookPro trackpad  The following code  which requires jQuery  seems to work in Chrome and Edge  at least  Maybe this will be of use to someone else   function setupImageEnlargement el            el  represents the image element  such as the results of document getElementByd  image-id       var img     el         window   html    body   bind  scroll touchmove mousewheel   function e                  TODO  need to limit this to when the mouse is over the image in question            TODO  behavior not the same in Safari and FF  but seems to work in Edge and Chrome          if  typeof e originalEvent     undefined   amp  amp  e originalEvent    null              amp  amp  e originalEvent wheelDelta     undefined   amp  amp  e originalEvent wheelDelta    null                        e preventDefault                e stopPropagation                console log e               if  e originalEvent wheelDelta  gt  0                                   zooming                 var newW   1 1   parseFloat img width                     var newH   1 1   parseFloat img height                     if  newW  lt  el naturalWidth  amp  amp  newH  lt  el naturalHeight                                           Go ahead and zoom the image                       console log  zooming the image                        img css                                                 width   newW    px                            height   newH    px                            max-width   newW    px                            max-height   newH    px                                                            else                                          Make image as big as it gets                       console log  making it as big as it gets                        img css                                                 width   el naturalWidth    px                            height   el naturalHeight    px                            max-width   el naturalWidth    px                            max-height   el naturalHeight    px                                                                      else if  e originalEvent wheelDelta  lt  0                                   shrinking                 var newW   0 9   parseFloat img width                     var newH   0 9   parseFloat img height                        TODO  I had added these data-attributes to the image onload                     They represent the original width and height of the image on the screen                     If your image is normally 100  width  you may need to change these values on resize                  var origW   parseFloat img attr  data-startwidth                     var origH   parseFloat img attr  data-startheight                      if  newW  gt  origW  amp  amp  newH  gt  origH                                           Go ahead and shrink the image                       console log  shrinking the image                        img css                                                 width   newW    px                            height   newH    px                            max-width   newW    px                            max-height   newH    px                                                            else                                          Make image as small as it gets                       console log  making it as small as it gets                           This restores the image to its original size  You may want                       to do this differently  like by removing the css instead of defining it                      img css                                                 width   origW    px                            height   origH    px                            max-width   origW    px                            max-height   origH    px

User · Answer

You want to use the gesturestart  gesturechange  and gestureend events  These get triggered any time 2 or more fingers touch the screen   Depending on what you need to do with the pinch gesture  your approach will need to be adjusted  The scale multiplier can be examined to determine how dramatic the user s pinch gesture was  See Apple s TouchEvent documentation for details about how the scale property will behave   node addEventListener  gestureend   function e        if  e scale  lt  1 0               User moved fingers closer together       else if  e scale  gt  1 0               User moved fingers further apart          false     You could also intercept the gesturechange event to detect a pinch as it happens if you need it to make your app feel more responsive

[javascript] Simplest way to detect a pinch

Examples related to javascript

Examples related to jquery

Examples related to ios

Examples related to mobile-safari