<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编程语言中的标量类型和复合类型,标量类型包括整数、浮点数、布尔和字符,而复合类型则包括元组和数组,标量类型用于表示单个值,具有不同的表示和范围,本文介绍的非... 目录一、标量类型(Scalar Types)1. 整数类型(Integer Types)1.1 整数字

Rust中的Option枚举快速入门教程

《Rust中的Option枚举快速入门教程》Rust中的Option枚举用于表示可能不存在的值,提供了多种方法来处理这些值,避免了空指针异常,文章介绍了Option的定义、常见方法、使用场景以及注意事... 目录引言Option介绍Option的常见方法Option使用场景场景一:函数返回可能不存在的值场景

bat脚本启动git bash窗口,并执行命令方式

《bat脚本启动gitbash窗口,并执行命令方式》本文介绍了如何在Windows服务器上使用cmd启动jar包时出现乱码的问题,并提供了解决方法——使用GitBash窗口启动并设置编码,通过编写s... 目录一、简介二、使用说明2.1 start.BAT脚本2.2 参数说明2.3 效果总结一、简介某些情

基于Redis有序集合实现滑动窗口限流的步骤

《基于Redis有序集合实现滑动窗口限流的步骤》滑动窗口算法是一种基于时间窗口的限流算法,通过动态地滑动窗口,可以动态调整限流的速率,Redis有序集合可以用来实现滑动窗口限流,本文介绍基于Redis... 滑动窗口算法是一种基于时间窗口的限流算法,它将时间划分为若干个固定大小的窗口,每个窗口内记录了该时间

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya(不是本人,claude AI)在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容: 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

学习hash总结

2014/1/29/   最近刚开始学hash,名字很陌生,但是hash的思想却很熟悉,以前早就做过此类的题,但是不知道这就是hash思想而已,说白了hash就是一个映射,往往灵活利用数组的下标来实现算法,hash的作用:1、判重;2、统计次数;

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合,内部除了存储元素外,还会存储一个score,存储在zset中的元素会按照score的大小升序排列,不同元素的score可以重复,score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]

【机器学习】高斯过程的基本概念和应用领域以及在python中的实例

引言 高斯过程(Gaussian Process,简称GP)是一种概率模型,用于描述一组随机变量的联合概率分布,其中任何一个有限维度的子集都具有高斯分布 文章目录 引言一、高斯过程1.1 基本定义1.1.1 随机过程1.1.2 高斯分布 1.2 高斯过程的特性1.2.1 联合高斯性1.2.2 均值函数1.2.3 协方差函数(或核函数) 1.3 核函数1.4 高斯过程回归(Gauss