emilk / emilk/egui

Rotated image does not respect container boundaries, has wrong width/height ratio and is clipped

Open
#3,341 1 comment 4 reactions 0 assignees View on GitHub
bug
Dominant language
Rust
Stars
30.6k
Forks
2.1k
Avg merge
1d 9h
Merged PRs (30d)
72

Description

**Describe the bug**

When rotating an image in a `egui::Window` the rotated image is clipped, has the wrong width/height ratio and does not respect the boundaries of the `egui::Window`.

**To Reproduce**
Steps to reproduce the behavior:

Execute the following example:
```rust
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")] // hide console window on Windows in release

use eframe::egui;

fn main() -> Result<(), eframe::Error> {
env_logger::init(); // Log to stderr (if you run with `RUST_LOG=debug`).
let options = eframe::NativeOptions {
initial_window_size: Some(egui::vec2(800.0, 600.0)),
..Default::default()
};
eframe::run_native(
"Image rotate",
options,
Box::new(|cc| {
egui_extras::install_image_loaders(&cc.egui_ctx);
Box::new(MyApp)
}),
)
}

struct MyApp;

impl eframe::App for MyApp {
fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
let image =
"https://fastly.picsum.photos/id/1022/200/400.jpg?hmac=oxKHaOz8cq3kV9_csoieTimL5UtMo24uOalIWq5Wp04";
egui::Window::new("Original").show(ctx, |ui| {
ui.add(egui::Image::new(
image
));
});

egui::Window::new("Rotated").show(ctx, |ui| {
ui.add(egui::Image::new(
image
).rotate(90.0_f32.to_radians(),egui::Vec2::splat(0.5)));
});
}
}
```

**Expected behavior**

The image is expected to be rotated but maintain its width/height ratio, be within the bounds of its parent window and not be clipped.

**Screenshots**

image

**Desktop (please complete the following information):**
- OS: Ubuntu 22.04 in WSL on Windows 11

Contributor guide

Open the contributing guide

Research direction

Run the provided eframe example with the two egui::Window instances and compare the regular egui::Image with the rotated one. Start by tracing egui::Image and its rotate path; done means the rotated image preserves its width/height ratio, stays within its parent window, and is not clipped.

Written by the indexing model from the issue text.

Assessment

Tech stack
rust
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.