前言
本专栏是关于Rust的GUI库egui的部件讲解及应用实例分析,主要讲解egui的源代码、部件属性、如何应用。
环境配置
系统:windows
平台:visual studio code
语言:rust
库:egui、eframe
概述
本文是本专栏的第七篇博文,主要讲述颜色选择器部件colorpicker的使用。
事实上,类似于iced,egui都提供了示例程序,本专栏的博文都是建立在官方示例程序以及源代码的基础上,进行的实例讲解。
即,本专栏的文章并非只是简单的翻译egui的官方示例与文档,而是针对于官方代码进行的实际使用,会在官方的代码上进行修改,包括解决一些问题。
系列博客链接:
1、<Rust>egui学习之小部件(一):如何在窗口及部件显示中文字符?
2、<Rust>egui学习之小部件(二):如何在egui窗口中添加按钮button以及标签label部件?
3、<Rust>egui学习之小部件(三):如何为窗口UI元件设置布局(间隔、水平、垂直排列)?
4、<Rust>egui学习之小部件(四):如何在窗口中添加滑动条部件?
5、<Rust>egui学习之小部件(五):如何在窗口中添加图像部件?
6、<Rust>egui学习之小部件(六):如何在窗口中添加菜单栏部件?
部件属性
在egui中,也提供了颜色选择器这样的部件color_picker,且有多重颜色样式:
源代码中提供的可调用选项:
/// # Colors
impl Ui {/// Shows a button with the given color./// If the user clicks the button, a full color picker is shown.pub fn color_edit_button_srgba(&mut self, srgba: &mut Color32) -> Response {color_picker::color_edit_button_srgba(self, srgba, color_picker::Alpha::BlendOrAdditive)}/// Shows a button with the given color./// If the user clicks the button, a full color picker is shown.pub fn color_edit_button_hsva(&mut self, hsva: &mut Hsva) -> Response {color_picker::color_edit_button_hsva(self, hsva, color_picker::Alpha::BlendOrAdditive)}/// Shows a button with the given color./// If the user clicks the button, a full color picker is shown./// The given color is in `sRGB` space.pub fn color_edit_button_srgb(&mut self, srgb: &mut [u8; 3]) -> Response {color_picker::color_edit_button_srgb(self, srgb)}/// Shows a button with the given color./// If the user clicks the button, a full color picker is shown./// The given color is in linear RGB space.pub fn color_edit_button_rgb(&mut self, rgb: &mut [f32; 3]) -> Response {color_picker::color_edit_button_rgb(self, rgb)}/// Shows a button with the given color./// If the user clicks the button, a full color picker is shown./// The given color is in `sRGBA` space with premultiplied alphapub fn color_edit_button_srgba_premultiplied(&mut self, srgba: &mut [u8; 4]) -> Response {let mut color = Color32::from_rgba_premultiplied(srgba[0], srgba[1], srgba[2], srgba[3]);let response = self.color_edit_button_srgba(&mut color);*srgba = color.to_array();response}/// Shows a button with the given color./// If the user clicks the button, a full color picker is shown./// The given color is in `sRGBA` space without premultiplied alpha./// If unsure, what "premultiplied alpha" is, then this is probably the function you want to use.pub fn color_edit_button_srgba_unmultiplied(&mut self, srgba: &mut [u8; 4]) -> Response {let mut rgba = Rgba::from_srgba_unmultiplied(srgba[0], srgba[1], srgba[2], srgba[3]);let response =color_picker::color_edit_button_rgba(self, &mut rgba, color_picker::Alpha::OnlyBlend);*srgba = rgba.to_srgba_unmultiplied();response}/// Shows a button with the given color./// If the user clicks the button, a full color picker is shown./// The given color is in linear RGBA space with premultiplied alphapub fn color_edit_button_rgba_premultiplied(&mut self, rgba_premul: &mut [f32; 4]) -> Response {let mut rgba = Rgba::from_rgba_premultiplied(rgba_premul[0],rgba_premul[1],rgba_premul[2],rgba_premul[3],);let response = color_picker::color_edit_button_rgba(self,&mut rgba,color_picker::Alpha::BlendOrAdditive,);*rgba_premul = rgba.to_array();response}/// Shows a button with the given color./// If the user clicks the button, a full color picker is shown./// The given color is in linear RGBA space without premultiplied alpha./// If unsure, what "premultiplied alpha" is, then this is probably the function you want to use.pub fn color_edit_button_rgba_unmultiplied(&mut self, rgba_unmul: &mut [f32; 4]) -> Response {let mut rgba = Rgba::from_rgba_unmultiplied(rgba_unmul[0],rgba_unmul[1],rgba_unmul[2],rgba_unmul[3],);let response =color_picker::color_edit_button_rgba(self, &mut rgba, color_picker::Alpha::OnlyBlend);*rgba_unmul = rgba.to_rgba_unmultiplied();response}
}
我们选择rgb格式来看一下:
ui.color_edit_button_rgb(&mut self.color1);
color_edit_button提供一个按钮,当我们点击此按钮时,就会弹出颜色选择器,上图就是rgb格式下的选择器样式。
再看看其他选择器样式:
hsva
ui.color_edit_button_hsva(&mut self.color_hsva);
就不一一列举了。
需要注意的是,调用color_picker函数中添加的参数变量,最好不要是临时变量,因为updat是实时更新的,此区域的临时变量会一直被复位,你选择的颜色值一般会闪现,然后归零。
本例中的颜色值变量,是在结构体中提前添加的,直接调用即可。
这样就可以获取实时选择的颜色值了。
看一下实例演示: