javafx构造一组玻璃状园Button
package javafxapplication14;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
/**
* @author Administrator
*/
function actionPerformed(color:String) :Void {
println(color);
}
Stage {
title: "button"
width: 320
height:200
scene: Scene {
content: [
Rectangle {
x: 0, y: 0
width: 320, height: 200
fill: Color.web("#4f6068")
},
FXButton {
offsetX: 40
offsetY: 50
lightColor: "#fc1503"
darkColor: "#460702"
action: actionPerformed
},
FXButton {
offsetX: 100
offsetY: 50
lightColor: "#657efd"//042dfb"
darkColor: "#02124d"
action: actionPerformed
},
FXButton {
offsetX: 160
offsetY: 50
lightColor: "#27FB04"
darkColor: "#0B4402"
action: actionPerformed
},
FXButton {
offsetX: 220
offsetY: 50
lightColor: "#f4fd02"
darkColor: "#414301"
action: actionPerformed
}
]
}
}
package javafxapplication14;
import javafx.scene.CustomNode;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.effect.GaussianBlur;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.scene.shape.VLineTo;
import javafx.scene.transform.Transform;
import javafx.scene.effect.Glow;
import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.scene.input.MouseEvent;
/**
* @author Administrator
*/
// place your code here
public class FXButton extends CustomNode {
package var offsetX:Number;
package var offsetY:Number;
package var lightColor:String;
package var darkColor:String;
var glowLevel:Number = 0.0;
var glow = Glow { level: bind glowLevel };
package var action: function(:String) : Void;
override function create() : Node {
Group {
translateX: offsetX;
translateY: offsetY;
content:[
Group {
effect: bind glow
content:[
Circle {
effect: GaussianBlur { radius: 10.0 }
centerX: 18, centerY: 18
radius: 18
fill: Color.BLACK
transforms: Transform.translate(-2, -2)
},
Circle {
effect: GaussianBlur { radius: 10.0 }
centerX: 18, centerY: 18
radius: 18
fill: Color.color(1, 1, 1, 0.6)
transforms: Transform.translate(1, 1)
},
Circle {
centerX: 18, centerY: 18
radius: 18
fill:
LinearGradient {
startX : 0.0
startY : 0.0
endX : 0.0
endY : 1.0
stops: [
Stop {
color : Color.web(darkColor)
offset: 0.0
},
Stop {
color : Color.web(lightColor)
offset: 1.0
},
]
}
},
Path {
fill: Color.BLACK
stroke: Color.color(1, 1, 1, 0.4)
elements : [
MoveTo {
x : 0.0, y : 0.0
},
VLineTo {
y : 20
},
LineTo {
x : 16, y : 10
},
LineTo {
x : 0.0, y : 0.0
},
]
transforms: Transform.translate(11, 7)
},
Circle {
effect: GaussianBlur{ radius: 8.0 }
centerX: 18, centerY: 18
radius: 15
fill:
LinearGradient {
startX : 0.0
startY : 0.0
endX : 0.0
endY : 1.0
stops: [
Stop {
color : Color.WHITE
offset: 0.0
},
Stop {
color : Color.TRANSPARENT
offset: 1.0
},
]
}
},
]
onMouseEntered: function( e: MouseEvent ):Void {
fader.rate = 1;
fader.play();
}
onMouseExited: function( e: MouseEvent ):Void {
fader.rate = -1;
fader.play();
}
onMouseReleased: function( e: MouseEvent ):Void {
action("lightColor:{lightColor} darkColor:{darkColor}");
}
}
]
}
}
def fader:Timeline = Timeline {
keyFrames : [
KeyFrame {
time : 200ms
values : [
glowLevel => 0.6 tween Interpolator.LINEAR
]
}
]
};
}