Gestos y events táctiles: networkingimensiona sin problemas un cuadrado

Tengo un #square azul vertical y horizontalmente centrado en mi vista en mi dispositivo iOS …

 <div id="square"></div> #square { width:100px; height:100px; background:blue; margin:0 auto; } 

Me gustaría cambiar el tamaño dentro de un valor mínimo y máximo al hacer un gesto de pellizco / zoom en mi teléfono.

En este momento, este es todo el javascript que estoy usando para ello.

 $(document).ready(function() { var dom = document.body, _width = parseInt($('#square').css('width')), vel = 3, min = _width, max = 300, scale; dom.addEventListener("gesturechange", gestureChange, false); function gestureChange(e) { e.preventDefault(); scale = e.scale; _width = Math.round(_width*(scale/vel)); if ( _width <= max && _width >= min ) $('#square').css({ 'width' : _width + 'px', 'height' : _width + 'px' }); if ( _width > max ) _width = max; if ( _width < min ) _width = min; } }); 

Sin embargo, toda la experiencia reszining se siente algo entrecortada y realmente no responde suavemente a mis dedos. Funciona, pero no tan bien como quiero que sea.

Antes que nada. Realmente no entiendo la diferencia entre un "touch" javascript -event y un "gesto" javascript -event. ¿Necesito más eventListeners aquí? Al igual que gestureStart y gestureEnd para que esto funcione?

Los problemas que tengo ahora son que cuando #square el #square salta a su valor máximo (300) realmente rápido, pero no puedo controlar su tamaño exactamente con mis dedos. Y una vez networkingimensionado, también tengo problemas para disminuir el tamaño nuevamente al hacer un gesto de alejamiento.

Pongo mi código actual en jsfiddle para que puedas probarlo tú mismo. http://jsfiddle.net/Ec3az/

Tal vez alguien pueda ayudarme aquí, ya que me encantaría terminar esta pieza. El resultado general debería ser simplemente una experiencia realmente suave y un control real sobre el tamaño del cuadrado al acercar y alejar un Smartphone.

Gracias de antemano

editar: btw. Me encantaría usar solo events táctiles estándar y no usar una biblioteca adicional.

El problema que estabas teniendo es que cuando recibes un nuevo evento de cambio de gesto, estabas escalando el ancho actual del cuadrado, cuando realmente querías escalar el ancho y alto original del cuadrado. Si lo hace a su manera, se acumula cada cambio de escala y se produce un aumento muy rápido en el tamaño del cuadrado, que es lo que estaba experimentando.

Una vez finalizado el zoom, también debemos actualizar el ancho original al ancho actual, por lo que la próxima vez que el usuario amplíe, se escalará del tamaño correcto.

Entonces, esto crea una experiencia más suave ya que siempre está escalando el ancho original:

 var dom = document.body, _width = parseInt($('#square').css('width')), vel = 5.0, min = _width, max = 300, scale; dom.addEventListener("gesturechange", gestureChange, false); dom.addEventListener("gestureend", gestureEnd, false); function gestureChange(e) { e.preventDefault(); scale = e.scale; var tempWidth = _width * scale; if (tempWidth > max) tempWidth = max; if (tempWidth < min) tempWidth = min; $('#square').css({ 'width': tempWidth + 'px', 'height': tempWidth + 'px' }); } function gestureEnd(e) { e.preventDefault(); _width = parseInt($('#square').css('width')); } 

Contagem de

Este violín parece ser suave en el iPad 1, iOS 5.1. ¡Algo! 🙂

http://jsfiddle.net/D9NC3/

Además, con respecto al gesto y los events táctiles, los events táctiles son compatibles con una serie de browseres (Android, iOS Safari y Firefox parece http://caniuse.com/#search=touch ), pero los events de gestos como por lo que sé que son propietarios de iOS Safari. Están esencialmente allí para ayudarlo a manejar los gestos tipo iOS (pellizcar y hacer zoom, rotar, etc.), para que no tenga que implementar el control del gesto usted mismo.

¡Espero eso ayude!