2021-05-12 14:32:11
javafx實現時鐘效果
2020-11-15 12:02:20
本文範例為大家分享了javafx實現時鐘效果的具體程式碼,供大家參考,具體內容如下
核心為三個函數:
第一個為 public void dials,繪製錶盤
第二個為 public void scale,繪製刻度,這裡需要注意的是字型旋轉
第三個為 public void point,繪製秒分時針以及列印時間,需要注意的是進位制問題
總的原始碼如下:
package com.wu.demo; import java.time.LocalDateTime; import java.time.format.DateTimeFormatter; import javafx.animation.KeyFrame; import javafx.animation.Timeline; import javafx.application.Application; import javafx.collections.ObservableList; import javafx.scene.Scene; import javafx.scene.canvas.Canvas; import javafx.scene.canvas.GraphicsContext; import javafx.scene.layout.AnchorPane; import javafx.scene.paint.Color; import javafx.scene.paint.Paint; import javafx.scene.text.Font; import javafx.stage.Stage; import javafx.util.Duration; public class view extends Application{ @Override public void start(Stage stage) throws Exception{ AnchorPane root = new AnchorPane(); Canvas canvas = new Canvas(800,650); root.getChildren().add(canvas); Scene scene = new Scene(root,800,650); stage.setScene(scene); stage.setResizable(false); stage.show(); // 獲取畫板物件 GraphicsContext gc = canvas.getGraphicsContext2D(); // 建立時間軸 Timeline timeLine = new Timeline(); // 獲取時間軸的幀列表 ObservableList<KeyFrame> keyFrames = timeLine.getKeyFrames(); // 新增關鍵幀 keyFrames.add(new KeyFrame(Duration.seconds(0.1),e->{ // 重新整理操作 gc.clearRect(0,0,800,650); // 繪製錶盤 dials(gc); // 繪製刻度 scale(gc); // 繪製指標 point(gc); })); // 設定時間軸播放次數為無限 timeLine.setCycleCount(-1); // 播放時間軸 timeLine.play(); } /** * 繪製錶盤 * @param gc */ public void dials(GraphicsContext gc) { // 儲存現場 gc.save(); // 變換座標到外切圓矩形左上角座標 gc.translate(100,25); gc.setLineWidth(8); gc.setStroke(Color.GRAY); gc.strokeOval(0, 0, 600, 600); gc.restore(); } /** * 繪製刻度 * @param gc */ public void scale(GraphicsContext gc) { // 儲存現場 gc.save(); // 變換座標系原點到錶盤中心 gc.translate(400,325); // 座標逆時針旋轉角度-90 gc.rotate(-90); // 設定字型大小 gc.setFont(Font.font(20)); for(int i = 1 ; i < 61 ; i++) { // 每一個刻度角度為6度 gc.rotate(6); if(i % 5 == 0) { gc.save(); // 當前座標切換到 (250,0) 即刻度左邊界位置 gc.translate(250,0); // 設定表格數位位置 相對於桌面應該是豎直 gc.rotate(90-i/5*30); gc.fillText(i/5+"",0,0); gc.restore(); gc.fillRect(275,0,22,10); } else{ gc.fillRect(285,0,12,5); } } // 恢復現場 gc.restore(); } /** * 繪製指標 * @param gc */ public void point(GraphicsContext gc) { LocalDateTime time = LocalDateTime.now(); int seconds = time.getSecond(); int minutes = time.getMinute(); int hours = time.getHour(); double[] pointX1 = new double[]{0,50,270,50}; double[] pointY1 = new double[]{0,5,0,-5}; double[] pointX2 = new double[]{0,30,210,30}; double[] pointY2 = new double[]{0,10,0,-10}; double[] pointX3 = new double[]{0,20,150,20}; double[] pointY3 = new double[]{0,12,0,-12}; gc.save(); // 座標移動至圓心 gc.translate(400, 325); // 時間數位 { String timeText1 = time.format(DateTimeFormatter.ofPattern("yyyy-MM-dd")); gc.setFill(Paint.valueOf("#c0c0c0")); gc.setFont(Font.font(20)); gc.fillText(timeText1,-40,-200); String timeText2 = time.format(DateTimeFormatter.ofPattern("HH:mm:ss")); gc.setFill(Paint.valueOf("#c0c0c0")); gc.setFont(Font.font(115)); gc.fillText(timeText2,-220,30); } // 秒鐘 { gc.save(); gc.rotate(-90); gc.setFill(Color.RED); gc.rotate(seconds*6); // 四邊形秒鐘 gc.fillPolygon(pointX1,pointY1, 4); gc.restore(); } // 分鐘 { gc.save(); gc.rotate(-90); gc.setFill(Color.BLUE); gc.rotate(minutes*6+0.1*seconds); // 四邊形分鐘 gc.fillPolygon(pointX2,pointY2, 4); gc.restore(); } // 時鐘 { gc.save(); gc.rotate(-90); gc.setFill(Color.BLACK); gc.rotate(hours*30+minutes*0.5+seconds*(0.5/60)); // 四邊形時鐘 gc.fillPolygon(pointX3,pointY3, 4); gc.restore(); } // 恢復現場 gc.restore(); } public static void main(String[] args) { launch(args); } }
效果圖:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援it145.com。
相關文章