如何添加和刪除Raphael元素的光暈？

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

這是怪異行爲。例如（我這個騙得不少分）：

http://jsfiddle.net/FPE6y/

據我所知，這不應該發生。可能是一個錯誤。 RaphaelJS歷史上似乎有問題與不作爲的事情：How do you make an element undragable in Raphael?

對不起，我不能提出一個解決方案，除了可能圓被刪除，並立即用一個從未應用輝光新的一個替換？

同時，report the behavior at GitHub如果它已不存在。如果你想要的話，你可以在報告中引用我的jsFiddle（或分叉它並提交你自己的）。

Answer 3

好吧，有點破解。

你不會是能夠很容易地取下點火，因爲輝光實際上是元素的數組，不管出於什麼原因還沒有一個removeGlow功能尚未捕獲和指甲他們。

這就是我想出了，其實我有一個項目，現在是需要這個功能，就來到了這裏來修復它，想我會拿出一些有一次我看到您的帖子。

好吧，步驟1：

上面添加您的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 4

雖然Lajarre的答案肯定是要走的路，目前在拉斐爾的錯誤，導致remove（）方法不僅去除輝光元素，還有發光元素。

爲什麼這仍然在Lajarre的小提琴工作是超出我的理解。

在這裏看到有關該問題的更多細節： https://github.com/DmitryBaranovskiy/raphael/issues/508

Answer 5

這是我如何添加/刪除使用的發光效果拉斐爾：

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」的拉斐爾元素。

你也可以這樣做：

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