<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

相关文章

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

【学习笔记】 陈强-机器学习-Python-Ch15 人工神经网络(1)sklearn

系列文章目录 监督学习:参数方法 【学习笔记】 陈强-机器学习-Python-Ch4 线性回归 【学习笔记】 陈强-机器学习-Python-Ch5 逻辑回归 【课后题练习】 陈强-机器学习-Python-Ch5 逻辑回归(SAheart.csv) 【学习笔记】 陈强-机器学习-Python-Ch6 多项逻辑回归 【学习笔记 及 课后题练习】 陈强-机器学习-Python-Ch7 判别分析 【学

系统架构师考试学习笔记第三篇——架构设计高级知识(20)通信系统架构设计理论与实践

本章知识考点:         第20课时主要学习通信系统架构设计的理论和工作中的实践。根据新版考试大纲,本课时知识点会涉及案例分析题(25分),而在历年考试中,案例题对该部分内容的考查并不多,虽在综合知识选择题目中经常考查,但分值也不高。本课时内容侧重于对知识点的记忆和理解,按照以往的出题规律,通信系统架构设计基础知识点多来源于教材内的基础网络设备、网络架构和教材外最新时事热点技术。本课时知识

线性代数|机器学习-P36在图中找聚类

文章目录 1. 常见图结构2. 谱聚类 感觉后面几节课的内容跨越太大,需要补充太多的知识点,教授讲得内容跨越较大,一般一节课的内容是书本上的一章节内容,所以看视频比较吃力,需要先预习课本内容后才能够很好的理解教授讲解的知识点。 1. 常见图结构 假设我们有如下图结构: Adjacency Matrix:行和列表示的是节点的位置,A[i,j]表示的第 i 个节点和第 j 个

Node.js学习记录(二)

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件