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

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

1 files changed, 36 insertions, 25 deletions

diff --git a/examples/ferris/src/main.rs b/examples/ferris/src/main.rs
index 13d746dd..0400c376 100644
--- a/examples/ferris/src/main.rs
+++ b/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,6 +102,7 @@ impl Image {
                 .width(self.width)
                 .content_fit(self.content_fit)
                 .rotation(self.rotation)
+                .opacity(self.opacity)
             )
             .explain(Color::WHITE),
             "I am Ferris!"
@@ -104,7 +110,7 @@ impl Image {
         .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()
+}