Added support for gradients to respect current frame transform.

examples/modern_art/src/main.rs

@@ -1,12 +1,11 @@
-use rand::{Rng, thread_rng};
+use iced::widget::canvas::{
-use crate::canvas::{Cursor, Geometry};
+    self, fill, Cache, Canvas, Cursor, Fill, Frame, Geometry, Gradient,
-use iced::widget::canvas::{Cache, Fill, Frame, Gradient, fill};
+};
-use iced::widget::{canvas, Canvas};
-use iced::Settings;
 use iced::{
     executor, Application, Color, Command, Element, Length, Point, Rectangle,
-    Renderer, Size, Theme,
+    Renderer, Size, Theme, Settings
 };
+use rand::{thread_rng, Rng};
 
 fn main() -> iced::Result {
     ModernArt::run(Settings {
@@ -41,7 +40,7 @@ impl Application for ModernArt {
         String::from("Modern Art")
     }
 
-    fn update(&mut self, _message: Self::Message) -> Command<Self::Message> {
+    fn update(&mut self, _message: Message) -> Command<Message> {
         Command::none()
     }
 
@@ -94,10 +93,7 @@ fn generate_box(frame: &mut Frame, bounds: Size) -> bool {
 
         let mut i = 0;
         while i <= stops {
-            builder = builder.add_stop(
+            builder = builder.add_stop(i as f32 / stops as f32, random_color());
-                i as f32 / stops as f32,
-                random_color()
-            );
             i += 1;
         }
 
@@ -106,7 +102,7 @@ fn generate_box(frame: &mut Frame, bounds: Size) -> bool {
 
     let top_left = Point::new(
         thread_rng().gen_range(0.0..bounds.width),
-        thread_rng().gen_range(0.0..bounds.height)
+        thread_rng().gen_range(0.0..bounds.height),
     );
 
     let size = Size::new(
@@ -120,8 +116,8 @@ fn generate_box(frame: &mut Frame, bounds: Size) -> bool {
             size,
             Fill {
                 style: fill::Style::Solid(random_color()),
-                .. Default::default()
+                ..Default::default()
-            }
+            },
         );
     } else {
         frame.fill_rectangle(
@@ -130,10 +126,13 @@ fn generate_box(frame: &mut Frame, bounds: Size) -> bool {
             Fill {
                 style: fill::Style::Gradient(&gradient(
                     top_left,
-                    Point::new(top_left.x + size.width, top_left.y + size.height)
+                    Point::new(
+                        top_left.x + size.width,
+                        top_left.y + size.height,
+                    ),
                 )),
-                .. Default::default()
+                ..Default::default()
-            }
+            },
         );
     };
 

examples/solar_system/src/main.rs

@@ -10,14 +10,14 @@ use iced::application;
 use iced::executor;
 use iced::theme::{self, Theme};
 use iced::time;
-use iced::widget::canvas;
+use iced::widget::canvas::{self, stroke, Cursor, Path, Stroke};
-use iced::widget::canvas::{Cursor, Path, Stroke, stroke};
 use iced::window;
 use iced::{
     Application, Color, Command, Element, Length, Point, Rectangle, Settings,
     Size, Subscription, Vector,
 };
 
+use crate::canvas::{fill, Fill, Gradient};
 use std::time::Instant;
 
 pub fn main() -> iced::Result {
@@ -178,7 +178,9 @@ impl<Message> canvas::Program<Message> for State {
             frame.stroke(
                 &orbit,
                 Stroke {
-                    style: stroke::Style::Solid(Color::from_rgba8(0, 153, 255, 0.1)),
+                    style: stroke::Style::Solid(Color::from_rgba8(
+                        0, 153, 255, 0.1,
+                    )),
                     width: 1.0,
                     line_dash: canvas::LineDash {
                         offset: 0,
@@ -198,15 +200,23 @@ impl<Message> canvas::Program<Message> for State {
                 frame.translate(Vector::new(Self::ORBIT_RADIUS, 0.0));
 
                 let earth = Path::circle(Point::ORIGIN, Self::EARTH_RADIUS);
-                let shadow = Path::rectangle(
-                    Point::new(0.0, -Self::EARTH_RADIUS),
-                    Size::new(
-                        Self::EARTH_RADIUS * 4.0,
-                        Self::EARTH_RADIUS * 2.0,
-                    ),
-                );
 
-                frame.fill(&earth, Color::from_rgb8(0x6B, 0x93, 0xD6));
+                let earth_fill = Gradient::linear(
+                    Point::new(-Self::EARTH_RADIUS, 0.0),
+                    Point::new(Self::EARTH_RADIUS, 0.0),
+                )
+                .add_stop(0.2, Color::from_rgb(0.15, 0.50, 1.0))
+                .add_stop(0.8, Color::from_rgb(0.0, 0.20, 0.47))
+                .build()
+                .unwrap();
+
+                frame.fill(
+                    &earth,
+                    Fill {
+                        style: fill::Style::Gradient(&earth_fill),
+                        ..Default::default()
+                    },
+                );
 
                 frame.with_save(|frame| {
                     frame.rotate(rotation * 10.0);
@@ -215,14 +225,6 @@ impl<Message> canvas::Program<Message> for State {
                     let moon = Path::circle(Point::ORIGIN, Self::MOON_RADIUS);
                     frame.fill(&moon, Color::WHITE);
                 });
-
-                frame.fill(
-                    &shadow,
-                    Color {
-                        a: 0.7,
-                        ..Color::BLACK
-                    },
-                );
             });
         });
 

graphics/src/gradient.rs

@@ -1,9 +1,10 @@
 //! For creating a Gradient.
 mod linear;
 
-use iced_native::Color;
 pub use crate::gradient::linear::Linear;
+use crate::widget::canvas::frame::Transform;
 use crate::Point;
+use iced_native::Color;
 
 #[derive(Debug, Clone, PartialEq)]
 /// A fill which transitions colors progressively along a direction, either linearly, radially (TBD),
@@ -28,4 +29,15 @@ impl Gradient {
     pub fn linear(start: Point, end: Point) -> linear::Builder {
         linear::Builder::new(start, end)
     }
+
+    /// Modifies the start & end stops of the gradient to have a proper transform value.
+    pub(crate) fn transform(mut self, transform: &Transform) -> Self {
+        match &mut self {
+            Gradient::Linear(linear) => {
+                linear.start = transform.apply_to(linear.start);
+                linear.end = transform.apply_to(linear.end);
+            }
+        }
+        self
+    }
 }

graphics/src/widget/canvas.rs

@@ -9,12 +9,12 @@ pub mod path;
 
 mod cache;
 mod cursor;
-mod frame;
 mod geometry;
 mod program;
 mod text;
 pub mod fill;
 pub mod stroke;
+pub(crate) mod frame;
 
 pub use cache::Cache;
 pub use cursor::Cursor;

graphics/src/widget/canvas/fill.rs

@@ -3,6 +3,7 @@
 use crate::gradient::Gradient;
 use crate::layer::mesh;
 use iced_native::Color;
+use crate::widget::canvas::frame::Transform;
 
 /// The style used to fill geometry.
 #[derive(Debug, Clone)]
@@ -50,11 +51,16 @@ pub enum Style<'a> {
     Gradient(&'a Gradient),
 }
 
-impl<'a> Into<mesh::Style> for Style<'a> {
+impl<'a> Style<'a> {
-    fn into(self) -> mesh::Style {
+    /// Converts a fill's [Style] to a [mesh::Style] for use in the renderer's shader.
+    pub(crate) fn as_mesh_style(&self, transform: &Transform) -> mesh::Style {
         match self {
-            Style::Solid(color) => mesh::Style::Solid(color),
+            Style::Solid(color) => {
-            Style::Gradient(gradient) => gradient.clone().into(),
+                mesh::Style::Solid(*color)
+            },
+            Style::Gradient(gradient) => {
+                mesh::Style::Gradient((*gradient).clone().transform(transform))
+            }
         }
     }
 }

graphics/src/widget/canvas/frame.rs

@@ -1,3 +1,4 @@
+use lyon::geom::euclid::Vector2D;
 use std::borrow::Cow;
 
 use iced_native::{Point, Rectangle, Size, Vector};
@@ -30,11 +31,22 @@ struct Transforms {
 }
 
 #[derive(Debug, Clone, Copy)]
-struct Transform {
+pub(crate) struct Transform {
     raw: lyon::math::Transform,
     is_identity: bool,
 }
 
+impl Transform {
+    /// Transforms the given [Point] by the transformation matrix.
+    pub(crate) fn apply_to(&self, mut point: Point) -> Point {
+        let transformed =
+            self.raw.transform_vector(Vector2D::new(point.x, point.y));
+        point.x = transformed.x + self.raw.m31;
+        point.y = transformed.y + self.raw.m32;
+        point
+    }
+}
+
 impl Frame {
     /// Creates a new empty [`Frame`] with the given dimensions.
     ///
@@ -111,7 +123,8 @@ impl Frame {
         }
         .expect("Tessellate path.");
 
-        self.buffers.push((buf, style.into()))
+        self.buffers
+            .push((buf, style.as_mesh_style(&self.transforms.current)));
     }
 
     /// Draws an axis-aligned rectangle given its top-left corner coordinate and
@@ -150,7 +163,8 @@ impl Frame {
             )
             .expect("Fill rectangle");
 
-        self.buffers.push((buf, style.into()))
+        self.buffers
+            .push((buf, style.as_mesh_style(&self.transforms.current)));
     }
 
     /// Draws the stroke of the given [`Path`] on the [`Frame`] with the
@@ -192,7 +206,8 @@ impl Frame {
         }
         .expect("Stroke path");
 
-        self.buffers.push((buf, stroke.style.into()))
+        self.buffers
+            .push((buf, stroke.style.as_mesh_style(&self.transforms.current)))
     }
 
     /// Draws the characters of the given [`Text`] on the [`Frame`], filling
@@ -307,7 +322,7 @@ impl Frame {
         self.transforms.current.is_identity = false;
     }
 
-    /// Applies a rotation to the current transform of the [`Frame`].
+    /// Applies a rotation in radians to the current transform of the [`Frame`].
     #[inline]
     pub fn rotate(&mut self, angle: f32) {
         self.transforms.current.raw = self
@@ -354,10 +369,7 @@ impl Frame {
 struct Vertex2DBuilder;
 
 impl tessellation::FillVertexConstructor<Vertex2D> for Vertex2DBuilder {
-    fn new_vertex(
+    fn new_vertex(&mut self, vertex: tessellation::FillVertex<'_>) -> Vertex2D {
-        &mut self,
-        vertex: tessellation::FillVertex<'_>,
-    ) -> Vertex2D {
         let position = vertex.position();
 
         Vertex2D {

graphics/src/widget/canvas/stroke.rs

@@ -3,6 +3,7 @@
 use iced_native::Color;
 use crate::gradient::Gradient;
 use crate::layer::mesh;
+use crate::widget::canvas::frame::Transform;
 
 /// The style of a stroke.
 #[derive(Debug, Clone)]
@@ -68,11 +69,16 @@ pub enum Style<'a> {
     Gradient(&'a Gradient),
 }
 
-impl <'a> Into<mesh::Style> for Style<'a> {
+impl<'a> Style<'a> {
-    fn into(self) -> mesh::Style {
+    /// Converts a fill's [Style] to a [mesh::Style] for use in the renderer's shader.
+    pub(crate) fn as_mesh_style(&self, transform: &Transform) -> mesh::Style {
         match self {
-            Style::Solid(color) => mesh::Style::Solid(color),
+            Style::Solid(color) => {
-            Style::Gradient(gradient) => gradient.clone().into()
+                mesh::Style::Solid(*color)
+            },
+            Style::Gradient(gradient) => {
+                mesh::Style::Gradient((*gradient).clone().transform(transform))
+            }
         }
     }
 }