Merge pull request #281 from hecrj/fix/canvas-text-alignment

Align text in `iced_wgpu` on a case-by-case basis

core/src/rectangle.rs

@@ -17,6 +17,32 @@ pub struct Rectangle<T = f32> {
 }
 
 impl Rectangle<f32> {
+    /// Returns the [`Point`] at the center of the [`Rectangle`].
+    ///
+    /// [`Point`]: struct.Point.html
+    /// [`Rectangle`]: struct.Rectangle.html
+    pub fn center(&self) -> Point {
+        Point::new(self.center_x(), self.center_y())
+    }
+
+    /// Returns the X coordinate of the [`Point`] at the center of the
+    /// [`Rectangle`].
+    ///
+    /// [`Point`]: struct.Point.html
+    /// [`Rectangle`]: struct.Rectangle.html
+    pub fn center_x(&self) -> f32 {
+        self.x + self.width / 2.0
+    }
+
+    /// Returns the Y coordinate of the [`Point`] at the center of the
+    /// [`Rectangle`].
+    ///
+    /// [`Point`]: struct.Point.html
+    /// [`Rectangle`]: struct.Rectangle.html
+    pub fn center_y(&self) -> f32 {
+        self.y + self.height / 2.0
+    }
+
     /// Returns true if the given [`Point`] is contained in the [`Rectangle`].
     ///
     /// [`Point`]: struct.Point.html

examples/bezier_tool/src/main.rs

@@ -12,8 +12,8 @@ mod bezier {
     // implemented by `iced_wgpu` and other renderers.
     use iced_native::{
         input, layout, Clipboard, Color, Element, Event, Font, Hasher,
-        HorizontalAlignment, Layout, Length, MouseCursor, Point, Size, Vector,
+        HorizontalAlignment, Layout, Length, MouseCursor, Point, Rectangle,
-        VerticalAlignment, Widget,
+        Size, Vector, VerticalAlignment, Widget,
     };
     use iced_wgpu::{
         triangle::{Mesh2D, Vertex2D},
@@ -189,7 +189,11 @@ mod bezier {
                             && self.state.pending.is_none()
                         {
                             let instructions = Primitive::Text {
-                                bounds,
+                                bounds: Rectangle {
+                                    x: bounds.center_x(),
+                                    y: bounds.center_y(),
+                                    ..bounds
+                                },
                                 color: Color {
                                     a: defaults.text.color.a * 0.7,
                                     ..defaults.text.color

wgpu/src/renderer.rs

@@ -152,31 +152,14 @@ impl Renderer {
                 horizontal_alignment,
                 vertical_alignment,
             } => {
-                let x = match horizontal_alignment {
-                    iced_native::HorizontalAlignment::Left => bounds.x,
-                    iced_native::HorizontalAlignment::Center => {
-                        bounds.x + bounds.width / 2.0
-                    }
-                    iced_native::HorizontalAlignment::Right => {
-                        bounds.x + bounds.width
-                    }
-                };
-
-                let y = match vertical_alignment {
-                    iced_native::VerticalAlignment::Top => bounds.y,
-                    iced_native::VerticalAlignment::Center => {
-                        bounds.y + bounds.height / 2.0
-                    }
-                    iced_native::VerticalAlignment::Bottom => {
-                        bounds.y + bounds.height
-                    }
-                };
-
                 let layer = layers.last_mut().unwrap();
 
                 layer.text.push(wgpu_glyph::Section {
                     text: &content,
-                    screen_position: (x + translation.x, y + translation.y),
+                    screen_position: (
+                        bounds.x + translation.x,
+                        bounds.y + translation.y,
+                    ),
                     bounds: (bounds.width, bounds.height),
                     scale: wgpu_glyph::Scale { x: *size, y: *size },
                     color: color.into_linear(),

wgpu/src/renderer/widget/checkbox.rs

@@ -38,7 +38,11 @@ impl checkbox::Renderer for Renderer {
                         content: crate::text::CHECKMARK_ICON.to_string(),
                         font: crate::text::BUILTIN_ICONS,
                         size: bounds.height * 0.7,
-                        bounds,
+                        bounds: Rectangle {
+                            x: bounds.center_x(),
+                            y: bounds.center_y(),
+                            ..bounds
+                        },
                         color: style.checkmark_color,
                         horizontal_alignment: HorizontalAlignment::Center,
                         vertical_alignment: VerticalAlignment::Center,

wgpu/src/renderer/widget/text.rs

@@ -31,11 +31,23 @@ impl text::Renderer for Renderer {
         horizontal_alignment: HorizontalAlignment,
         vertical_alignment: VerticalAlignment,
     ) -> Self::Output {
+        let x = match horizontal_alignment {
+            iced_native::HorizontalAlignment::Left => bounds.x,
+            iced_native::HorizontalAlignment::Center => bounds.center_x(),
+            iced_native::HorizontalAlignment::Right => bounds.x + bounds.width,
+        };
+
+        let y = match vertical_alignment {
+            iced_native::VerticalAlignment::Top => bounds.y,
+            iced_native::VerticalAlignment::Center => bounds.center_y(),
+            iced_native::VerticalAlignment::Bottom => bounds.y + bounds.height,
+        };
+
         (
             Primitive::Text {
                 content: content.to_string(),
                 size: f32::from(size),
-                bounds,
+                bounds: Rectangle { x, y, ..bounds },
                 color: color.unwrap_or(defaults.text.color),
                 font,
                 horizontal_alignment,

wgpu/src/renderer/widget/text_input.rs

@@ -109,6 +109,7 @@ impl text_input::Renderer for Renderer {
             },
             font,
             bounds: Rectangle {
+                y: text_bounds.center_y(),
                 width: f32::INFINITY,
                 ..text_bounds
             },