Limit canvas pinch zoom out on iPad Safari -


i have fiddle

js fiddle

i want limit pinch zoom out of canvas on ipad safari. when pinch out canvas shrinks , becomes small. there way can limit zoom out level on particular device? using kineticjs.

here's code below of fiddle

div id="container"></div> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.5.min.js"></script>   <script type="text/javascript">   $(document).ready(function() {     init();   });    function init() {       var lastdist = 0;       var startscale = 1;       function getdistance(p1, p2) {         return math.sqrt(math.pow((p2.x - p1.x), 2) + math.pow((p2.y - p1.y), 2));       }      var image = new image();     image.onload = function() {       kimage = new kinetic.image({         image: image,         x : 0,         y : 0       });        var stage = new kinetic.stage({         container: 'container',         width: 500,         height: 500       });        var layer = new kinetic.layer();        var group = new kinetic.group({         draggable: true,          dragboundfunc: function(pos) {           var newx = 0;           if (pos.x < 0) {             newx = pos.x < stage.getwidth() - kimage.getwidth()               ? stage.getwidth() - kimage.getwidth() : pos.x;           }            var newy = 0;                    if (pos.y < 0) {             newy = pos.y < stage.getheight() - kimage.getheight()               ? stage.getheight() - kimage.getheight() : pos.y;           }            return {             x: newx,             y: newy           };         }       });        stage.getcontent().addeventlistener('click', function(evt) {             var touch1 = evt.touches[0];             var touch2 = evt.touches[1];              if(touch1 && touch2) {               var dist = getdistance({                 x: touch1.clientx,                 y: touch1.clienty               }, {                 x: touch2.clientx,                 y: touch2.clienty               });                if(!lastdist) {                 lastdist = dist;               }                var scale = stage.getscale().x * dist / lastdist;                stage.setscale(scale);               stage.draw();               lastdist = dist;             }           }, false);            stage.getcontent().addeventlistener('touchend', function() {             lastdist = 0;           }, false);        group.add(kimage);       layer.add(group);       stage.add(layer);       layer.draw();     }     image.src = 'http://www.ourclientwebsites.com/html5/images/1.jpg';   }   </script> 

add viewport meta tag:<meta name="viewport" content="width=device-width, user-scalable=no">. prevent page zooming, while still allowing app grab javascript event.


Comments

Popular posts from this blog

image - ClassNotFoundException when add a prebuilt apk into system.img in android -

I need to import mysql 5.1 to 5.5? -

Java, Hibernate, MySQL - store UTC date-time -