¿Cómo giro un div con Raphael.js?

Question

Soy nuevo en Raphael y estoy realmente atascado, me gustaría rotar un div y su contenido, con un botón, con Raphael.

Idealmente, me gustaría tener una animación suave que va de 0 grados a -90 grados cuando se hace clic en el botón, luego, cuando se hace clic de nuevo en el botón, la animación se invertiría. Creo que cambiaré la identificación o clase con un clic del mouse para poder usar el mismo botón para ambas animaciones. ¿Sería eso sabio?

Realmente me gustaría un poco de ayuda por favor, mi caja de arena está en http://jsbin.com/isijo/ y se puede editar en http://jsbin.com/isijo/edit

Muchas gracias de antemano por cualquier ayuda.

Answer 1

Hola y bienvenidos a Raphael!

He estado mirando a Raphael durante más de unos meses y, aunque la documentación no es muy completa, el software es brillante.

He estado mezclando Divs con objetos de Raphael de muchas maneras y tengo una "sensación" de lo que funciona y lo que no funciona.

Le recomiendo que no intente rotar divs sino (en cambio) objetos de Rafael.

En primer lugar se podría hacer un conjunto brilloso de Raphael botones usando el código "modificables" a continuación ..

var bcontrols = new Array(); 
var yheight = 300; 

for (var i = 0; i < 3; i++) { 
    bcontrols[i] = paper.circle(15 + (35 * i), yheight, 15).attr({ 
     fill: "r(.5,.9)#39c-#036", 
     stroke: "none" 
    }); 

    bcontrols[i].shine = paper.ellipse(15 + (35 * i), yheight, 14, 14).attr({ 
     fill: "r(.5,.1)#ccc-#ccc", 
     stroke: "none", 
     opacity: 0 
    }); 

    bcontrols[i].index = i; 
    bcontrols[i].shine.index = i; 

    bcontrols[i].shine.mouseover(function (e) { 
     this.insertBefore(bcontrols[this.index]); 
    }); 

    bcontrols[i].mouseout(function() { 
     this.insertBefore(bcontrols[this.index].shine); 
    }); 

    /* Called from Raphael buttons */ 
    bcontrols[i].click(function() { 
     alert("Hello you just clicked " + this.index); 

    }); 
} 

continuación, tiene que saber más acerca de los conjuntos rotativos:

var s = paper.set(); 

s.push(paper.rect(10, 10, 30, 30, 10).attr({fill:'red'})); 

s.push(paper.rect(50, 10, 30, 30, 5).attr({fill:'blue'})); 

s.push(paper.rect(90, 10, 30, 30).attr({fill:'orange'})); 

s.animate({rotation: "360 65 25"}, 2000); 

Este muestra el grado de rotación y el centro de rotación del "conjunto" en la última línea.

Mi sitio web adicional recursos Raphael que tiene como objetivo complementar la documentación (entre otras cosas):

http://www.irunmywebsite.com/raphael/raphaelsource.html

Heres donde puede ejecutar los 2 ejemplos de código anteriores sin alteración:

http://raphaeljs.com/playground.html

Espero que esto ayudó ...

Answer 2

Que yo sepa , no hay forma de convertir un div en un objeto Raphael. Dado que el comando Raphael rotate solo está definido para los objetos de Rafael, lo mejor es crear los principales elementos de tu div (imágenes, texto, botones y todo) en Raphael en lugar de HTML, juntarlos en un solo conjunto y, como el conjunto es un objeto de Rafael, rota el conjunto.

Answer 3

Consultar Rotate a div in CSS and in IE filters. Esto no es lo mismo que SVG, por lo que si necesita más maquetación, es probable que las formas de Rafael sean el camino a seguir. Deberías poder utilizar JQuery en concierto con Raphael para manipular ambos en tu ventana, pero soy nuevo en Raphael y nunca lo he hecho.