Improve the frame around ImageButton

Helps https://github.com/emilk/egui/issues/721

eframe/examples/image.rs

@@ -2,7 +2,7 @@ use eframe::{egui, epi};
 
 #[derive(Default)]
 struct MyApp {
-    texture: Option<egui::TextureId>,
+    texture: Option<(egui::Vec2, egui::TextureId)>,
 }
 
 impl epi::App for MyApp {
@@ -13,7 +13,7 @@ impl epi::App for MyApp {
     fn update(&mut self, ctx: &egui::CtxRef, frame: &mut epi::Frame<'_>) {
         if self.texture.is_none() {
             // Load the image:
-            let image_data = include_bytes!("rust-logo-512x512.png");
+            let image_data = include_bytes!("rust-logo-256x256.png");
             use image::GenericImageView;
             let image = image::load_from_memory(image_data).expect("Failed to load image");
             let image_buffer = image.to_rgba8();
@@ -29,13 +29,17 @@ impl epi::App for MyApp {
             let texture = frame
                 .tex_allocator()
                 .alloc_srgba_premultiplied(size, &pixels);
-            self.texture = Some(texture);
+            let size = egui::Vec2::new(size.0 as f32, size.1 as f32);
+            self.texture = Some((size, texture));
         }
 
         egui::CentralPanel::default().show(ctx, |ui| {
-            ui.heading("Here is an image for you:");
-            if let Some(texture) = self.texture {
-                ui.image(texture, egui::Vec2::splat(256.0));
+            if let Some((size, texture)) = self.texture {
+                ui.heading("This is an image:");
+                ui.image(texture, size);
+
+                ui.heading("This is an image you can click:");
+                ui.add(egui::ImageButton::new(texture, size));
             }
         });
     }

egui/src/widgets/button.rs

@@ -521,31 +521,50 @@ impl Widget for ImageButton {
             selected,
         } = self;
 
-        let button_padding = ui.spacing().button_padding;
-        let size = image.size() + 2.0 * button_padding;
-        let (rect, response) = ui.allocate_exact_size(size, sense);
+        let padding = if frame {
+            // so we can see that it is a button:
+            Vec2::splat(ui.spacing().button_padding.x)
+        } else {
+            Vec2::ZERO
+        };
+        let padded_size = image.size() + 2.0 * padding;
+        let (rect, response) = ui.allocate_exact_size(padded_size, sense);
         response.widget_info(|| WidgetInfo::new(WidgetType::ImageButton));
 
         if ui.clip_rect().intersects(rect) {
-            let visuals = ui.style().interact(&response);
-
-            if selected {
+            let (expansion, corner_radius, fill, stroke) = if selected {
                 let selection = ui.visuals().selection;
-                ui.painter()
-                    .rect(rect, 0.0, selection.bg_fill, selection.stroke);
+                (-padding, 0.0, selection.bg_fill, selection.stroke)
             } else if frame {
-                ui.painter().rect(
-                    rect.expand(visuals.expansion),
+                let visuals = ui.style().interact(&response);
+                let expansion = if response.hovered {
+                    Vec2::splat(visuals.expansion) - padding
+                } else {
+                    Vec2::splat(visuals.expansion)
+                };
+                (
+                    expansion,
                     visuals.corner_radius,
                     visuals.bg_fill,
                     visuals.bg_stroke,
-                );
-            }
+                )
+            } else {
+                Default::default()
+            };
+
+            // Draw frame background (for transparent images):
+            ui.painter()
+                .rect_filled(rect.expand2(expansion), corner_radius, fill);
 
             let image_rect = ui
                 .layout()
-                .align_size_within_rect(image.size(), rect.shrink2(button_padding));
+                .align_size_within_rect(image.size(), rect.shrink2(padding));
+            // let image_rect = image_rect.expand2(expansion); // can make it blurry, so let's not
             image.paint_at(ui, image_rect);
+
+            // Draw frame outline:
+            ui.painter()
+                .rect_stroke(rect.expand2(expansion), corner_radius, stroke);
         }
 
         response

egui_glium/examples/native_texture.rs

@@ -28,7 +28,7 @@ fn main() {
     let mut egui = egui_glium::EguiGlium::new(&display);
     //load image by image crate
     let image = image::load(
-        Cursor::new(&include_bytes!("../../eframe/examples/rust-logo-512x512.png")[..]),
+        Cursor::new(&include_bytes!("../../eframe/examples/rust-logo-256x256.png")[..]),
         image::ImageFormat::Png,
     )
     .unwrap()