Modified clock example to make the clock more readable. Added numbers on the clock face and took the portion of the hour passed into consideration for the hour hand. It now looks like a reasonable clock.

1 files changed, 26 insertions, 2 deletions

diff --git a/examples/clock/src/main.rs b/examples/clock/src/main.rs
index ef3064c7..a7e86ff1 100644
--- a/examples/clock/src/main.rs
+++ b/examples/clock/src/main.rs
@@ -1,4 +1,4 @@
-use iced::alignment;
+use iced::{alignment, Radians};
 use iced::mouse;
 use iced::time;
 use iced::widget::canvas::{stroke, Cache, Geometry, LineCap, Path, Stroke};
@@ -117,9 +117,12 @@ impl<Message> canvas::Program<Message> for Clock {
             };
 
             frame.translate(Vector::new(center.x, center.y));
+            let minutes_portion = Radians::from(hand_rotation(self.now.minute(), 60)) / 12.0;
+            let hour_hand_angle = Radians::from(hand_rotation(self.now.hour(), 12)) + minutes_portion;
+
 
             frame.with_save(|frame| {
-                frame.rotate(hand_rotation(self.now.hour(), 12));
+                frame.rotate(hour_hand_angle);
                 frame.stroke(&short_hand, wide_stroke());
             });
 
@@ -155,10 +158,31 @@ impl<Message> canvas::Program<Message> for Clock {
                     ..canvas::Text::default()
                 });
             });
+
+            // Draw clock numbers
+            for i in 1..=12 {
+                let distance_out = radius * 1.05;
+                let angle =
+                    Radians::from(hand_rotation(i, 12)) - Radians::from(Degrees(90.0));
+                let x = distance_out * angle.0.cos();
+                let y = distance_out * angle.0.sin();
+
+                frame.fill_text(canvas::Text {
+                    content: format!("{}", i),
+                    size: (radius / 15.0).into(),
+                    position: Point::new(x * 0.85, y * 0.85),
+                    color: palette.secondary.strong.text,
+                    horizontal_alignment: alignment::Horizontal::Center,
+                    vertical_alignment: alignment::Vertical::Center,
+                    font: Font::MONOSPACE,
+                    ..canvas::Text::default()
+                });
+            }
         });
 
         vec![clock]
     }
+
 }
 
 fn hand_rotation(n: u32, total: u32) -> Degrees {