Tengo una azul #square vertical y horizontal centrada en mi punto de vista en mi dispositivo iOS …

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

Me gustaría cambiar de tamaño dentro de un mínimo y máximo valor cuando se realiza una pizca de zoom y de gesto en mi teléfono.

Ahora, este es todo el código 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, todo el reszining experiencia siente un poco entrecortado y no se muy bien responder a mis dedos. No funciona, pero no tan bien como yo quiero que sea.

Primero. Yo realmente no se la diferencia entre un javascript «touch»-un evento y un javascript «gesto»del evento. Necesito más eventListeners aquí? Como gestureStart y gestureEnd para que esto funcione?

Los problemas que tengo ahora es que cuando hago zoom en la #square salta a su máximo valor (300) muy rápido, pero yo realmente no puede controlar su tamaño exactamente con mis dedos. Y cuando una vez redimensionada también tengo problemas para bajar el tamaño de nuevo al hacer un zoom-out gesto.

Pongo mi código actual en jsfiddle así que usted podría ser capaz de poner a prueba tu mismo. http://jsfiddle.net/Ec3az/

Tal vez alguien puede ayudarme a salir de aquí como me gustaría terminar esta pieza. El resultado global debe simplemente ser realmente una experiencia fluida y real control sobre el tamaño de la plaza, cuando en el zoom y zoom en un Smartphone.

Gracias de antemano

edit: btw. Me encantaría usar sólo estándar eventos de toque y no uso adicional de la biblioteca.

  • En iOS, algún «toque» de los acontecimientos (el más complejo [dos dedos] queridos) también generan «gesto» de los eventos. Usted puede pensar en el (universal) eventos de toque como más «crudo», y el adicional (menos universalmente compatibles) eventos de gestos como más «cocido». «gesto» los eventos son probablemente más conveniente trabajar con …si es que existen. Pero debido a la necesaria retrasos (es uno toque el inicio de un desplazamiento, o el inicio de lo que pronto se convertirá en una de dos dedos?) ellos tienden a no ser despedido de Javascript muy rápidamente (aunque el tiempo extra es sólo milisegundos y es a menudo poco visible para los seres humanos).
InformationsquelleAutor matt | 2012-05-30

1 Comentario

  1. 7

    El problema que tiene es que cuando usted consigue un nuevo gesto de evento de cambio, que fueron la ampliación de la anchura actual de la plaza, cuando lo que realmente quería a escala de la original, la anchura y la altura de la plaza. Haciendo su camino se acumula cada cambio de escala y provoca un rápido aumento en el tamaño de la plaza, que es lo que estaban experimentando.

    Después de que el zoom se ha terminado, también necesitamos actualizar el ancho original de la anchura actual, así que la próxima vez que el usuario se aleja, se va a la escala del tamaño correcto.

    Así que esto crea una experiencia más suave, ya que siempre se la ampliación de la anchura 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'));
    }

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

    http://jsfiddle.net/D9NC3/

    También, con respecto a los gestos y eventos de toque, yo los eventos táctiles están soportados en un número de navegadores (android, iOS, Firefox y safari parece http://caniuse.com/#search=touch), pero el gesto de los eventos que yo sepa son de propiedad exclusiva de iOS safari. Esencialmente están ahí para ayudarle con el manejo de iOS tipo de gestos (pellizcar para hacer zoom, rotar, etc), por lo que no tenemos que implementar gesto comprobar usted mismo.

    Espero que ayude!

    • Has mirado en mi más reciente edición? Me di cuenta de que yo mismo y lo solucionó! 🙂
    • Sí, gracias muy mucho! Sólo se deshizo de mi comentario!
    • Genial, me alegro de que ayudó a!
    • ¿Cuál es el punto de vel en el código?
    • Parece que es sólo una nueva variable a partir del código original de la OP. Supongo que debe haber olvidado de sacarlo.

Dejar respuesta

Please enter your comment!
Please enter your name here