raphael.js 給元素 hover 添加glow() 外發光

 用raphael.js 給 svg畫布裏面添加個元素，嗯就圓好了，男人通常都喜歡圓形的東西，好比xx ,  xxx , 還有xxx

 

$(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??
    });
});

　　

raphael.js 官網的文檔是在是羞澀難懂，它的文檔裏面對glow()的用法以下：

 Element.glow([glow])⚓➭

Return set of elements that create glow-like effect around given element. See Paper.set.

Note: Glow is not connected to the element. If you change element attributes it won’t adjust itself.

Parameters
glowobject
parameters object with all properties optional:
{
widthnumber //size of the glow, default is 10
fillboolean //will it be filled, default is false
opacitynumber //opacity, default is 0.5
offsetxnumber //horizontal offset, default is 0
offsetynumber //vertical offset, default is 0
colorstring //glow colour, default is black
}
Returns:objectPaper.set of elements that represents glow

　　

 嗯，我也依然仍是不曉得要怎麼在mouseout的時候如何把這個glow()的效果給remove掉。

 

 後偶然發現一個奇葩的解決方案。

function init(){
// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);

// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");

circle.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();
});
}

　　

 -----------------------------------------節操分界線---------------------------------------------------------------

 

mouseover --> this.g = this.glow({color: "#FFF", width: 100});

mouseout  --> this.g.remove();

妹的，太奇葩了有麼有！看文檔的人誰能想到是這麼用的我陪睡啊。

竟然你會發下this.g　的這個g，竟然是任意的，只要不是"glow" 把原本的glow給覆蓋了就能夠，你甚至能夠

mouseover --> this.xxoo = this.glow({color: "#FFF", width: 100});

mouseout  --> this.xxoo.remove();

　　

這個，太沒節操了！