How To Draw A Clock

2 Answers 2

Add 3 lines (for hour, minute, second) with different strokes and lengths to your Group.
Place one end of each line in the center of your circle and the other end of each line pointing straight up at 12 o'clock.
Create a timeline which triggers a keyframe each second.
In the keyframe:
- Calculate the degree of rotation for the hands based on the current time.
- Rotate the hands the required amount.
Set the timeline to cycle indefinitely.
Place your Group in a Scene and add the Scene to a Stage.
Play your timeline.

I created a sample app implementing the above principles.

enter image description here

Update

In response to criticism of the coding style used in the sample app, I created a refactored sample app which uses a more functional coding style.

Additionally the jfxtras project has an AnalogueClock control. Here is the gist of how to use the jfxtras clock.

answered May 10 '12 at 21:12

jewelseajewelsea

134k 12 gold badges 341 silver badges 378 bronze badges

any idea how do you add pointy arrow heads to the Line instances ?

Sep 10 '15 at 16:53
bvdb, please ask new questions as new questions

Sep 11 '15 at 5:29

Netbeans 7.1.2 is bundled with sample applications. In JavaFX part there is a StopWatch sample application. Have a look at it, it can give you a great clue.