image node ui 节点研究

下面是两个示例，一个是导入图片地址，另一个是设置图片节点位置和大小。

• 图片地址导入
  默认行为：图片会以原始尺寸显示在屏幕中央。
  自动适配：Bevy 会使用图片的原始宽高比

• 详细属性解析
  Node 组件：UI 布局的核心组件
  width: px(1920) - 设置图片宽度为1920像素
  height 未设置 - 高度会自动计算以保持原始宽高比

导入图片地址

use bevy::prelude::*;

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_systems(Startup, setup)
        .run();
}

fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
    // 创建2D相机
    commands.spawn(Camera2d);
    
    // 创建ImageNode显示图像
    commands.spawn(ImageNode::new(asset_server.load("my_image.png")));
}

设置图片节点位置和大小

use bevy::prelude::*;

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_systems(Startup, setup)
        .run();
}

fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
    // 创建2D相机
    commands.spawn(Camera2d);
    
    // 创建ImageNode显示图像
    commands.spawn((
        ImageNode::new(asset_server.load("textbox.png")),
        Node {
            // 只设置宽度，高度自动调整保持比例
            width: px(1920),
            position_type: PositionType::Absolute,
            left: px(0),
            bottom: px(0),
            
            ..default()
        },
    ));
}