前言
 本专栏是关于Rust的GUI库egui的部件讲解及应用实例分析,主要讲解egui的源代码、部件属性、如何应用。
环境配置
 系统:windows
 平台:visual studio code
 语言:rust
 库:egui、eframe
概述
 本文是本专栏的第五篇博文,主要说明如何在窗口中添加图像显示的部件。
事实上,类似于iced,egui都提供了示例程序,本专栏的博文都是建立在官方示例程序以及源代码的基础上,进行的实例讲解。
 即,本专栏的文章并非只是简单的翻译egui的官方示例与文档,而是针对于官方代码进行的实际使用,会在官方的代码上进行修改,包括解决一些问题。
系列博客链接:
 1、<Rust>egui学习之小部件(一):如何在窗口及部件显示中文字符?
 2、<Rust>egui学习之小部件(二):如何在egui窗口中添加按钮button以及标签label部件?
 3、<Rust>egui学习之小部件(三):如何为窗口UI元件设置布局(间隔、水平、垂直排列)?
 4、<Rust>egui学习之小部件(四):如何在窗口中添加滑动条部件?
部件属性
在egui中,窗口显示图片比较简单,但是需要先添加图片加载器。
 在toml文件添加依赖:
egui_extras={version="*",features=["default","all_loaders"]}
然后在程序中,添加图像loader:
  eframe::run_native(  
        "egui测试窗口",
        options, 
        //Box::new(|_cc| Ok(Box::<MyApp>::default())), 
        Box::new(|cc|{
            //添加image loader
            egui_extras::install_image_loaders(&cc.egui_ctx);
            Ok(Box::new(MyApp::new(cc)))
        }
             
    ))
然后就可以在窗体上来添加一个图片容器来显示图片了。
ui.image(egui::include_image!("../icons/btn_img1.png")); 
这是最简单的代码,图片路径是本地路径,也可以加在网络图片。
 看一下显示效果:
 
 上图中的图片是256x256大小的png格式的图片,目前是默认显示,如果觉得图片太大,需要调整图片的显示尺寸,可以这样设置:
 let img1=egui::include_image!("../icons/btn_img1.png");  
 Image::new(img1).max_width(120.0) 
                                    .max_height(120.0).rounding(5.0)
                                    .ui(ui);

 我们可以为图片容器设置背景颜色,还可以使其旋转一定角度等:
Image::new(img1).max_width(120.0)   
                                    .max_height(120.0).rounding(5.0)
                                    .bg_fill(Color32::from_rgb(0,255,0))
                                    .rotate(30.0, (0.6,0.5).into())
                                    .ui(ui);

 可以看到,旋转时,不仅可以设置旋转角度,还可以设置旋转中心。
以上就是关于egui中图片显示的基本内容,比较简单,有一些其他的属性并没有完全说明,但不影响你去最基本的应用。










