Macos scaled display vs Image widget

[ChristopherBiscardi]

When using a macos m1 retina screen, or scaled versions of non-retina screens, the origin, xpos, ypos, width, and height of Image widgets are multiplied by 2. More specifically, the dpi value here that was recently added increases from 1.0 to 2.0.

It seems that this dpi value being force-set to 1.0 fixes the issue, but I have no idea if this is a valid fix.

ninepatch widgets are not affected, so I've added one to the image example code to take some screenshots.

adjusted image.rs example

use bevy::{
    prelude::{App as BevyApp, AssetServer, Commands, Handle, Res, ResMut},
    window::WindowDescriptor,
    DefaultPlugins,
};
use kayak_core::styles::{PositionType, Edge};
use kayak_ui::{bevy::{BevyContext, BevyKayakUIPlugin, ImageManager, UICameraBundle}, widgets::NinePatch};
use kayak_ui::core::{
    render,
    styles::{Corner, Style, StyleProp, Units},
    Index,
};
use kayak_ui::widgets::{App, Image};

fn startup(
    mut commands: Commands,
    asset_server: Res<AssetServer>,
    mut image_manager: ResMut<ImageManager>,
) {
    commands.spawn_bundle(UICameraBundle::new());

    let handle: Handle<bevy::render::texture::Image> = asset_server.load("generic-rpg-vendor.png");
    let ui_image_handle = image_manager.get(&handle);

    let panel_handle: Handle<bevy::render::texture::Image> = asset_server.load("panel.png");
    let panel_image_handle = image_manager.get(&panel_handle);

    
    let context = BevyContext::new(|context| {
        let image_styles = Style {
            position_type: StyleProp::Value(PositionType::SelfDirected),
            left: StyleProp::Value(Units::Pixels(100.0)),
            top: StyleProp::Value(Units::Pixels(10.0)),
            border_radius: StyleProp::Value(Corner::all(500.0)),
            width: StyleProp::Value(Units::Pixels(200.0)),
            height: StyleProp::Value(Units::Pixels(182.0)),
            ..Style::default()
        };
        let nine_patch_styles = Style {
            width: StyleProp::Value(Units::Pixels(512.0)),
            height: StyleProp::Value(Units::Pixels(512.0)),
            ..Style::default()
        };

        render! {
            <App>
                <NinePatch
                    styles={Some(nine_patch_styles)}
                    border={Edge::all(15.0)}
                    handle={panel_image_handle}
                >
                </NinePatch>
                <Image styles={Some(image_styles)} handle={ui_image_handle} />
            </App>
        }
    });

    commands.insert_resource(context);
}

fn main() {
    BevyApp::new()
        .insert_resource(WindowDescriptor {
            width: 1270.0,
            height: 720.0,
            title: String::from("UI Example"),
            ..Default::default()
        })
        .add_plugins(DefaultPlugins)
        .add_plugin(BevyKayakUIPlugin)
        .add_startup_system(startup)
        .run();
}

[StarArawn]

I'm not sure this is an issue anymore. Can you please test and report back? Thanks!

[ChristopherBiscardi]

It still seems like something is still going on here. The image gets bigger than the ninepatch when on a 4k monitor compared to a 1080p monitor.

1080p

4k and m1 retina