JavaFX实现简易时钟效果(一)

《JavaFX实现简易时钟效果(一)》是一篇针对 JavaFX 初学者的教程。通过这篇文章，您将学会如何使用 JavaFX 的相关类和 API，实现一个简单的时钟效果。

首先，我们需要创建一个 JavaFX 项目。在项目的主界面上创建一个 VBox，用于放置时钟和控制按钮。然后在 VBox 中放置一个 Label 控件，用于显示当前的时间。接着，在应用程序的主类中编写以下代码：

import java.text.SimpleDateFormat;
import java.util.Calendar;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Duration;

public class ClockDemo extends Application {

    private Label label = new Label();
    private Button controlButton = new Button("Start");

    @Override
    public void start(Stage primaryStage) throws Exception {
        VBox box = new VBox();
        box.setSpacing(10);
        box.getChildren().addAll(label, controlButton);
        Scene scene = new Scene(box, 200, 100);
        primaryStage.setScene(scene);
        primaryStage.show();

        Timeline timeline = new Timeline(
            new KeyFrame(Duration.seconds(1), new EventHandler<ActionEvent>() {
                @Override
                public void handle(ActionEvent event) {
                    Calendar calendar = Calendar.getInstance();
                    SimpleDateFormat sdf = new SimpleDateFormat("HH:mm:ss");
                    label.setText(sdf.format(calendar.getTime()));
                }
            })
        );
        timeline.setCycleCount(Timeline.INDEFINITE);

        controlButton.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                if (timeline.getStatus() == Timeline.Status.RUNNING) {
                    timeline.pause();
                    controlButton.setText("Start");
                } else {
                    timeline.play();
                    controlButton.setText("Pause");
                }
            }
        });
    }

    public static void main(String[] args) {
        launch(args);
    }
}

上述代码中，我们定义了一个 VBox，其中包含一个 Label 和一个 Button。Label 用于显示当前时间，Button 用于控制时钟的运行状态。

我们通过创建一个 Timeline 对象，并设置其周期性执行的 KeyFrame，来实现时钟的计时功能。在 KeyFrame 的回调函数中，获取当前的时间并格式化为“HH:mm:ss”的形式，然后将其设置到 Label 控件上。

我们为 Button 设置了一个点击事件的监听器。当用户点击 Button 时，判断 Timeline 的状态，如果正在运行，就暂停 Timeline 并将按钮文本设置为“Start”，否则就启动 Timeline 并将按钮文本设置为“Pause”。

这样，我们就实现了一个简单的时钟效果。用户可以通过按钮控制时钟的启停，时钟的显示格式为“HH:mm:ss”。

下面提供一些示例代码，用于演示时间格式的更改和时钟指针的绘制：

• 修改时间格式为“yyyy-MM-dd HH:mm:ss”

SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

• 绘制时钟指针

import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;

// ...

private Canvas canvas = new Canvas(200, 200);

// ...

GraphicsContext gc = canvas.getGraphicsContext2D();
double canvasWidth = canvas.getWidth();
double canvasHeight = canvas.getHeight();
double centerX = canvasWidth / 2;
double centerY = canvasHeight / 2;
double radius = 80;

for (int i = 0; i < 12; i++) {
    double angle = i * Math.PI / 6;
    double x = centerX + Math.sin(angle) * radius;
    double y = centerY - Math.cos(angle) * radius;
    if (i == 0) {
        gc.fillText("12", x - 5, y + 5);
    } else {
        gc.fillText(Integer.toString(i), x - 2, y + 3);
    }
}

Calendar calendar = Calendar.getInstance();
double second = calendar.get(Calendar.SECOND);
double minute = calendar.get(Calendar.MINUTE);
double hour = calendar.get(Calendar.HOUR) + minute / 60.0;
double hourAngle = (hour * Math.PI / 6) - (Math.PI / 2);
double minuteAngle = (minute * Math.PI / 30) - (Math.PI / 2);
double secondAngle = (second * Math.PI / 30) - (Math.PI / 2);

gc.setStroke(Color.RED);
gc.setLineWidth(1);
gc.strokeLine(centerX, centerY, centerX + Math.sin(hourAngle) * (radius * 0.5), centerY - Math.cos(hourAngle) * (radius * 0.5));

gc.setStroke(Color.BLACK);
gc.setLineWidth(1);
gc.strokeLine(centerX, centerY, centerX + Math.sin(minuteAngle) * (radius * 0.7), centerY - Math.cos(minuteAngle) * (radius * 0.7));

gc.setStroke(Color.GREEN);
gc.setLineWidth(1);
gc.strokeLine(centerX, centerY, centerX + Math.sin(secondAngle) * (radius * 0.9), centerY - Math.cos(secondAngle) * (radius * 0.9));

以上代码中，我们使用 Canvas 组件创建一个可以画图的画布，然后通过 GraphicsContext 组件的 setStroke() 和 setLineWidth() 方法设置时钟指针的颜色和粗细。最后，在画布中绘制时钟指针即可。