Как добавить и удалить свечение для элемента Рафаэля?

Я пытаюсь настроить зависание элемента raphael, так что когда мышь находится на элементе, у него есть свечение, и когда мышь уходит, свечение удаляется. Я понял, как добавить свечение, но у меня проблемы с его устранением. Вот как выглядит мой script:

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

Итак, часть, которая работает, добавляет свечение к кругу, когда я навис над ним. Тем не менее, я не знаю, как удалить свечение, когда мышь удаляется от элемента круга. Знаете ли вы, как я могу удалить свечение из элемента?

Примечание. Фон элемента body установлен на черный (# 000).

Используемые библиотеки:

JQuery
Raphaël.js

Ответ 1

Решение, вероятно, более просто, чем вы думали.

http://jsfiddle.net/vszkW/2/ (fork from Matt скрипка)

Вам просто нужно запастись "свечением", который является элементом. Как обычно в Рафаэле, элементы имеют .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

Хорошо, немного взломать.

Вы не сможете легко удалить свечение, потому что свечение на самом деле представляет собой массив элементов, по какой-то причине не существует функции removeGlow, которая захватывает и прибивает их.

Вот что я придумал, у меня на самом деле есть проект прямо сейчас, который нуждался в этой функции, пришел сюда, чтобы исправить это, и решил, что я придумаю что-то, увидев ваш пост.

Хорошо, шаг 1:

Добавьте пустой массив над вашим материалом init, это будет держать ваши свечения.

var glowsToBeRemoved = [];

Шаг 2. Перейдите в raphael.js и найдите (в пределах 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)
        }));
    }

Сразу после этого (и до возвращения) добавьте:

glowsToBeRemoved.push(out);

Итак, что это делает, толкает все свечения, когда они создаются в массив.

Теперь, чтобы удалить их, вы должны создать цикл с .remove(); на ваших зависаниях. Вот как это будет выглядеть:

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

Вы можете разбить это на функцию и прикрепить ее к вашему зависанию или тому, что вы хотите с ней сделать.

Хорошо выглядеть?

Ответ 3

В то время как ответ Lajarre определенно подходит, в настоящее время есть ошибка в Raphael, в результате чего метод remove() не только удаляет элемент свечения, но также и элемент, к которому применяется свечение.

Почему это все еще работает в скрипке Ладжарра, не в моих силах.

Подробнее об этой проблеме см. здесь: https://github.com/DmitryBaranovskiy/raphael/issues/508

Ответ 4

Это странное поведение. Например (я проделал это в течение нескольких минут):

http://jsfiddle.net/FPE6y/

Насколько я могу судить, это не должно происходить. Возможно, ошибка. У RaphaelJS, как представляется, исторически сложилось впечатление, что у него нет проблем: Как сделать элемент неустранимым в Рафаэле?

Извините, я не могу представить решение, за исключением того, что, возможно, круг стирается и сразу заменяется новым, у которого никогда не было эффекта свечения?

Между тем сообщать о поведении в GitHub, если он еще не существует. Вы можете ссылаться на мой jsFiddle в отчете, если хотите (или разблокировать его и отправить самостоятельно).

Ответ 5

Вот как я добавляю/удаляю эффект свечения с помощью 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";

Я просто добавляю ".hover" к элементу Рафаэля.

Вы также можете сделать что-то вроде:

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