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

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

11 голосов
/ 26 ноября 2011

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

$(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).

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

  • 1011 * JQuery *
  • Raphaël.js

Ответы [ 5 ]

34 голосов
/ 08 декабря 2011

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

http://jsfiddle.net/vszkW/2/ (вилка от скрипки Мэтта)

Вы просто должны запасать "свечение", которое является элементом. И как обычно в Рафаэле, элементы имеют .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();
    });
3 голосов
/ 28 ноября 2011

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

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

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

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

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

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

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

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

2 голосов
/ 17 августа 2012

Хотя ответ Лахарре определенно является подходящим, в Raphael в настоящее время существует ошибка, приводящая к тому, что метод remove () удаляет не только элемент свечения, но и элемент, к которому было применено свечение.

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

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

1 голос
/ 26 ноября 2011

Это странное поведение. Например (я возился с этим довольно долго):

http://jsfiddle.net/FPE6y/

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

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

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

0 голосов
/ 02 марта 2015

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

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

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