Wilq32.RotateImage es un plugin Canvas de jQuery desarrollado por Pawel Witkowski. La gran virtud de este plugin es la posibilidad de rotar fácilmente imágenes cargadas por usuarios (del lado del cliente) sin tener que husmear en interminables códigos o ingeniárnosla para ver cómo se hace.

El plugin nos permite elegir tanto la cantidad de grados que deseamos que rote, como la animación que nos gustaría que tenga. Conoce un poco más sobre este script, su uso, bugs y notas importantes.

Este es el producto final de un Snippet de Wilq32.PhotoEffect Snippet. Ahora puedes utilizar este pequeño script para lograr la rotación de imágenes del lado del cliente (por ejemplo: contenido generado por usuarios), y animar esta rotación con funciones propias. Existen mínimos bugs que se resolverán con la ayuda de los programadores (¿Alguna solución? Contactar a [email protected]).

Bugs conocidos

  • En IE los eventos del mouse genera multiplicaciones
  • Existen notificaciones que dicen que el script no funciona con IE 8.0rc1
  • En IE se dan problemas para cargar imágenes (pero no con el efecto). En ese caso hay que refrescar la página o ir hacia atrás
  • A veces no se aplica la rotación estática, pero refrescar el sitio puede ayudar

Uso

  • jQuery(imgElement).rotate(angleVale)
  • jQuery(imgElement).rotate(parameters)
  • jQuery(imgElement).rotateAnimation(parameters)
  • jQuery(imgElement).rotateAnimation(parameters)

Resultado

jQueryRotateElement – ¡¡¡IMPORTANTE!!! la función devuelve rotateElement para posibilitar la conexión entre eventos con el elemento de rotación que se creó.

Parámetros

  • ({angle:angleValue,
  • [animateAngle:animateAngleValue],
  • [maxAngle:maxAngleValue],
  • [minAngle:minAngleValue],
  • [callback:callbackFunction],
  • [bind:[{event: function},{event:function} ] })
  • jQuery(imgElement).rotateAnimation

Aplicación

  • angleValue – Rotación en el sentido de las agujas del reloj dada en grados
  • [animateAngleValue] – Parámetro opcional, rotación de la animación en este valor
  • [maxAngleValue] – Parámetro opcional, máxima angulatura posible para la animación
  • [minAngleValue] – Parámetro opcional, mínima angulatura posible para la animación
  • [callbackFunction] – Funcional opcional para correr después de completar la animación
  • [bind: [ {event: function}…] – Parámetro opcional, hace una lista de los eventos bindeados para los objetos recién creados disponibles para rotación

Importante

Incluir el script después del jQuery principal. El plugin se ubica en el namespace de jQuery y debería ser compatible con la versión anterior. Si vas a usarlo con Internet Explorer vas a tener que incluir ExCanvas.

Haz clic aquí para visitar la página oficial y descargar el plugin »

Fuente: Ajaxian

[[Sigue en: http://cursotallers.blogspot.com]]