Canvas widget for 2D graphics

Cargo.toml

@@ -16,6 +16,8 @@ categories = ["gui"]
 image = ["iced_wgpu/image"]
 # Enables the `Svg` widget
 svg = ["iced_wgpu/svg"]
+# Enables the `Canvas` widget
+canvas = ["iced_wgpu/canvas"]
 # Enables a debug view in native platforms (press F12)
 debug = ["iced_winit/debug"]
 # Enables `tokio` as the `executor::Default` on native platforms
@@ -36,13 +38,15 @@ members = [
     "wgpu",
     "winit",
     "examples/bezier_tool",
+    "examples/clock",
     "examples/counter",
     "examples/custom_widget",
     "examples/events",
     "examples/geometry",
     "examples/integration",
     "examples/pokedex",
     "examples/progress_bar",
+    "examples/solar_system",
     "examples/stopwatch",
     "examples/styling",
     "examples/svg",

core/src/color.rs

@@ -44,11 +44,18 @@ impl Color {
     ///
     /// [`Color`]: struct.Color.html
     pub fn from_rgb8(r: u8, g: u8, b: u8) -> Color {
+        Color::from_rgba8(r, g, b, 1.0)
+    }
+
+    /// Creates a [`Color`] from its RGB8 components and an alpha value.
+    ///
+    /// [`Color`]: struct.Color.html
+    pub fn from_rgba8(r: u8, g: u8, b: u8, a: f32) -> Color {
         Color {
             r: f32::from(r) / 255.0,
             g: f32::from(g) / 255.0,
             b: f32::from(b) / 255.0,
-            a: 1.0,
+            a,
         }
     }
 

core/src/lib.rs

@@ -22,6 +22,7 @@ mod font;
 mod length;
 mod point;
 mod rectangle;
+mod size;
 mod vector;
 
 pub use align::{Align, HorizontalAlignment, VerticalAlignment};
@@ -31,4 +32,5 @@ pub use font::Font;
 pub use length::Length;
 pub use point::Point;
 pub use rectangle::Rectangle;
+pub use size::Size;
 pub use vector::Vector;

core/src/point.rs

@@ -11,10 +11,15 @@ pub struct Point {
 }
 
 impl Point {
+    /// The origin (i.e. a [`Point`] with both X=0 and Y=0).
+    ///
+    /// [`Point`]: struct.Point.html
+    pub const ORIGIN: Point = Point::new(0.0, 0.0);
+
     /// Creates a new [`Point`] with the given coordinates.
     ///
     /// [`Point`]: struct.Point.html
-    pub fn new(x: f32, y: f32) -> Self {
+    pub const fn new(x: f32, y: f32) -> Self {
         Self { x, y }
     }
 }

examples/bezier_tool/src/main.rs

@@ -94,15 +94,15 @@ mod bezier {
             layout: Layout<'_>,
             cursor_position: Point,
         ) -> (Primitive, MouseCursor) {
-            let mut buffer: VertexBuffers<Vertex2D, u16> = VertexBuffers::new();
+            let mut buffer: VertexBuffers<Vertex2D, u32> = VertexBuffers::new();
             let mut path_builder = lyon::path::Path::builder();
 
             let bounds = layout.bounds();
 
             // Draw rectangle border with lyon.
             basic_shapes::stroke_rectangle(
                 &lyon::math::Rect::new(
-                    lyon::math::Point::new(bounds.x + 0.5, bounds.y + 0.5),
+                    lyon::math::Point::new(0.5, 0.5),
                     lyon::math::Size::new(
                         bounds.width - 1.0,
                         bounds.height - 1.0,
@@ -121,48 +121,35 @@ mod bezier {
 
             for curve in self.curves {
                 path_builder.move_to(lyon::math::Point::new(
-                    curve.from.x + bounds.x,
-                    curve.from.y + bounds.y,
+                    curve.from.x,
+                    curve.from.y,
                 ));
 
                 path_builder.quadratic_bezier_to(
-                    lyon::math::Point::new(
-                        curve.control.x + bounds.x,
-                        curve.control.y + bounds.y,
-                    ),
-                    lyon::math::Point::new(
-                        curve.to.x + bounds.x,
-                        curve.to.y + bounds.y,
-                    ),
+                    lyon::math::Point::new(curve.control.x, curve.control.y),
+                    lyon::math::Point::new(curve.to.x, curve.to.y),
                 );
             }
 
             match self.state.pending {
                 None => {}
                 Some(Pending::One { from }) => {
-                    path_builder.move_to(lyon::math::Point::new(
-                        from.x + bounds.x,
-                        from.y + bounds.y,
-                    ));
+                    path_builder
+                        .move_to(lyon::math::Point::new(from.x, from.y));
                     path_builder.line_to(lyon::math::Point::new(
-                        cursor_position.x,
-                        cursor_position.y,
+                        cursor_position.x - bounds.x,
+                        cursor_position.y - bounds.y,
                     ));
                 }
                 Some(Pending::Two { from, to }) => {
-                    path_builder.move_to(lyon::math::Point::new(
-                        from.x + bounds.x,
-                        from.y + bounds.y,
-                    ));
+                    path_builder
+                        .move_to(lyon::math::Point::new(from.x, from.y));
                     path_builder.quadratic_bezier_to(
                         lyon::math::Point::new(
-                            cursor_position.x,
-                            cursor_position.y,
-                        ),
-                        lyon::math::Point::new(
-                            to.x + bounds.x,
-                            to.y + bounds.y,
+                            cursor_position.x - bounds.x,
+                            cursor_position.y - bounds.y,
                         ),
+                        lyon::math::Point::new(to.x, to.y),
                     );
                 }
             }
@@ -186,10 +173,13 @@ mod bezier {
                 )
                 .unwrap();
 
-            let mesh = Primitive::Mesh2D(Arc::new(Mesh2D {
-                vertices: buffer.vertices,
-                indices: buffer.indices,
-            }));
+            let mesh = Primitive::Mesh2D {
+                origin: Point::new(bounds.x, bounds.y),
+                buffers: Arc::new(Mesh2D {
+                    vertices: buffer.vertices,
+                    indices: buffer.indices,
+                }),
+            };
 
             (
                 Primitive::Clip {
@@ -296,7 +286,10 @@ use iced::{
 };
 
 pub fn main() {
-    Example::run(Settings::default())
+    Example::run(Settings {
+        antialiasing: true,
+        ..Settings::default()
+    });
 }
 
 #[derive(Default)]

examples/clock/Cargo.toml

@@ -0,0 +1,15 @@
+[package]
+name = "clock"
+version = "0.1.0"
+authors = ["Héctor Ramón Jiménez <hector0193@gmail.com>"]
+edition = "2018"
+publish = false
+
+[features]
+canvas = []
+
+[dependencies]
+iced = { path = "../..", features = ["canvas", "async-std", "debug"] }
+iced_native = { path = "../../native" }
+chrono = "0.4"
+async-std = { version = "1.0", features = ["unstable"] }

examples/clock/src/main.rs

@@ -0,0 +1,193 @@
+use iced::{
+    canvas, executor, Application, Canvas, Color, Command, Container, Element,
+    Length, Point, Settings, Subscription, Vector,
+};
+
+pub fn main() {
+    Clock::run(Settings {
+        antialiasing: true,
+        ..Settings::default()
+    })
+}
+
+struct Clock {
+    now: LocalTime,
+    clock: canvas::layer::Cache<LocalTime>,
+}
+
+#[derive(Debug, Clone, Copy)]
+enum Message {
+    Tick(chrono::DateTime<chrono::Local>),
+}
+
+impl Application for Clock {
+    type Executor = executor::Default;
+    type Message = Message;
+
+    fn new() -> (Self, Command<Message>) {
+        (
+            Clock {
+                now: chrono::Local::now().into(),
+                clock: canvas::layer::Cache::new(),
+            },
+            Command::none(),
+        )
+    }
+
+    fn title(&self) -> String {
+        String::from("Clock - Iced")
+    }
+
+    fn update(&mut self, message: Message) -> Command<Message> {
+        match message {
+            Message::Tick(local_time) => {
+                let now = local_time.into();
+
+                if now != self.now {
+                    self.now = now;
+                    self.clock.clear();
+                }
+            }
+        }
+
+        Command::none()
+    }
+
+    fn subscription(&self) -> Subscription<Message> {
+        time::every(std::time::Duration::from_millis(500)).map(Message::Tick)
+    }
+
+    fn view(&mut self) -> Element<Message> {
+        let canvas = Canvas::new()
+            .width(Length::Units(400))
+            .height(Length::Units(400))
+            .push(self.clock.with(&self.now));
+
+        Container::new(canvas)
+            .width(Length::Fill)
+            .height(Length::Fill)
+            .center_x()
+            .center_y()
+            .into()
+    }
+}
+
+#[derive(Debug, PartialEq, Eq)]
+struct LocalTime {
+    hour: u32,
+    minute: u32,
+    second: u32,
+}
+
+impl From<chrono::DateTime<chrono::Local>> for LocalTime {
+    fn from(date_time: chrono::DateTime<chrono::Local>) -> LocalTime {
+        use chrono::Timelike;
+
+        LocalTime {
+            hour: date_time.hour(),
+            minute: date_time.minute(),
+            second: date_time.second(),
+        }
+    }
+}
+
+impl canvas::Drawable for LocalTime {
+    fn draw(&self, frame: &mut canvas::Frame) {
+        let center = frame.center();
+        let radius = frame.width().min(frame.height()) / 2.0;
+        let offset = Vector::new(center.x, center.y);
+
+        let clock = canvas::Path::new(|path| path.circle(center, radius));
+
+        frame.fill(
+            &clock,
+            canvas::Fill::Color(Color::from_rgb8(0x12, 0x93, 0xD8)),
+        );
+
+        fn draw_hand(
+            n: u32,
+            total: u32,
+            length: f32,
+            offset: Vector,
+            path: &mut canvas::path::Builder,
+        ) {
+            let turns = n as f32 / total as f32;
+            let t = 2.0 * std::f32::consts::PI * (turns - 0.25);
+
+            let x = length * t.cos();
+            let y = length * t.sin();
+
+            path.line_to(Point::new(x, y) + offset);
+        }
+
+        let hour_and_minute_hands = canvas::Path::new(|path| {
+            path.move_to(center);
+            draw_hand(self.hour, 12, 0.5 * radius, offset, path);
+
+            path.move_to(center);
+            draw_hand(self.minute, 60, 0.8 * radius, offset, path)
+        });
+
+        frame.stroke(
+            &hour_and_minute_hands,
+            canvas::Stroke {
+                width: 6.0,
+                color: Color::WHITE,
+                line_cap: canvas::LineCap::Round,
+                ..canvas::Stroke::default()
+            },
+        );
+
+        let second_hand = canvas::Path::new(|path| {
+            path.move_to(center);
+            draw_hand(self.second, 60, 0.8 * radius, offset, path)
+        });
+
+        frame.stroke(
+            &second_hand,
+            canvas::Stroke {
+                width: 3.0,
+                color: Color::WHITE,
+                line_cap: canvas::LineCap::Round,
+                ..canvas::Stroke::default()
+            },
+        );
+    }
+}
+
+mod time {
+    use iced::futures;
+
+    pub fn every(
+        duration: std::time::Duration,
+    ) -> iced::Subscription<chrono::DateTime<chrono::Local>> {
+        iced::Subscription::from_recipe(Every(duration))
+    }
+
+    struct Every(std::time::Duration);
+
+    impl<H, I> iced_native::subscription::Recipe<H, I> for Every
+    where
+        H: std::hash::Hasher,
+    {
+        type Output = chrono::DateTime<chrono::Local>;
+
+        fn hash(&self, state: &mut H) {
+            use std::hash::Hash;
+
+            std::any::TypeId::of::<Self>().hash(state);
+            self.0.hash(state);
+        }
+
+        fn stream(
+            self: Box<Self>,
+            _input: futures::stream::BoxStream<'static, I>,
+        ) -> futures::stream::BoxStream<'static, Self::Output> {
+            use futures::stream::StreamExt;
+
+            async_std::stream::interval(self.0)
+                .map(|_| chrono::Local::now())
+                .boxed()
+        }
+    }
+}