rust语言 (1.88) egui (0.32.2) 学习笔记（逐行注释）（二十八）使用图片控件显示图片

一、添加依赖

egui_extras={version="*",features=["default","all_loaders"]}

二、注册图像加载器到egui上下文

eframe::run_native(
    "加载图片", 
    options, 
    Box::new(|cc| {
        egui_extras::install_image_loaders(&cc.egui_ctx);
        Ok(Box::new(MyApp::new(cc)))
    }),
)?;

• egui_extras::install_image_loaders(&cc.egui_ctx); ：注册图像加载器到egui上下文，使程序能加载显示本地或网络图片（如PNG/JPG等）。若不添加：
  • 无法通过ui.image()显示外部图片
  • 图片相关功能（如纹理加载）会失效
  • 需手动实现图像解码逻辑

三、三种图片控件使用方式

1、ui.image(impl Into<ImageSource>)，无法使用更多样式，实际调用的3

ui.image(egui::include_image!(
    "../1.jpg"
));

2、ui.add(egui::Image::new(impl Into<ImageSource>))，可以使用更多样式，实际调用的3

ui.add(egui::Image::new(egui::include_image!(
    "../1.jpg"
)));

3、egui::Image::new(impl Into<ImageSource>).ui(ui)，可以使用更多样式，1、2都是调用的本方法

egui::Image::new(egui::include_image!(
    "../1.jpg"
)).ui(ui);

四、图片加载方式

1、从Url加载图片

egui::Image::new("file://image/img/10.jpeg").ui(ui);
egui::Image::new("https://image.maigoo.com/upload/images/20231207/11050416467_1320x880.jpg_1024_1024.jpg").ui(ui);

2、从字节数据加载

egui::Image::new(egui::include_image!("../image/img/13.jpg")).ui(ui);
egui::Image::from_bytes("bytes://image/img/15.webp", std::fs::read("./image/img/15.webp").unwrap()).ui(ui);

const IMG_BYTES: &[u8] = include_bytes!("../image/img/20.png");
egui::Image::from_bytes("bytes://20.png", IMG_BYTES).ui(ui);

3、从纹理加载

• 纹理加载是指，将图片数据上传到GPU显存中生成纹理对象，渲染时由着色器直接采样纹理数据。
• 纹理加载适合频繁绘制的场景（如游戏、动态UI），因为GPU对纹理的渲染效率远高于CPU处理原始字节数据。

let img = image::open("./image/img/21.jpg").ok().unwrap().to_rgba8();  // 加载图片并转换为RGBA8格式
let size = [img.width() as _, img.height() as _];          // 获取图片宽高，类型为u32，as _ 自动类型推断为usize
let texture=ctx.load_texture(
    "./image/img/21.jpg",                                  // 纹理id,通常用路径作为唯一标识
    egui::ColorImage::from_rgba_unmultiplied(size, &img),  //创建未预乘Alpha的RGBA图像数据
    egui::TextureOptions::LINEAR                           // 指定纹理缩放使用线性滤波（平滑效果）
);
egui::Image::new(&texture).ui(ui);                        // 显示纹理

五、图片的相关方法

1、常用方法汇总

.ui(ui)                                 // 将当前图片加载到当前ui
.max_width(100.0)                       // 最大宽度，保持比例
.max_height(100.0)                      // 最大高度，保持比例
.max_size(egui::Vec2::new(100.0,100.0)) // 图片最大尺寸
.show_loading_spinner(true)             // 显示加载旋转器
.fit_to_original_size(0.5)                       // 按比例缩放
.fit_to_exact_size(egui::Vec2::new(200.0,150.0)) // 精确尺寸控制，尺寸比例与原图比例不相同时，按照最小的尺寸按比例缩放
.alt_text("加载失败时，显示的文本")

2、bg_fill 背景色

（1）普通背景色

.bg_fill(egui::Color32::from_rgb(150,175,210))

（2）透明度的背景色

.bg_fill(egui::Color32::from_rgba_premultiplied(150, 175, 210, 200)) 

2、rotate 旋转

第一个参数：正数顺时针旋转，负数逆时针旋转，值为弧度，2π弧度=360度，1弧度≈57.3度。

第二个参数：旋转时围绕的中心，图片左上角坐标为：(0.0,0.0)，右下角坐标为：(1.0,1.0)，要是围绕中心点旋转使用：(0.5,0.5)

1、 不旋转

.rotate(0.0,(0.5,0.5).into())

2、围绕中心旋转180度、π弧度（倒转图片）

.rotate(3.1415926,(0.5,0.5).into())    // 中心可以使用：egui::Vec2::splat(0.5)

3、围绕(1.5,1.5)处，旋转180度、π弧度

.rotate(std::f32::consts::PI,(1.5,1.5).into()) 

rust标准库中的弧度值常量：

std::f32::consts::PI            // 180度，π弧度 = 3.14159265358979323846264338327950288_f32
std::f32::consts::TAU          // 360度，2π弧度 = 6.28318530717958647692528676655900577_f32
std::f32::consts::FRAC_PI_2    // 90度，π/2弧度 = 1.57079632679489661923132169163975144_f32
std::f32::consts::FRAC_PI_3    // 60度，π/3弧度 = 1.04719755119659774615421446109316763_f32
std::f32::consts::FRAC_PI_4     //45度，π/4弧度 = 0.785398163397448309615660845819875721_f32
std::f32::consts::FRAC_PI_6     //30度，π/6弧度 = 0.52359877559829887307710723054658381_f32
std::f32::consts::FRAC_PI_8   //22.5度，π/8弧度 = 0.39269908169872415480783042290993786_f32

3、corner_radius 圆角

.corner_radius(100.0)

4、tint 着色效果

.tint(egui::Color32::from_rgb(150, 0, 150))

5、uv 裁剪图片

// 中心部位
.uv(egui::Rect::from_min_max(
    egui::pos2(0.25, 0.25),
    egui::pos2(0.75, 0.75),
))

6、其他处理

let response = egui::Image::new("http").ui(ui);
if response.hovered(){ 显示加载状态提示......}           // 进一步处理相应
`