很高兴能够提供一个三层对象,因为你可以自己选择背景层的颜色。前层与背景层相同,但不透明度为零,这样你就可以看到中间层上的文本。
我也不喜欢使用节点来处理事件,而是使用Raphael本地可用的事件处理机制。
下面的示例取自我的网站上的一个示例,我已经将其缩小,以便更容易理解。
还请注意,这是一个由前后两个圆形层和夹在两个层之间的文本组成的按钮。它们也可以很容易地变成矩形/圆角矩形。
功能包括鼠标悬停/移出时颜色反转...
button = function (paper, xpos, ypos, r, labeltext)
{
this.backLayer = paper.circle(xpos, ypos, r).attr({ fill: "#FFFF00", 'fill-opacity': 0 , stroke: "#FF0000",'stroke-width':5, 'stroke-opacity':0});
this.label = paper.text(xpos, ypos, labeltext).attr({fill:'#ff0000', 'font-size':18});
this.frontLayer = this.backLayer.clone();
this.backLayer.attr({'fill-opacity': 1, 'stroke-opacity':1});
this.frontLayer.backLayer= this.backLayer;
this.frontLayer.label = this.label;
this.frontLayer.node.style.cursor = 'pointer';
this.frontLayer.mouseover(
function (e) {
this.backLayer.animate({ fill: "#FF0000", stroke: "#FFFF00" }, 1000);
this.label.animate({ fill: "#FFFF00" }, 1000);
}
);
this.frontLayer.mouseout(
function (e) {
this.backLayer.animate({ fill: "#FFFF00", stroke: "#FF0000" }, 1000);
this.label.animate({ fill: "#FF0000" }, 1000);
}
);
this.frontLayer.click(
function (e) {
alert("Creating loads of custom buttons is easy\n\nYou made this one with the following specification:\n"+
"Button Text : "+this.label.attr("text")+"\n"+
"Button Centre @ X: "+this.backLayer.attr("cx")+"\n"+
"Button Centre @ Y: "+this.backLayer.attr("cy")+"\n"+
"Button Radius : "+this.backLayer.attr("r"));
}
);
}
rappyButton = new button(paper, 250, 200, 75, "Raphael");
希望这有所帮助。