raphael.js 给元素 hover 添加glow() 外发光

时间:2023-03-10 04:08:16
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();

  


这个,太没节操了!