clock.fx

JavaFX的一个演示程序

/*
 * Clock.fx
 *
 * Created on Nov 13, 2008, 2:24:58 PM
 */

package myclockproject;

import java.util.Date;
import java.lang.Math;
import javafx.scene.CustomNode;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.paint.Color;
import javafx.scene.shape.ArcTo;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Line;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.scene.transform.Rotate;
import javafx.scene.transform.Translate;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;

/**
 * @author cindycastillo
 */


public class Clock extends CustomNode {

    public var radius: Number = 77;
    public var centerX: Number = 144;
    public var centerY: Number = 144;

    public var hours:Number;
    public var minutes:Number;
    public var seconds:Number;

    public function nextTick () {
        var now = new Date();
        seconds = now.getSeconds();
        minutes = now.getMinutes();
        hours = now.getHours();
    }

    public override function create() : Node {
        return Group {
            content: [
                ImageView {
                    image: Image {
                        url: "{__DIR__}clock_background.png"
                    }
                },
                Group {
                    transforms: Translate {
                        x: centerX,
                        y: centerY
                    }
                    content: [
                        // code to display the numbers for every third hour
                        for (i in [3, 6, 9, 12])
                        Text {
                            transforms: Translate {
                                x: -5,
                                y: 5
                            }
                            font: Font {
                                size: 16
                            }
                            x: radius * (( i + 0 ) mod 2 * ( 2 - i / 3))
                            y: radius * (( i + 1 ) mod 2 * ( 3 - i / 3))
                            content: "{i}"
                        },  //Text


                        //code to display a black circle for the rest of the hours on the clock
                        for (i in [1..12])
                        if (i mod 3 != 0 ) then Circle {
                            transforms: Rotate {
                                angle: 30 * i
                            }
                            centerX: radius
                            radius: 3
                            fill: Color.BLACK
                        } //for
                        else [ ],

                        // code for the clock's first center circle
                        Circle {
                            radius: 5
                            fill: Color.DARKRED
                        }, //Circle
                        //code for the smaller center circle
                        Circle {
                            radius: 3
                            fill: Color.RED
                        }, //Circle
                        //code for the seconds hand
                        Line {
                            transforms: Rotate {
                                angle: bind seconds * 6
                            }
                            endY: -radius - 3
                            strokeWidth: 2
                            stroke: Color.RED
                        },  //Line
                        //code for the hour hand
                        Path {
                            transforms: Rotate {
                                angle: bind (hours + minutes / 60) * 30 - 90
                            }
                            fill: Color.BLACK
                            elements: [
                                MoveTo {
                                    x: 4,
                                y: 4},
                                ArcTo {
                                    x: 4
                                    y: -4
                                    radiusX: 1
                                radiusY: 1},
                                LineTo{
                                    x: radius - 15
                                y: 0},
                            ] //elements
                        },  // Path
                        // code for the minutes hand
                        Path {
                            transforms: Rotate {
                                angle: bind minutes * 6 - 90
                            }
                            fill: Color.BLACK
                            elements: [
                                MoveTo {
                                    x: 4,
                                y: 4},
                                ArcTo {
                                    x: 4
                                    y: -4
                                    radiusX: 1
                                radiusY: 1},
                                LineTo{
                                    x: radius
                                y: 0},
                            ] // elements
                        } // Path
                    ] //content
                }
            ]
        };
    }

    init {
        var timeline = Timeline {
            repeatCount: Timeline.INDEFINITE
            keyFrames: [
                KeyFrame {
                    time: 1s
                    canSkip: true
                    action: function() {
                        nextTick();
                    }
                }
            ]
        }
        timeline.play();
    }
}