mise à l’échelle de l’image sur le geste de pincement

J’utilise le plugin jQuery Touchy pour détecter l’événement de pincement afin de donner aux utilisateurs la possibilité de zoomer / dézoomer sur une image. Voici l’essentiel de mon code:

 var w = 800,
     h = 600;
 $ ('img'). on ('touchy-pinch', fonction (e, $ target, data) {
     $ (this) .css ({
         largeur: w * data.scale,
         hauteur: h * échelle de données
     });
 });

Où l’object de données personnalisé contient les éléments suivants:

  • échelle
  • échelle précédente
  • currentPoint
  • sharepoint départ
  • startDistance

La première pincée fonctionne correctement, mais une fois que mes doigts ont quitté l’écran et que j’essaie de le refaire, l’image est redimensionnée. Comment puis-je modifier mon gestionnaire pour que l’image continue là où elle l’a laissée plutôt que de la redimensionner? L’utilisation de la version précédente de Scale n’a pas aidé, car la précédente était également réinitialisée.

Le problème ici est que vous ne réinitialisez pas vos vars w et h à leurs valeurs post-mises à l’échelle, mais uniquement le css, de sorte que le style revient à 800×600 lors d’un autre événement d’échelle. Vous avez besoin de w et h persistants définis sur w*data.scale et h*data.scale sur l’événement scale.