Skip to content

Add Ui::with_visual_transform - #5055

Merged
emilk merged 2 commits into
emilk:masterfrom
lucasmerlin:add-ui-with-transform
Sep 10, 2024
Merged

emilk merged 2 commits into
emilk:masterfrom
lucasmerlin:add-ui-with-transform

Conversation

@lucasmerlin

@lucasmerlin lucasmerlin commented Sep 1, 2024

Copy link
Copy Markdown
Collaborator
  • I have followed the instructions in the PR template

This allows you to transform widgets without having to put them on a new layer.
Example usage:

Bildschirmaufnahme.2024-09-01.um.22.32.42.mov
use eframe::egui;
use eframe::egui::{Button, Frame, InnerResponse, Label, Pos2, RichText, UiBuilder, Widget};
use eframe::emath::TSTransform;
use eframe::NativeOptions;
use egui::{CentralPanel, Sense, WidgetInfo};

pub fn main() -> eframe::Result {
    eframe::run_simple_native("focus test", NativeOptions::default(), |ctx, _frame| {
        CentralPanel::default().show(ctx, |ui| {
            let response = ui.ctx().read_response(ui.next_auto_id());

            let pressed = response
                .as_ref()
                .is_some_and(|r| r.is_pointer_button_down_on());

            let hovered = response.as_ref().is_some_and(|r| r.hovered());

            let target_scale = match (pressed, hovered) {
                (true, _) => 0.94,
                (_, true) => 1.06,
                _ => 1.0,
            };

            let scale = ui
                .ctx()
                .animate_value_with_time(ui.id().with("Down"), target_scale, 0.1);

            let mut center = response
                .as_ref()
                .map(|r| r.rect.center())
                .unwrap_or_else(|| Pos2::new(0.0, 0.0));
            if center.any_nan() {
                center = Pos2::new(0.0, 0.0);
            }

            let transform = TSTransform::from_translation(center.to_vec2())
                * TSTransform::from_scaling(scale)
                * TSTransform::from_translation(-center.to_vec2());

            ui.with_visual_transform(transform, |ui| {
                Button::new(RichText::new("Yaaaay").size(20.0))
                    .sense(Sense::click())
                    .ui(ui)
            });
        });
    })
}

@lucasmerlin
lucasmerlin force-pushed the add-ui-with-transform branch from 0d30ec7 to 467f7ab Compare September 1, 2024 20:45
Comment thread crates/egui/src/ui.rs Outdated
@lucasmerlin
lucasmerlin requested a review from emilk September 2, 2024 11:02
@lucasmerlin
lucasmerlin force-pushed the add-ui-with-transform branch from f52296f to a42ecba Compare September 2, 2024 13:21
@emilk emilk changed the title Add Ui::with_transform Add Ui::with_visual_transform Sep 10, 2024
@emilk emilk added feature New feature or request egui labels Sep 10, 2024
@emilk
emilk merged commit 89b6055 into emilk:master Sep 10, 2024
hacknus pushed a commit to hacknus/egui that referenced this pull request Oct 30, 2024
* [X] I have followed the instructions in the PR template

This allows you to transform widgets without having to put them on a new
layer.
Example usage: 


https://github.com/user-attachments/assets/6b547782-f15e-42ce-835f-e8febe8d2d65

```rust
use eframe::egui;
use eframe::egui::{Button, Frame, InnerResponse, Label, Pos2, RichText, UiBuilder, Widget};
use eframe::emath::TSTransform;
use eframe::NativeOptions;
use egui::{CentralPanel, Sense, WidgetInfo};

pub fn main() -> eframe::Result {
    eframe::run_simple_native("focus test", NativeOptions::default(), |ctx, _frame| {
        CentralPanel::default().show(ctx, |ui| {
            let response = ui.ctx().read_response(ui.next_auto_id());

            let pressed = response
                .as_ref()
                .is_some_and(|r| r.is_pointer_button_down_on());

            let hovered = response.as_ref().is_some_and(|r| r.hovered());

            let target_scale = match (pressed, hovered) {
                (true, _) => 0.94,
                (_, true) => 1.06,
                _ => 1.0,
            };

            let scale = ui
                .ctx()
                .animate_value_with_time(ui.id().with("Down"), target_scale, 0.1);

            let mut center = response
                .as_ref()
                .map(|r| r.rect.center())
                .unwrap_or_else(|| Pos2::new(0.0, 0.0));
            if center.any_nan() {
                center = Pos2::new(0.0, 0.0);
            }

            let transform = TSTransform::from_translation(center.to_vec2())
                * TSTransform::from_scaling(scale)
                * TSTransform::from_translation(-center.to_vec2());

            ui.with_visual_transform(transform, |ui| {
                Button::new(RichText::new("Yaaaay").size(20.0))
                    .sense(Sense::click())
                    .ui(ui)
            });
        });
    })
}

```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

egui feature New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants