Vectorial text for Canvas

examples/arc/src/main.rs

@@ -76,6 +76,7 @@ impl<Message> canvas::Program<Message> for Arc {
         &self,
         _state: &Self::State,
         theme: &Theme,
+        _text_cache: &canvas::text::Cache,
         bounds: Rectangle,
         _cursor: Cursor,
     ) -> Vec<Geometry> {

examples/bezier_tool/src/main.rs

@@ -153,6 +153,7 @@ mod bezier {
             &self,
             state: &Self::State,
             _theme: &Theme,
+            _text_cache: &canvas::text::Cache,
             bounds: Rectangle,
             cursor: Cursor,
         ) -> Vec<Geometry> {

examples/clock/src/main.rs

@@ -90,6 +90,7 @@ impl<Message> canvas::Program<Message> for Clock {
         &self,
         _state: &Self::State,
         _theme: &Theme,
+        _text_cache: &canvas::text::Cache,
         bounds: Rectangle,
         _cursor: Cursor,
     ) -> Vec<Geometry> {

examples/color_palette/src/main.rs

@@ -148,7 +148,7 @@ impl Theme {
             .into()
     }
 
-    fn draw(&self, frame: &mut Frame) {
+    fn draw(&self, text_cache: &canvas::text::Cache, frame: &mut Frame) {
         let pad = 20.0;
 
         let box_size = Size {
@@ -197,14 +197,17 @@ impl Theme {
                 });
             }
 
-            frame.fill_text(canvas::Text {
-                content: color_hex_string(&color),
-                position: Point {
-                    x: anchor.x + box_size.width / 2.0,
-                    y: box_size.height,
+            frame.fill_text(
+                text_cache,
+                canvas::Text {
+                    content: color_hex_string(&color),
+                    position: Point {
+                        x: anchor.x + box_size.width / 2.0,
+                        y: box_size.height,
+                    },
+                    ..text
                 },
-                ..text
-            });
+            );
         }
 
         text.vertical_alignment = alignment::Vertical::Bottom;
@@ -225,14 +228,17 @@ impl Theme {
 
             frame.fill_rectangle(anchor, box_size, color);
 
-            frame.fill_text(canvas::Text {
-                content: color_hex_string(&color),
-                position: Point {
-                    x: anchor.x + box_size.width / 2.0,
-                    y: box_size.height + 2.0 * pad,
+            frame.fill_text(
+                text_cache,
+                canvas::Text {
+                    content: color_hex_string(&color),
+                    position: Point {
+                        x: anchor.x + box_size.width / 2.0,
+                        y: box_size.height + 2.0 * pad,
+                    },
+                    ..text
                 },
-                ..text
-            });
+            );
         }
     }
 }
@@ -244,11 +250,12 @@ impl<Message> canvas::Program<Message> for Theme {
         &self,
         _state: &Self::State,
         _theme: &iced::Theme,
+        text_cache: &canvas::text::Cache,
         bounds: Rectangle,
         _cursor: Cursor,
     ) -> Vec<Geometry> {
         let theme = self.canvas_cache.draw(bounds.size(), |frame| {
-            self.draw(frame);
+            self.draw(text_cache, frame);
         });
 
         vec![theme]

examples/game_of_life/src/main.rs

@@ -207,9 +207,8 @@ mod grid {
     use iced::touch;
     use iced::widget::canvas;
     use iced::widget::canvas::event::{self, Event};
-    use iced::widget::canvas::{
-        Cache, Canvas, Cursor, Frame, Geometry, Path, Text,
-    };
+    use iced::widget::canvas::text::{self, Text};
+    use iced::widget::canvas::{Cache, Canvas, Cursor, Frame, Geometry, Path};
     use iced::{
         alignment, mouse, Color, Element, Length, Point, Rectangle, Size,
         Theme, Vector,
@@ -537,6 +536,7 @@ mod grid {
             &self,
             _interaction: &Interaction,
             _theme: &Theme,
+            text_cache: &text::Cache,
             bounds: Rectangle,
             cursor: Cursor,
         ) -> Vec<Geometry> {
@@ -593,32 +593,38 @@ mod grid {
                 let text = Text {
                     color: Color::WHITE,
                     size: 14.0,
-                    position: Point::new(frame.width(), frame.height()),
+                    position: Point::new(frame.width(), frame.height() - 4.0),
                     horizontal_alignment: alignment::Horizontal::Right,
                     vertical_alignment: alignment::Vertical::Bottom,
                     ..Text::default()
                 };
 
                 if let Some(cell) = hovered_cell {
-                    frame.fill_text(Text {
-                        content: format!("({}, {})", cell.j, cell.i),
-                        position: text.position - Vector::new(0.0, 16.0),
-                        ..text
-                    });
+                    frame.fill_text(
+                        text_cache,
+                        Text {
+                            content: format!("({}, {})", cell.j, cell.i),
+                            position: text.position - Vector::new(0.0, 20.0),
+                            ..text
+                        },
+                    );
                 }
 
                 let cell_count = self.state.cell_count();
 
-                frame.fill_text(Text {
-                    content: format!(
-                        "{} cell{} @ {:?} ({})",
-                        cell_count,
-                        if cell_count == 1 { "" } else { "s" },
-                        self.last_tick_duration,
-                        self.last_queued_ticks
-                    ),
-                    ..text
-                });
+                frame.fill_text(
+                    text_cache,
+                    Text {
+                        content: format!(
+                            "{} cell{} @ {:?} ({})",
+                            cell_count,
+                            if cell_count == 1 { "" } else { "s" },
+                            self.last_tick_duration,
+                            self.last_queued_ticks
+                        ),
+                        ..text
+                    },
+                );
 
                 frame.into_geometry()
             };

examples/modern_art/src/main.rs

@@ -62,6 +62,7 @@ impl<Message> canvas::Program<Message> for ModernArt {
         &self,
         _state: &Self::State,
         _theme: &Theme,
+        _text_cache: &canvas::text::Cache,
         bounds: Rectangle,
         _cursor: Cursor,
     ) -> Vec<Geometry> {

examples/multitouch/src/main.rs

@@ -126,6 +126,7 @@ impl canvas::Program<Message> for State {
         &self,
         _state: &Self::State,
         _theme: &Theme,
+        _text_cache: &canvas::text::Cache,
         bounds: Rectangle,
         _cursor: Cursor,
     ) -> Vec<Geometry> {

examples/sierpinski_triangle/src/main.rs

@@ -135,6 +135,7 @@ impl canvas::Program<Message> for SierpinskiGraph {
         &self,
         _state: &Self::State,
         _theme: &Theme,
+        _text_cache: &canvas::text::Cache,
         bounds: Rectangle,
         _cursor: canvas::Cursor,
     ) -> Vec<canvas::Geometry> {

examples/solar_system/src/main.rs

@@ -13,6 +13,7 @@ use iced::time;
 use iced::widget::canvas;
 use iced::widget::canvas::gradient::{self, Gradient};
 use iced::widget::canvas::stroke::{self, Stroke};
+use iced::widget::canvas::text;
 use iced::widget::canvas::{Cursor, Path};
 use iced::window;
 use iced::{
@@ -158,6 +159,7 @@ impl<Message> canvas::Program<Message> for State {
         &self,
         _state: &Self::State,
         _theme: &Theme,
+        _text_cache: &text::Cache,
         bounds: Rectangle,
         _cursor: Cursor,
     ) -> Vec<canvas::Geometry> {

examples/vectorial_text/Cargo.toml

@@ -0,0 +1,9 @@
+[package]
+name = "vectorial_text"
+version = "0.1.0"
+authors = ["Héctor Ramón Jiménez <hector0193@gmail.com>"]
+edition = "2021"
+publish = false
+
+[dependencies]
+iced = { path = "../..", features = ["canvas", "debug"] }

examples/vectorial_text/src/main.rs

@@ -0,0 +1,172 @@
+use iced::alignment::{self, Alignment};
+use iced::widget::canvas::{Cursor, Frame, Text};
+use iced::widget::{
+    canvas, checkbox, column, horizontal_space, row, slider, text,
+};
+use iced::{
+    Color, Element, Font, Length, Point, Rectangle, Sandbox, Settings, Theme,
+    Vector,
+};
+
+pub fn main() -> iced::Result {
+    VectorialText::run(Settings {
+        antialiasing: true,
+        ..Settings::default()
+    })
+}
+
+struct VectorialText {
+    state: State,
+}
+
+#[derive(Debug, Clone, Copy)]
+enum Message {
+    SizeChanged(f32),
+    AngleChanged(f32),
+    ScaleChanged(f32),
+    ToggleJapanese(bool),
+}
+
+impl Sandbox for VectorialText {
+    type Message = Message;
+
+    fn new() -> Self {
+        Self {
+            state: State::new(),
+        }
+    }
+
+    fn title(&self) -> String {
+        String::from("Vectorial Text - Iced")
+    }
+
+    fn update(&mut self, message: Message) {
+        match message {
+            Message::SizeChanged(size) => {
+                self.state.size = size;
+            }
+            Message::AngleChanged(angle) => {
+                self.state.angle = angle;
+            }
+            Message::ScaleChanged(scale) => {
+                self.state.scale = scale;
+            }
+            Message::ToggleJapanese(use_japanese) => {
+                self.state.use_japanese = use_japanese;
+            }
+        }
+    }
+
+    fn view(&self) -> Element<Message> {
+        let slider_with_label = |label, range, value, message: fn(f32) -> _| {
+            column![
+                row![
+                    text(label),
+                    horizontal_space(Length::Fill),
+                    text(format!("{:.2}", value))
+                ],
+                slider(range, value, message).step(0.01)
+            ]
+            .width(Length::Fill)
+            .spacing(2)
+        };
+
+        column![
+            canvas(&self.state).width(Length::Fill).height(Length::Fill),
+            column![
+                checkbox(
+                    "Use Japanese",
+                    self.state.use_japanese,
+                    Message::ToggleJapanese
+                ),
+                row![
+                    slider_with_label(
+                        "Size",
+                        2.0..=80.0,
+                        self.state.size,
+                        Message::SizeChanged,
+                    ),
+                    slider_with_label(
+                        "Angle",
+                        0.0..=360.0,
+                        self.state.angle,
+                        Message::AngleChanged,
+                    ),
+                    slider_with_label(
+                        "Scale",
+                        1.0..=20.0,
+                        self.state.scale,
+                        Message::ScaleChanged,
+                    ),
+                ]
+                .spacing(20),
+            ]
+            .align_items(Alignment::Center)
+            .spacing(10)
+        ]
+        .spacing(10)
+        .padding(20)
+        .into()
+    }
+
+    fn theme(&self) -> Theme {
+        Theme::Dark
+    }
+}
+
+struct State {
+    size: f32,
+    angle: f32,
+    scale: f32,
+    use_japanese: bool,
+}
+
+impl State {
+    pub fn new() -> Self {
+        Self {
+            size: 40.0,
+            angle: 0.0,
+            scale: 1.0,
+            use_japanese: false,
+        }
+    }
+}
+
+impl<Message> canvas::Program<Message> for State {
+    type State = ();
+
+    fn draw(
+        &self,
+        _state: &Self::State,
+        _theme: &Theme,
+        text_cache: &canvas::text::Cache,
+        bounds: Rectangle,
+        _cursor: Cursor,
+    ) -> Vec<canvas::Geometry> {
+        let mut frame = Frame::new(bounds.size());
+        let center = bounds.center();
+
+        frame.translate(Vector::new(center.x, center.y));
+        frame.scale(self.scale);
+        frame.rotate(self.angle * std::f32::consts::PI / 180.0);
+
+        frame.fill_text(
+            text_cache,
+            Text {
+                position: Point::new(0.0, self.size),
+                color: Color::WHITE,
+                font: Font::Default,
+                size: self.size,
+                content: String::from(if self.use_japanese {
+                    "ベクトルテキスト🎉"
+                } else {
+                    "Vectorial Text! 🎉"
+                }),
+                horizontal_alignment: alignment::Horizontal::Center,
+                vertical_alignment: alignment::Vertical::Center,
+            },
+        );
+
+        vec![frame.into_geometry()]
+    }
+}