O Zoom com pinça é um recurso nativo do iphone porem você precisa capturar esse evento no javascript para poder manipular objetos específicos dentro do safari, hoje vou ensinar como capturar esse evento e como fazer o “scale” de um objeto com javascript.
Vamos utilizar o mesmo HTML e CSS do post anterior, o de “Movendo objetos com ontouchstart e ontouchmove para iPad/iPhone”, vou colocar o HTML e o CSS aqui para facilitar a sua compreensão.
HTML:
<!DOCTYPE HTML> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <title>Touch Events</title> <link rel="stylesheet" href="gestos.css" media="all" /> </head> <body> <div id="item"></div> <script type="text/javascript" src="gestos.js"></script> </body> </html>
CSS:
#item {
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
}
e vamos ao javascipt, primeiro declaramos o objeto:
var obj = document.getElementById('item');
e depois atribuímos o evento a ele:
obj.ongesturechange = function(){ escala(event); };
crie a função escala:
function escala(e){
}
O evento ongesturechange possui um atributo scale, esses valores são representados da seguinte forma, 1 é o tamanho natural do objeto 0.1 é 10% do tamanho, dessa forma sabemos que 2 é o dobro do tamanho e asism sucessivamente.
Vamos utilizar o valor do scale, e atribui-lo ao Zoom.
function escala(e){
obj.style.zoom = e.scale;
}
E para finalizar colocamos e.preventDefault(); return false; para evitar a área de seleção indesejada
function escala(e){
obj.style.zoom = e.scale;
e.preventDefault();
return false;
}
no final seu javascript estará assim:
var obj = document.getElementById('item');
obj.ongesturechange = function(){ escala(event); };
function escala(e){
obj.style.zoom = e.scale;
e.preventDefault();
return false;
}
pronto, simples né, bem se esse post te ajudou não esquece de deixar um comentário.
