Cómo agregar y quitar brillo para el elemento Raphael?

Question

Estoy tratando de configurar un elemento flotante para un elemento rafael de modo que cuando el mouse esté en el elemento, tenga un brillo y cuando el mouse se vaya, se eliminará el brillo. He descubierto cómo agregar el resplandor, pero tengo problemas para eliminarlo. Esto es lo que mi script se parece a:

$(document).ready(function() { 
    var paper = Raphael(0,0,360,360); 
    var myCircle = paper.circle(180,180,30).attr('stroke','#FFF'); 
    myCircle.hover(function() { 
     myCircle.glow().attr('stroke','#FFF'); 
    }, function() { 
     // removing the glow from the circle?? 
    }); 
}); 

Así que la parte que funciona es la adición de la luz al círculo cuando pasa sobre ella. Sin embargo, no sé cómo eliminar el brillo cuando el mouse se aleja del elemento del círculo. ¿Sabes cómo puedo eliminar el resplandor de un elemento?

Nota: El fondo del elemento del cuerpo está configurado en negro (# 000).

bibliotecas utilizadas:

• JQuery
• Raphael.js

Answer 1

La solución es probablemente más simple de lo que pensaba.

http://jsfiddle.net/vszkW/2/ (tenedor de violín de Matt)

Sólo hay que almacenar el "resplandor", que es un elemento. Y como es habitual en Rafael, los elementos tienen una .Remove():

myCircle.hover(
    // When the mouse comes over the object // 
    // Stock the created "glow" object in myCircle.g 
    function() { 
     this.g = this.glow({color: "#FFF", width: 100}); 
    }, 
    // When the mouse goes away // 
    // this.g was already created. Destroy it! 
    function() { 
     this.g.remove(); 
    }); 

Answer 2

Este es un comportamiento extraño. Por ejemplo (Jugueteé con esto por unos cuantos minutos):

http://jsfiddle.net/FPE6y/

Por lo que yo puedo decir, esto no debería ocurrir. Posiblemente un error. RaphaelJS históricamente parece tener problemas con deshacer cosas: How do you make an element undragable in Raphael?

Lo siento, no puedo presentar una solución, excepto que tal vez el círculo se borre y se sustituya inmediatamente por uno nuevo que nunca se ha aplicado un brillo?

Mientras tanto, report the behavior at GitHub si aún no está allí. Puede hacer referencia a mi jsFiddle en el informe si lo desea (o bifurcarlo y enviar el suyo).

Answer 3

Muy bien, un poco hackeo.

No podrá quitar el brillo fácilmente porque el resplandor es en realidad una matriz de elementos, por alguna razón no hay una función removeGlow que los capture y los clave.

Esto es lo que se me ocurrió, de hecho tengo un proyecto en este momento que necesitaba esta funcionalidad, vine aquí para solucionarlo y pensé que encontraría algo una vez que viera su publicación.

bien, paso 1:

Añadir una matriz vacía por encima de su materia init, esto va a mantener sus resplandores.

var glowsToBeRemoved = [];

Paso 2: Id por Raphael.js y encontrar (dentro de elproto.glow):

for (var i = 1; i < c + 1; i++) { 
     out.push(r.path(path).attr({ 
      stroke: s.color, 
      fill: s.fill ? s.color : "none", 
      "stroke-linejoin": "round", 
      "stroke-linecap": "round", 
      "stroke-width": +(s.width/c * i).toFixed(3), 
      opacity: +(s.opacity/c).toFixed(3) 
     })); 
    } 

Justo después de esto (y antes del retorno) añaden:

glowsToBeRemoved.push(out); 

Entonces, ¿qué es esto haciendo, está presionando todos los resplandores a medida que se crean en una matriz.

Ahora, para eliminarlos, crearía un bucle con .remove(); en tus hover-outs.Esto es lo que vería como:

var i = 0; 
var size=glowsToBeRemoved.length; 
for(i=0; i < size; i++) 
{ 
    glowsToBeRemoved[i].remove(); 
} 

Puede romper esto en una función y adjuntarlo a su vuelo estacionario a cabo, o lo que usted quiere hacer con ella.

¿Luces bien?

Answer 4

Si bien la respuesta de Lajarre es definitivamente el camino a seguir, en la actualidad existe un error en la de Rafael, haciendo que el método remove(), no sólo para eliminar el elemento de brillo, pero también el elemento al que se aplicó el brillo.

Por qué esto todavía funciona en el violín de Lajarre es más allá de mi comprensión.

ver aquí para más detalles sobre esta cuestión: https://github.com/DmitryBaranovskiy/raphael/issues/508

Answer 5

Así es como agregar/eliminar el efecto de brillo usando Raphael:

paper.circle(x, y, r) 
    .attr({fill: "lightblue", stroke: "lightblue", "stroke-width": 6}) 
    .hover(function() { 
       this.glowEffect = this.glow({color:"#1693A5", width: 2});       
      }, function() { 
       this.glowEffect.remove();      
      }) 
    .id = "example"; 

Acabo de añadir ".hover" al elemento Raphael .

También podría hacer algo como:

var c = paper.circle(x, y, r); 
c.hover(function() { 
       this.glowEffect = this.glow({color:"#1693A5", width: 2});       
      }, function() { 
       this.glowEffect.remove();      
      });