Merge pull request #2424 from iced-rs/feature/image-opacity

Introduce dynamic `opacity` support for `Image` and `Svg`

core/src/image.rs

@@ -174,5 +174,6 @@ pub trait Renderer: crate::Renderer {
         filter_method: FilterMethod,
         bounds: Rectangle,
         rotation: Radians,
+        opacity: f32,
     );
 }

core/src/renderer/null.rs

@@ -173,6 +173,7 @@ impl image::Renderer for () {
         _filter_method: image::FilterMethod,
         _bounds: Rectangle,
         _rotation: Radians,
+        _opacity: f32,
     ) {
     }
 }
@@ -188,6 +189,7 @@ impl svg::Renderer for () {
         _color: Option<Color>,
         _bounds: Rectangle,
         _rotation: Radians,
+        _opacity: f32,
     ) {
     }
 }

core/src/svg.rs

@@ -101,5 +101,6 @@ pub trait Renderer: crate::Renderer {
         color: Option<Color>,
         bounds: Rectangle,
         rotation: Radians,
+        opacity: f32,
     );
 }

examples/ferris/src/main.rs

@@ -17,6 +17,7 @@ pub fn main() -> iced::Result {
 
 struct Image {
     width: f32,
+    opacity: f32,
     rotation: Rotation,
     content_fit: ContentFit,
     spin: bool,
@@ -26,6 +27,7 @@ struct Image {
 #[derive(Debug, Clone, Copy)]
 enum Message {
     WidthChanged(f32),
+    OpacityChanged(f32),
     RotationStrategyChanged(RotationStrategy),
     RotationChanged(Degrees),
     ContentFitChanged(ContentFit),
@@ -39,6 +41,9 @@ impl Image {
             Message::WidthChanged(width) => {
                 self.width = width;
             }
+            Message::OpacityChanged(opacity) => {
+                self.opacity = opacity;
+            }
             Message::RotationStrategyChanged(strategy) => {
                 self.rotation = match strategy {
                     RotationStrategy::Floating => {
@@ -97,14 +102,15 @@ impl Image {
                 .width(self.width)
                 .content_fit(self.content_fit)
                 .rotation(self.rotation)
+                .opacity(self.opacity)
             )
             .explain(Color::WHITE),
             "I am Ferris!"
         ]
         .spacing(20)
         .align_items(Alignment::Center);
 
-        let sizing = row![
+        let fit = row![
             pick_list(
                 [
                     ContentFit::Contain,
@@ -117,19 +123,6 @@ impl Image {
                 Message::ContentFitChanged
             )
             .width(Length::Fill),
-            column![
-                slider(100.0..=500.0, self.width, Message::WidthChanged),
-                text(format!("Width: {}px", self.width))
-                    .size(12)
-                    .line_height(1.0)
-            ]
-            .spacing(2)
-            .align_items(Alignment::Center)
-        ]
-        .spacing(10)
-        .align_items(Alignment::End);
-
-        let rotation = row![
             pick_list(
                 [RotationStrategy::Floating, RotationStrategy::Solid],
                 Some(match self.rotation {
@@ -139,7 +132,21 @@ impl Image {
                 Message::RotationStrategyChanged,
             )
             .width(Length::Fill),
-            column![
+        ]
+        .spacing(10)
+        .align_items(Alignment::End);
+
+        let properties = row![
+            with_value(
+                slider(100.0..=500.0, self.width, Message::WidthChanged),
+                format!("Width: {}px", self.width)
+            ),
+            with_value(
+                slider(0.0..=1.0, self.opacity, Message::OpacityChanged)
+                    .step(0.01),
+                format!("Opacity: {:.2}", self.opacity)
+            ),
+            with_value(
                 row![
                     slider(
                         Degrees::RANGE,
@@ -153,20 +160,13 @@ impl Image {
                 ]
                 .spacing(10)
                 .align_items(Alignment::Center),
-                text(format!(
-                    "Rotation: {:.0}°",
-                    f32::from(self.rotation.degrees())
-                ))
-                .size(12)
-                .line_height(1.0)
-            ]
-            .spacing(2)
-            .align_items(Alignment::Center)
+                format!("Rotation: {:.0}°", f32::from(self.rotation.degrees()))
+            )
         ]
         .spacing(10)
         .align_items(Alignment::End);
 
-        container(column![center(i_am_ferris), sizing, rotation].spacing(10))
+        container(column![fit, center(i_am_ferris), properties].spacing(10))
             .padding(10)
             .into()
     }
@@ -176,6 +176,7 @@ impl Default for Image {
     fn default() -> Self {
         Self {
             width: 300.0,
+            opacity: 1.0,
             rotation: Rotation::default(),
             content_fit: ContentFit::default(),
             spin: false,
@@ -198,3 +199,13 @@ impl std::fmt::Display for RotationStrategy {
         })
     }
 }
+
+fn with_value<'a>(
+    control: impl Into<Element<'a, Message>>,
+    value: String,
+) -> Element<'a, Message> {
+    column![control.into(), text(value).size(12).line_height(1.0)]
+        .spacing(2)
+        .align_items(Alignment::Center)
+        .into()
+}

graphics/src/image.rs

@@ -18,8 +18,11 @@ pub enum Image {
         /// The bounds of the image.
         bounds: Rectangle,
 
-        /// The rotation of the image in radians
+        /// The rotation of the image.
         rotation: Radians,
+
+        /// The opacity of the image.
+        opacity: f32,
     },
     /// A vector image.
     Vector {
@@ -32,8 +35,11 @@ pub enum Image {
         /// The bounds of the image.
         bounds: Rectangle,
 
-        /// The rotation of the image in radians
+        /// The rotation of the image.
         rotation: Radians,
+
+        /// The opacity of the image.
+        opacity: f32,
     },
 }
 

renderer/src/fallback.rs

@@ -155,11 +155,18 @@ where
         filter_method: image::FilterMethod,
         bounds: Rectangle,
         rotation: Radians,
+        opacity: f32,
     ) {
         delegate!(
             self,
             renderer,
-            renderer.draw_image(handle, filter_method, bounds, rotation)
+            renderer.draw_image(
+                handle,
+                filter_method,
+                bounds,
+                rotation,
+                opacity
+            )
         );
     }
 }
@@ -179,11 +186,12 @@ where
         color: Option<Color>,
         bounds: Rectangle,
         rotation: Radians,
+        opacity: f32,
     ) {
         delegate!(
             self,
             renderer,
-            renderer.draw_svg(handle, color, bounds, rotation)
+            renderer.draw_svg(handle, color, bounds, rotation, opacity)
         );
     }
 }

tiny_skia/src/engine.rs

@@ -551,6 +551,7 @@ impl Engine {
                 filter_method,
                 bounds,
                 rotation,
+                opacity,
             } => {
                 let physical_bounds = *bounds * _transformation;
 
@@ -574,6 +575,7 @@ impl Engine {
                     handle,
                     *filter_method,
                     *bounds,
+                    *opacity,
                     _pixels,
                     transform,
                     clip_mask,
@@ -585,6 +587,7 @@ impl Engine {
                 color,
                 bounds,
                 rotation,
+                opacity,
             } => {
                 let physical_bounds = *bounds * _transformation;
 
@@ -608,6 +611,7 @@ impl Engine {
                     handle,
                     *color,
                     physical_bounds,
+                    *opacity,
                     _pixels,
                     transform,
                     clip_mask,

tiny_skia/src/layer.rs

@@ -122,12 +122,14 @@ impl Layer {
         bounds: Rectangle,
         transformation: Transformation,
         rotation: Radians,
+        opacity: f32,
     ) {
         let image = Image::Raster {
             handle,
             filter_method,
             bounds: bounds * transformation,
             rotation,
+            opacity,
         };
 
         self.images.push(image);
@@ -140,12 +142,14 @@ impl Layer {
         bounds: Rectangle,
         transformation: Transformation,
         rotation: Radians,
+        opacity: f32,
     ) {
         let svg = Image::Vector {
             handle,
             color,
             bounds: bounds * transformation,
             rotation,
+            opacity,
         };
 
         self.images.push(svg);

tiny_skia/src/lib.rs

@@ -378,6 +378,7 @@ impl core::image::Renderer for Renderer {
         filter_method: core::image::FilterMethod,
         bounds: Rectangle,
         rotation: core::Radians,
+        opacity: f32,
     ) {
         let (layer, transformation) = self.layers.current_mut();
         layer.draw_image(
@@ -386,6 +387,7 @@ impl core::image::Renderer for Renderer {
             bounds,
             transformation,
             rotation,
+            opacity,
         );
     }
 }
@@ -405,9 +407,17 @@ impl core::svg::Renderer for Renderer {
         color: Option<Color>,
         bounds: Rectangle,
         rotation: core::Radians,
+        opacity: f32,
     ) {
         let (layer, transformation) = self.layers.current_mut();
-        layer.draw_svg(handle, color, bounds, transformation, rotation);
+        layer.draw_svg(
+            handle,
+            color,
+            bounds,
+            transformation,
+            rotation,
+            opacity,
+        );
     }
 }
 

tiny_skia/src/raster.rs

@@ -31,6 +31,7 @@ impl Pipeline {
         handle: &raster::Handle,
         filter_method: raster::FilterMethod,
         bounds: Rectangle,
+        opacity: f32,
         pixels: &mut tiny_skia::PixmapMut<'_>,
         transform: tiny_skia::Transform,
         clip_mask: Option<&tiny_skia::Mask>,
@@ -56,6 +57,7 @@ impl Pipeline {
                 image,
                 &tiny_skia::PixmapPaint {
                     quality,
+                    opacity,
                     ..Default::default()
                 },
                 transform,

tiny_skia/src/vector.rs

@@ -34,6 +34,7 @@ impl Pipeline {
         handle: &Handle,
         color: Option<Color>,
         bounds: Rectangle,
+        opacity: f32,
         pixels: &mut tiny_skia::PixmapMut<'_>,
         transform: Transform,
         clip_mask: Option<&tiny_skia::Mask>,
@@ -47,7 +48,10 @@ impl Pipeline {
                 bounds.x as i32,
                 bounds.y as i32,
                 image,
-                &tiny_skia::PixmapPaint::default(),
+                &tiny_skia::PixmapPaint {
+                    opacity,
+                    ..tiny_skia::PixmapPaint::default()
+                },
                 transform,
                 clip_mask,
             );