Hola,
Tengo un problema con Internet Explorer en general (6,7,8,9).
Estoy usando la libreria javascript Raphael.js junto con jQuery.
Lo que necesito es agregar elementos (SVG) "image" para posteriormente rotarlos y moverlos.
En Safari, Chrome, Firefox y Opera funciona correctamente, el problema es Internet Explorer.
Mediante un botón agrego un elemento "rect" y "image" (src remoto) en las mismas coordenadas, cuando muevo el elemento "rect" el "image" se mueve a las mismas coordenadas siempre, pero el problema está al rotarlo y moverlo el elemento "rect" gira bien, pero el "image" parece no guardar las mismas coordenadas porque al seguir rotando no se visualiza correctamente y hasta parece que la imagen se cortara o duplicara varias veces por pedazos, no entiendo a que se debe, solo pasa cuando la imagen se rota, otro bug que noto es cuando la imagen tiene rotación al moverla las coordenadas no corresponden o es como si el mouse estuviera invertido, es por el ángulo me parece.
No uso CSS porque el marco general de lo que necesito hacer es...
Un imagen PNG transparente como fondo, esta imagen tiene areas transparentes, y necesito ingresar imágenes por debajo de ese fondo y posicionar esas imagenes rotarlas y escalarlas (esto último aún no lo implemento) y al querer manejarlo con CSS (filtros en internet explorer 6) no funcionaba correctamente la imagen ya no podia moverla y no funcionaba... esos filtros para transparencia en IE6 me malograron todo :S
Si es que tienen alguna sugerencia de como puedo desarrollar esto se los agradecería... así sea nuevamente con CSS... o finalizarlo usando SVG.
Les dejo el código fuente que he realizado (no tengo implementado ahí lo del fondo, solo de momento lo del movimiento y rotación) y también una URL donde lo pueden probar.
Básicamente, hay que pulsar "Add" y luego darle CLIC a la imagen y una vez seleccionada moverla o rotarla con el botón "Rotate".
- Fuente:
www.pastie.org/3273121 (necesitan Raphael.js)
- URL demo:
http://72.44.91.252/~paradise/
Muchas gracias.