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/（来自马特的小提琴）

你只需要存储作为元素的“发光”。和拉斐尔一样，元素都有.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函数可以捕获并指出它们。

这就是我想出来的，我实际上现在有一个需要这个功能的项目，来到这里解决它并且发现我看到你的帖子后会想出一些东西。

好的，第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();
}

你可以把它粉碎成一个函数并将它附加到你的悬停，或者你想用它做什么。

看起来不错？

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（或分叉并提交你自己的）。

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

我只是添加＆＃34; .hover＆＃34;拉斐尔元素。

您还可以执行以下操作：

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

如何为Raphael元素添加和删除发光？

5 个答案: