Comment ajouter et enlever de la lueur pour Raphael element?

Je suis en train de mettre en place un hover pour un raphaël élément de sorte que lorsque la souris est sur l'élément, il a une lueur, et lorsque la souris quitte, l'éclat est supprimé. J'ai compris comment faire pour ajouter de l'éclat, mais j'ai de la difficulté à l'enlever. Voici ce que mon script ressemble:

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

Donc la partie qui fonctionne est d'ajouter de l'éclat à la cercle quand j'planer sur elle. Cependant, je ne sais pas comment faire pour supprimer l'éclat lorsque la souris est déplacé en dehors du cercle de l'élément. Savez-vous comment je peux supprimer la lueur d'un élément?

Remarque: L'arrière-plan de l'élément de corps est en noir (n ° 000).

Bibliothèques Utilisées:

  • JQuery
  • Raphael.js

source d'informationauteur jbranchaud | 2011-11-26

  1. 34

    La solution est probablement plus simple que vous ne le pensiez.

    http://jsfiddle.net/vszkW/2/ (fourchette de Matt violon)

    Vous suffit de stock de la "lueur" qui est un élément. Et comme d'habitude dans les Raphaël, les éléments ont une .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();
    });
  2. 3

    Bien, un peu un hack.

    Vous n'allez pas être en mesure de supprimer la lueur facilement parce que le préchauffage est en fait un tableau d'éléments, pour quelque raison que ce soit il n'y a pas un removeGlow encore une fonction qui capture et les ongles.

    Voici ce que j'ai trouvé, en fait, j'ai un projet qui a besoin de cette fonctionnalité, est venu ici pour la réparer, et pensé que j'avais quelque chose une fois que j'ai vu votre post.

    Bien, étape 1:

    Ajouter un tableau vide au-dessus de votre init choses, c'est d'aller pour maintenir votre brille.

    var glowsToBeRemoved = [];

    Étape 2: Aller dans raphael.js et de trouver (dans elproto.l'éclat):

    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)
        }));
    }

    Juste après (et avant le retour) ajouter:

    glowsToBeRemoved.push(out);

    Ce que cela est en train de faire, est de pousser toutes les lueurs, comme ils sont créés dans un tableau.

    Maintenant à les supprimer, vous devez créer une boucle avec .remove(); sur votre hover-outs. Voici à quoi ça ressemble:

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

    Vous pouvez casser que dans une fonction, et la joindre à votre hover, ou ce que vous voulez faire avec elle.

    De bien?

  3. 2

    Tout Lajarre la réponse est certainement le chemin à parcourir, il n'y a actuellement un bug dans Raphaël, provoquant la méthode remove() non seulement de supprimer la lueur de l'élément, mais aussi l'élément dont l'éclat a été appliquée.

    Pourquoi c'est encore à l'œuvre dans Lajarre le violon est au-delà de ma compréhension.

    Voir ici pour plus de détails à propos de ce problème:
    https://github.com/DmitryBaranovskiy/raphael/issues/508

  4. 1

    C'est un comportement bizarre. Par exemple (je jouait avec ce pour quelques minutes):

    http://jsfiddle.net/FPE6y/

    Autant que je peux dire, ce ne devrait pas se produire. Probablement un bug. RaphaelJS historiquement semble avoir des problèmes avec l'onu-faire les choses: Comment voulez-vous faire un élément undragable de Raphaël?

    Désolé, je ne peux pas présenter une solution, sauf que peut-être le cercle est effacé et remplacé immédiatement par un nouveau qui n'a jamais eu une lueur d'application?

    Pendant ce temps, rapport sur le comportement à GitHub si elle n'est pas déjà là. Vous pouvez référencer mon jsFiddle dans le rapport, si vous le souhaitez (ou à la fourchette et déposer votre propre).

  5. 0

    C'est de cette façon-je ajouter /supprimer l'effet d'éclat à l'aide de Raphaël:

    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";

    Je viens d'ajouter ".hover" pour le Raphaël élément.

    Vous pouvez aussi faire quelque chose comme:

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