javafx构造一组玻璃状园Button

xhuixuanwen

浏览: 6461 次
性别:
来自: 上海

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (4)

社区版块

存档分类

JavaFX Web 工作

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
                ]

            }
        ]
    };
}