如何为拉斐尔元素添加和移除发光？

Question

我正在尝试为 raphael 元素设置悬停，这样当鼠标在元素上时，它会发光，当鼠标离开时，会移除发光。我已经想出了如何添加发光，但我无法删除它。这是我的脚本的样子：

$(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
• Raphael.js

Answer 1

解决方案可能比您想象的要简单。

http://jsfiddle.net/vszkW/2/（来自马特小提琴的叉子）

您只需要储存作为元素的“发光”。和 Raphael 中的往常一样，元素有一个 .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

好吧，有点小题大做。

您将无法轻松移除辉光，因为辉光实际上是一个元素数组，无论出于何种原因，目前还没有一个 removeGlow 函数可以捕获并锁定它们。

这就是我想出的，实际上我现在有一个项目需要这个功能，来到这里修复它，并认为一旦我看到你的帖子，我就会想出一些东西。

好的，第一步：

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

您可以将其粉碎成一个函数并将其附加到悬停或任何您想用它做的事情上。

好看吗？

Answer 3

虽然 Lajarre 的答案肯定是要走的路，但 Raphael 目前存在一个错误，导致 remove() 方法不仅删除了发光元素，还删除了应用了发光的元素。

我无法理解为什么这仍然在 Lajarre 的小提琴中起作用。

有关该问题的更多详细信息，请参见此处： https://github.com/DmitryBaranovskiy/raphael/issues/508

Answer 4

这是一种奇怪的行为。例如（我摆弄了好几分钟）：

http://jsfiddle.net/FPE6y/

据我所知，这不应该发生。可能是一个错误。 RaphaelJS 从历史上看似乎有不做事情的问题：How do you make an element undragable in Raphael?

抱歉，我无法提供解决方案，只是可能会删除圆圈并立即用一个从未应用过发光的新圆圈替换？

同时，report the behavior at GitHub 如果它不存在的话。如果你愿意，你可以在报告中引用我的 jsFiddle（或者 fork 并提交你自己的）。

Answer 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”添加到 Raphael 元素。

你也可以这样做：

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