2012-09-10 17 views
5

Estoy usando el complemento jQuery touchy para detectar el evento pellizco para dar a los usuarios la capacidad de acercar/alejar una imagen. Aquí está la esencia de mi código:escalando imagen en gesto de pellizco

 
var w = 800, 
    h = 600; 
$('img').on('touchy-pinch', function (e, $target, data) { 
    $(this).css({ 
     width: w * data.scale, 
     height: h * data.scale 
    }); 
}); 

Cuando el objeto de datos personalizado contiene lo siguiente:

  • escala
  • previousScale
  • punto actual
  • startPoint
  • startDistance

Funciona bien en la primera pizca, pero una vez que mis dedos abandonan la pantalla y luego trato de hacerlo de nuevo, la imagen vuelve a escalar. ¿Cómo puedo modificar mi controlador para que la imagen continúe donde se quedó en lugar de volver a escalar? Usar el previousScale de los datos no ayudó ya que el previousScale también se reinicia.

Respuesta

4

El problema aquí es que no está restableciendo sus vars byh a sus valores post-escala, solo el css, por lo que el estilo vuelve a 800x600 en otro evento de escala. Necesita una persistente w y h configuradas en w*data.scale y h*data.scale en el evento de escala.

Cuestiones relacionadas