emilk / egui

egui: an easy-to-use immediate mode GUI in Rust that runs on both web and native
https://www.egui.rs/
Apache License 2.0
22.47k stars 1.6k forks source link

The background is completely transparent #5072

Open lngex opened 2 months ago

lngex commented 2 months ago

Using "Viewport Builder::with transparent(true)" to set transparency will result in shadow or translucency. I hope a function can be provided to achieve complete transparency. 图片

jayy-ahn commented 2 months ago

Have you tried implementing fn clear_color to MyEguiApp?

impl MyEquiApp {
    fn new(...) {...}
    fn clear_color(&self, _visuals: &egui::Visuals) -> [f32; 4] {
        [0.0, 0.0, 0.0, 0.0]
    }
}

This made the window completely transparent in another project I'm working on.

lngex commented 2 months ago

Have you tried implementing fn clear_color to MyEguiApp?

impl MyEquiApp {
    fn new(...) {...}
    fn clear_color(&self, _visuals: &egui::Visuals) -> [f32; 4] {
        [0.0, 0.0, 0.0, 0.0]
    }
}

This made the window completely transparent in another project I'm working on.

Using this method will cause the window to be completely black

lngex commented 2 months ago

图片 Implement clear color and return [0,0,0,0],But the window is not transparent

jayy-ahn commented 1 month ago

Try adding a CentralPanel with the frame filled with Color32::TRANSPARENT.

impl eframe::App for MyEguiApp {
    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
        egui::Window::new("test").show(ctx, |ui| {
            ui.heading("hi");
        };
        egui::CentralPanel::default()
            .frame(egui::Frame::default().fill(Color32::TRANSPARENT))
            .show(ctx, |ui| {});
    }
    fn clear_color(...) {...}

{07AAAF92-D5E3-4545-B23A-CE1AF607BC23}

lngex commented 1 month ago

图片 I tried to do what you said, but it still didn't work as expected.

lucasmerlin commented 1 month ago

@jayy-ahn @lngex I'm curious if you're using the gl or the wgpu backend? Maybe that makes a difference?

lngex commented 1 month ago

@jayy-ahn@lngex我很好奇你是使用gl还是wgpu后端?也许这会有所不同? I turned on the log, and the log shows the glow used.

[2024-09-24T13:38:30Z DEBUG eframe] Using the glow renderer
[2024-09-24T13:38:30Z TRACE eframe::native::run] Entering the winit event loop (run_on_demand)…
[2024-09-24T13:38:30Z TRACE eframe::native::run] winit event: NewEvents(Init)
[2024-09-24T13:38:30Z TRACE eframe::native::run] event_result: Wait
[2024-09-24T13:38:30Z TRACE eframe::native::run] winit event: Resumed
[2024-09-24T13:38:30Z DEBUG eframe::native::glow_integration] Event::Resumed

This works fine on my other computer, but on this one the background is always black

rustbasic commented 2 weeks ago

Please check if there are any problems as follows.

See Below:

use eframe::egui::*;

fn main() -> eframe::Result {
    let options = eframe::NativeOptions {
        viewport: egui::ViewportBuilder::default()
            .with_inner_size([320.0, 240.0])
            .with_transparent(true),
        ..Default::default()
    };
    eframe::run_native(
        "My egui App",
        options,
        Box::new(|_cc| Ok(Box::<App>::default())),
    )
}

#[derive(Default)]
struct App {
    _temp_value: usize,
    _text: String,
}

impl eframe::App for App {
    fn clear_color(&self, _visuals: &egui::Visuals) -> [f32; 4] {
        [0.0, 0.0, 0.0, 0.0]
    }

    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {

        let panel_frame = Frame::default().fill(egui::Color32::TRANSPARENT);

        egui::CentralPanel::default().frame(panel_frame).show(ctx, |ui| {
            ui.label(RichText::new("Demo").background_color(egui::Color32::LIGHT_GREEN).color(Color32::RED));
        });
    }
}
lngex commented 2 weeks ago

Please check if there are any problems as follows.

See Below:

use eframe::egui::*;

fn main() -> eframe::Result {
    let options = eframe::NativeOptions {
        viewport: egui::ViewportBuilder::default()
            .with_inner_size([320.0, 240.0])
            .with_transparent(true),
        ..Default::default()
    };
    eframe::run_native(
        "My egui App",
        options,
        Box::new(|_cc| Ok(Box::<App>::default())),
    )
}

#[derive(Default)]
struct App {
    _temp_value: usize,
    _text: String,
}

impl eframe::App for App {
    fn clear_color(&self, _visuals: &egui::Visuals) -> [f32; 4] {
        [0.0, 0.0, 0.0, 0.0]
    }

    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {

        let panel_frame = Frame::default().fill(egui::Color32::TRANSPARENT);

        egui::CentralPanel::default().frame(panel_frame).show(ctx, |ui| {
            ui.label(RichText::new("Demo").background_color(egui::Color32::LIGHT_GREEN).color(Color32::RED));
        });
    }
}

There is no problem with the panel and font setting colors, but the window setting the background to transparent does not take effect

rustbasic commented 2 weeks ago

There is no problem with the panel and font setting colors, but the window setting the background to transparent does not take effect

The above source code works fine on Windows10 + glow.