Le geste et le toucher des événements - redimensionner facilement un carré

J'ai un bleu #square verticalement et horizontalement centré dans ma fenêtre d'affichage sur mon appareil iOS ...

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

Je voudrais redimensionner dans un min et max de la valeur lorsque l'on fait un pincement/zoom geste sur mon téléphone.

Droit maintenant, c'est tout le code javascript que j'utilise pour cela.

$(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;
    }


});

Cependant, l'ensemble de la reszining expérience est instable et n'est pas vraiment bien répondre à mes doigts. Il fonctionne, mais pas aussi bien que je le veux.

Tout d'abord. Je n'ai pas vraiment la différence entre un javascript de "toucher"l'événement et le javascript "geste"de l'événement. J'ai besoin de plus eventListeners ici? Comme gestureStart et gestureEnd pour que cela fonctionne?

Les problèmes que j'ai actuellement c'est que quand je zoom dans le #square sauts à son maximum-valeur (300) très rapide, mais je ne peux pas vraiment contrôler sa taille exactement avec mes doigts. Et quand une fois redimensionnée j'ai aussi de la difficulté à la baisse de la taille de nouveau lorsque vous effectuez un zoom arrière geste.

J'ai mis mon code actuel sur jsfiddle de sorte que vous pourriez être en mesure de tester vous-même. http://jsfiddle.net/Ec3az/

Peut-être que quelqu'un pourra m'aider ici que j'aimerais terminer ce morceau. Le résultat global doit tout simplement être vraiment une expérience agréable et réel contrôle sur la taille de la place lors du zoom avant et zoom arrière sur un Smartphone.

Je vous remercie à l'avance

edit: btw. J'aimerais utiliser uniquement tactile de série d'événements et de ne pas utiliser une bibliothèque supplémentaire.

Sur iOS, certains de "toucher" les événements (le plus complexe [deux-doigt]) également de générer des "geste" des événements. Vous pouvez penser à l' (universelle) les événements tactiles comme étant plus "brut", et les autres (moins universellement pris en charge) les événements de mouvement comme étant plus "cuit". "geste" des événements sont probablement plus pratique de travailler avec ...si elles existent. Mais en raison de retards (one touch le début d'un parchemin, ou le début de ce qui deviendra bientôt l'un de pincement de deux doigts?) ils ont tendance à ne pas être licenciés pour Javascript assez rapidement (bien que le temps supplémentaire est seulement millisecondes et est souvent à peine visible à l'oeil humain).

OriginalL'auteur matt | 2012-05-30

7

Le problème est que lorsque vous obtenez un nouveau geste de modifier l'événement, vous avez été mise à l'échelle de la largeur actuelle de la place, si vraiment vous vouliez à l'échelle de l'original de la largeur et de la hauteur de la place. Faire votre chemin s'accumule chaque changement d'échelle, et provoque une très rapide augmentation de la taille de la place, qui est ce que vous étiez confrontés.

Après le zoom est terminé, nous avons également besoin de mettre à jour la largeur d'origine à la largeur actuelle, donc la prochaine fois que l'utilisateur zoome, il va à l'échelle de la taille correcte.

Donc cela crée un plus expérience en tant qu'il est toujours de mise à l'échelle de la largeur d'origine:
```
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'));
}
```
Ce violon semble être lisse sur l'iPad 1, iOS 5.1.quelque chose! 🙂

http://jsfiddle.net/D9NC3/

Également, en ce qui concerne le geste et le toucher d'événements, les événements tactiles sont pris en charge dans un certain nombre de navigateurs (android, iOS, safari et Firefox, il semble http://caniuse.com/#search=touch), mais le geste événements autant que je sache, sont la propriété de iOS safari. Ils sont essentiellement là pour vous aider à la manipulation de l'iOS type de gestes (pincement et de zoom, de rotation, etc), de sorte que vous n'avez pas à mettre en œuvre geste de vérifier vous-même.

Espère que cela aide!

Avez-vous regardé ma plus récente édition? Je viens de remarquer que moi-même et fixe! 🙂
Ouais, merci beaucoup! Juste de me débarrasser de mon commentaire!
Cool, content que ça a aidé!
Quel est le point de vel dans votre code?
On dirait qu'il est juste un solde non utilisé de la variable dans le code d'origine de l'OP. Je suppose que je dois avoir oublié de prendre.

OriginalL'auteur Andy

Vous devez vous connecter pour publier un commentaire.