javascript 如何为 Raphael 元素添加和移除辉光？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8275738/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add and remove glow for Raphael element?
提问by jbranchaud
I am trying to set up a hover for a raphael element so that when the mouse is on the element, it has a glow and when the mouse leaves, the glow is removed. I have figured out how to add the glow, but I am having trouble removing it. Here is what my script looks like:
我正在尝试为 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??
});
});
So the part that works is adding the glow to the circle when I hover over it. However, I don't know how to remove the glow when the mouse is moved away from the circle element. Do you know how I can remove the glow from an element?
因此，当我将鼠标悬停在圆圈上时，起作用的部分是为圆圈添加光晕。但是，当鼠标移离圆形元素时，我不知道如何消除发光。你知道如何去除元素的辉光吗？
Note: The background of the body element is set to black (#000).
注意：body 元素的背景设置为黑色 (#000)。
Libraries Used:
使用的库：
- JQuery
- Raphael.js
- 查询
- 拉斐尔.js
回答by lajarre
The solution is probably more simple than you were thinking.
解决方案可能比您想象的更简单。
http://jsfiddle.net/vszkW/2/(fork from Matt's fiddle)
http://jsfiddle.net/vszkW/2/（来自马特的小提琴）
You just have to stock the "glow" which is an element. And as usual in Raphael, the elements have a .remove():
你只需要储存作为一个元素的“发光”。和通常在 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();
});
回答by gregdizzia
Alright, a bit of a hack.
好吧，有点黑客。
You're not going to be able to remove the glow easily because the glow is actually an array of elements, for whatever reason there isn't a removeGlow function yet that captures and nails them.
您将无法轻松去除辉光，因为辉光实际上是一组元素，无论出于何种原因，还没有 removeGlow 函数来捕获和钉住它们。
Here's what I came up with, I actually have a project right now that needed this functionality, came on here to fix it and figured I'd come up with something once I saw your post.
这就是我的想法，我现在实际上有一个项目需要这个功能，来到这里修复它，并认为一旦我看到你的帖子我就会想出一些东西。
Alright, step 1:
好的，第一步：
Add an empty array above your init stuff, this is going to hold your glows.
在你的 init 内容上方添加一个空数组，这将保持你的光芒。
var glowsToBeRemoved = [];
变量发光ToBeRemoved = [];
Step 2: Go into raphael.js and find (within elproto.glow):
第 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)
}));
}
Right after this (and before the return) add:
在此之后（并在返回之前）添加：
glowsToBeRemoved.push(out);
So what this is doing, is pushing all of the glows as they're created into an array.
因此，这样做的目的是将创建的所有发光推入一个阵列中。
Now to delete them, you'd create a loop with .remove(); on your hover-outs. Here's what it'd look like:
现在要删除它们，您需要使用 .remove(); 创建一个循环；在你的悬停。这是它的样子：
var i = 0;
var size=glowsToBeRemoved.length;
for(i=0; i < size; i++)
{
glowsToBeRemoved[i].remove();
}
You can smash that into a function and attach it to your hover out, or whatever you want to do with it.
你可以将它粉碎成一个函数并将它附加到你的悬停，或者任何你想用它做的事情。
Look good?
看起来不错？
回答by Sven B.
While Lajarre's answer is definitely the way to go, there is currently a bug in Raphael, causing the remove() method to not only remove the glow element, but also the element to which the glow was applied.
虽然 Lajarre 的答案绝对是要走的路，但目前 Raphael 中存在一个错误，导致 remove() 方法不仅删除发光元素，还删除应用了发光的元素。
Why this is still working in Lajarre's fiddle is beyond my comprehension.
为什么这仍然在 Lajarre 的小提琴中起作用超出了我的理解。
See here for more details about that issue: https://github.com/DmitryBaranovskiy/raphael/issues/508
有关该问题的更多详细信息，请参见此处：https: //github.com/DmitryBaranovskiy/raphael/issues/508
回答by Matt
This is bizarre behavior. For example (I fiddled with this for quite a few minutes):
这是奇怪的行为。例如（我摆弄了好几分钟）：
As far as I can tell, this shouldn't be happening. Possibly a bug. RaphaelJS historically seems to have problems with un-doing things: How do you make an element undragable in Raphael?
据我所知，这不应该发生。可能是一个错误。从历史上看，RaphaelJS 似乎在不做事情方面存在问题：如何使元素在 Raphael 中变得不可拖动？
Sorry I can't present a solution except that perhaps the circle is erased and replaced immediately with a new one which never had a glow applied?
抱歉，我无法提出解决方案，除了可能将圆圈擦除并立即替换为从未应用过发光的新圆圈？
Meanwhile, report the behavior at GitHubif it isn't already there. You can reference my jsFiddle in the report if you want (or fork it and submit your own).
同时，如果它不存在，请在 GitHub 上报告该行为。如果你愿意，你可以在报告中引用我的 jsFiddle（或者 fork 并提交你自己的）。
回答by Katie
This is how I add / remove the glow effect using Raphael:
这是我使用 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";
I just add ".hover" to the Raphael element.
我只是在 Raphael 元素中添加了“.hover”。
You could also do something like:
您还可以执行以下操作：
var c = paper.circle(x, y, r);
c.hover(function() {
this.glowEffect = this.glow({color:"#1693A5", width: 2});
}, function() {
this.glowEffect.remove();
});
