title: Pinch/Zoom & Scroll/Zoom to point in kinetic.js
body: <p>I am trying to implement zooming on my kineticjs project. I have found both of these sources that seem to work fine when they are implemented independently: </p>
  
  <p><a href="http://jsfiddle.net/FnwS5/78/" rel="nofollow">Scroll wheel zoom to point on desktop</a></p>
  
  <p><a href="https://github.com/eduplus/pinchlayer" rel="nofollow">Pinch/zoom to point on mobile</a></p>
  
  <p>The problem is I need pinch/zoom when on mobile devices and scroll zoom when on desktop devices.</p>
  
  <p>Does anyone have any example implementation of both methods on a kinetic.js project?
  Thank you in advance.</p>
  
  <p><strong>Scroll wheel zoom to point on desktop</strong></p>
  
  <pre><code>var ui = {
      stage: null,
      scale: 1,
      zoomFactor: 1.1,
      origin: {
          x: 0,
          y: 0
      },
      zoom: function (event) {
          event.preventDefault();
          var evt = event.originalEvent,
              mx = evt.clientX /* - canvas.offsetLeft */ ,
              my = evt.clientY /* - canvas.offsetTop */ ,
              wheel = evt.wheelDelta / 120; //n or -n
          var zoom = (ui.zoomFactor - (evt.wheelDelta &lt; 0 ? 0.2 : 0));
          var newscale = ui.scale * zoom;
          ui.origin.x = mx / ui.scale + ui.origin.x - mx / newscale;
          ui.origin.y = my / ui.scale + ui.origin.y - my / newscale;
  
          ui.stage.setOffset(ui.origin.x, ui.origin.y);
          ui.stage.setScale(newscale);
          ui.stage.draw();
  
          ui.scale *= zoom;
      }
  };
  </code></pre>
  
  <p><strong>Pinch/zoom to point on mobile</strong></p>
  
  <pre><code>var layer = new Kinetic.Plugins.PinchLayer({
      container: stage,
      width: image.getWidth(),
      height: image.getHeight()
  });
  </code></pre>