<Rust>egui学习之小部件(五):如何在窗口中添加图像部件?

前言
本专栏是关于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中图片显示的基本内容,比较简单,有一些其他的属性并没有完全说明,但不影响你去最基本的应用。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

机构师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值