Come aggiungere e rimuovere il bagliore per l'elemento Raphael?

Question

Sto provando a impostare un hover per un elemento raphael in modo che quando il mouse si trova sull'elemento, ha un bagliore e quando il mouse lascia, il bagliore viene rimosso. Ho capito come aggiungere il bagliore, ma ho difficoltà a rimuoverlo. Ecco ciò che il mio script appare come:

$(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?? 
    }); 
}); 

Così la parte che funziona è l'aggiunta del bagliore al cerchio quando mi passa il mouse su di esso. Tuttavia, non so come rimuovere il bagliore quando il mouse viene spostato dall'elemento del cerchio. Sai come posso rimuovere il bagliore da un elemento?

Nota: lo sfondo dell'elemento del corpo è impostato su nero (# 000).

librerie utilizzate:

• JQuery
• Raphaël.js

Answer 1

La soluzione è probabilmente più semplice di quanto pensassi.

http://jsfiddle.net/vszkW/2/ (forcella dal violino di Matt)

Devi solo fare scorta la "glow", che è un elemento. E come al solito a Raffaello, gli elementi hanno un .Rimuovere():

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

Questo è un comportamento bizzarro. Per esempio (I giocherellava con questo per un bel paio di minuti):

http://jsfiddle.net/FPE6y/

Per quanto posso dire, questo non dovrebbe accadere. Forse un bug. Storicamente sembra che RaphaelJS abbia problemi con cose che non funzionano: How do you make an element undragable in Raphael?

Spiacente, non riesco a presentare una soluzione tranne che forse il cerchio viene cancellato e sostituito immediatamente con uno nuovo che non ha mai applicato un bagliore?

Nel frattempo, report the behavior at GitHub se non è già lì. Puoi fare riferimento al mio jsFiddle nel rapporto, se lo desideri (o forchilo e invia il tuo).

Answer 3

OK, un po 'un trucco.

Non sarete in grado di rimuovere facilmente il bagliore perché il bagliore è in realtà una serie di elementi, per qualsiasi ragione non esiste ancora una funzione removeGlow che li cattura e li inchioda.

Ecco cosa mi è venuto in mente, in realtà ho un progetto in questo momento che aveva bisogno di questa funzionalità, è venuto qui per risolvere il problema e ho pensato che avrei inventato qualcosa una volta che ho visto il tuo post.

Va bene, passo 1:

Aggiungi un array vuoto sopra la roba init, questo sta per tenere i vostri bagliori.

var glowsToBeRemoved = [];

Punto 2: Andate in Raphaël.js e trovare (entro 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) 
     })); 
    } 

Subito dopo questo (e prima del ritorno) aggiungono:

glowsToBeRemoved.push(out); 

Così che cosa stiamo facendo, sta spingendo tutti i bagliori mentre vengono creati in un array.

Ora per eliminarli, devi creare un ciclo con .remove(); sul tuo hover-out.Ecco cosa sarebbe assomigliare:

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

Si può distruggere che in una funzione ed allegarla al passaggio del mouse fuori, o qualsiasi altra cosa si vuole fare con esso.

Hai un bell'aspetto?

Answer 4

Mentre la risposta di Lajarre è sicuramente la strada da percorrere, non esiste attualmente un bug in Raffaello, causando il metodo remove() per rimuovere non solo l'elemento bagliore, ma anche l'elemento a cui è stato applicato il bagliore.

Perché questo è ancora funzionante nel violino di Lajarre è al di là della mia comprensione.

Vedi qui per maggiori dettagli su tale questione: https://github.com/DmitryBaranovskiy/raphael/issues/508

Answer 5

Questo è come mi aggiungere/rimuovere l'effetto bagliore con 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"; 

ho solo aggiungere ".hover" all'elemento Raphael .

Si potrebbe anche fare qualcosa di simile:

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