12

我正在尝试为 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
  • 拉斐尔.js
4

5 回答 5

36

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

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();
    });
于 2011-12-08T16:17:25.740 回答
3

好吧，有点hack。

您将无法轻松移除辉光，因为辉光实际上是一个元素数组，无论出于何种原因，还没有一个 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();
}

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

看起来不错？

于 2011-11-28T01:28:43.187 回答
2

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

为什么这仍然在 Lajarre 的小提琴中起作用，这超出了我的理解。

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

于 2012-08-17T09:12:10.537 回答
1

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

http://jsfiddle.net/FPE6y/

据我所知，这不应该发生。可能是一个错误。RaphaelJS 在历史上似乎存在不做事情的问题：如何在 Raphael 中使元素不可拖动？

抱歉，我无法提出解决方案，除非圆圈被擦除并立即用一个从未应用过发光的新圆圈替换？

同时，在 GitHub 上报告该行为（如果还没有的话）。如果你愿意，你可以在报告中引用我的 jsFiddle（或者 fork 并提交你自己的）。

于 2011-11-26T05:46:09.660 回答
1

这就是我使用 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();                       
            });
于 2015-03-02T18:33:51.247 回答