<Rust>egui学习之小部件(七):如何在窗口中添加颜色选择器colorpicker部件?

2024-08-31 10:20

本文主要是介绍<Rust>egui学习之小部件(七):如何在窗口中添加颜色选择器colorpicker部件?,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言
本专栏是关于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是实时更新的,此区域的临时变量会一直被复位,你选择的颜色值一般会闪现,然后归零。

本例中的颜色值变量,是在结构体中提前添加的,直接调用即可。
这样就可以获取实时选择的颜色值了。

看一下实例演示:
在这里插入图片描述

这篇关于<Rust>egui学习之小部件(七):如何在窗口中添加颜色选择器colorpicker部件?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1123631

相关文章

Rust 智能指针的使用详解

《Rust智能指针的使用详解》Rust智能指针是内存管理核心工具,本文就来详细的介绍一下Rust智能指针(Box、Rc、RefCell、Arc、Mutex、RwLock、Weak)的原理与使用场景,... 目录一、www.chinasem.cnRust 智能指针详解1、Box<T>:堆内存分配2、Rc<T>:

Unity新手入门学习殿堂级知识详细讲解(图文)

《Unity新手入门学习殿堂级知识详细讲解(图文)》Unity是一款跨平台游戏引擎,支持2D/3D及VR/AR开发,核心功能模块包括图形、音频、物理等,通过可视化编辑器与脚本扩展实现开发,项目结构含A... 目录入门概述什么是 UnityUnity引擎基础认知编辑器核心操作Unity 编辑器项目模式分类工程

Python利用GeoPandas打造一个交互式中国地图选择器

《Python利用GeoPandas打造一个交互式中国地图选择器》在数据分析和可视化领域,地图是展示地理信息的强大工具,被将使用Python、wxPython和GeoPandas构建的交互式中国地图行... 目录技术栈概览代码结构分析1. __init__ 方法:初始化与状态管理2. init_ui 方法:

Python学习笔记之getattr和hasattr用法示例详解

《Python学习笔记之getattr和hasattr用法示例详解》在Python中,hasattr()、getattr()和setattr()是一组内置函数,用于对对象的属性进行操作和查询,这篇文章... 目录1.getattr用法详解1.1 基本作用1.2 示例1.3 原理2.hasattr用法详解2.

PostgreSQL中rank()窗口函数实用指南与示例

《PostgreSQL中rank()窗口函数实用指南与示例》在数据分析和数据库管理中,经常需要对数据进行排名操作,PostgreSQL提供了强大的窗口函数rank(),可以方便地对结果集中的行进行排名... 目录一、rank()函数简介二、基础示例:部门内员工薪资排名示例数据排名查询三、高级应用示例1. 每

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu

使用Python和OpenCV库实现实时颜色识别系统

《使用Python和OpenCV库实现实时颜色识别系统》:本文主要介绍使用Python和OpenCV库实现的实时颜色识别系统,这个系统能够通过摄像头捕捉视频流,并在视频中指定区域内识别主要颜色(红... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间详解

OpenCV实现实时颜色检测的示例

《OpenCV实现实时颜色检测的示例》本文主要介绍了OpenCV实现实时颜色检测的示例,通过HSV色彩空间转换和色调范围判断实现红黄绿蓝颜色检测,包含视频捕捉、区域标记、颜色分析等功能,具有一定的参考... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间

苹果macOS 26 Tahoe主题功能大升级:可定制图标/高亮文本/文件夹颜色

《苹果macOS26Tahoe主题功能大升级:可定制图标/高亮文本/文件夹颜色》在整体系统设计方面,macOS26采用了全新的玻璃质感视觉风格,应用于Dock栏、应用图标以及桌面小部件等多个界面... 科技媒体 MACRumors 昨日(6 月 13 日)发布博文,报道称在 macOS 26 Tahoe 中

Windows的CMD窗口如何查看并杀死nginx进程

《Windows的CMD窗口如何查看并杀死nginx进程》:本文主要介绍Windows的CMD窗口如何查看并杀死nginx进程问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录Windows的CMD窗口查看并杀死nginx进程开启nginx查看nginx进程停止nginx服务