Limit canvas pinch zoom out on iPad Safari -
i have 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
Post a Comment