Rust UI开发(二):iced中如何为窗口添加icon图标

news2024/11/15 23:29:47

注:此文适合于对rust有一些了解的朋友
iced是一个跨平台的GUI库,用于为rust语言程序构建UI界面。
在这里插入图片描述
想要了解如何构建简单窗口的可以看本系列的第一篇:
Rust UI开发:使用iced构建UI时,如何在界面显示中文字符

本篇是系列第二篇,主要解决一个问题,就是为窗口添加图标icon。

注:窗口图标在其他语言中,应该是非常容易实现的,但iced是一个发展中的库,很多方面还不成熟,我在用iced自己的方法测试window图标,花了很多时间,效果还不好,所以特意记录此篇,一来做个记录,方便以后回看,二来给其他有这方面问题的朋友做个参考。

我们先来看一下iced中对于窗口参数设置里icon的定义:

/// The icon of the window. 
    pub icon: Option<Icon>,

icon参数是一个枚举,枚举类型是Icon
再去看Icon的定义:

/// An window icon normally used for the titlebar or taskbar.
#[derive(Debug, Clone)]
pub struct Icon {
    rgba: Vec<u8>,
    size: Size<u32>,
}

可以看到,这里Icon的数据是rgba数据,是一种图像的数据类型。

rgba是rgb的基础上,另外增加了一个a(阿尔法)通道,表示透明度信息。
也就是说,rgb是[u8,u8,u8],而rgba是[u8,u8,u8,u8]。这里u8指2的8次方即256种颜色值(0-255)。

总的来说,你只要知道在这里,Icon是{rgba,size}组合的数据形式。

所以,如果我们要设置这个icon图标,我们知道,图片应该是rgba格式的,且设置一个尺寸如4848,6464,类似这种。

先看图像的格式,通常如果读取一张图片,数据应该是rgb,所以需要转换。
看下面的代码:

let img_byte=include_bytes!("img3.jpg");       
    //println!("this is:{:?}",img_byte);
    let ico=icon::from_rgba(img_byte.to_owned().into(), 32, 29);
    let ico_file=match ico{
        Ok(file)=>file,
        Err(error)=>panic!("error is {}",error),
    };

这段代码,是利用include_bytes方法,将图像的像素转为一个字节数组。
然后调用iced::window::icon的from_rgba函数,这个函数就是构建一个Icon对象,以rgba的形式,从其他色彩类型转化。
他返回的是一个Result数据,所以需要进行错误处理,然后利用Some(ico_file)返回枚举类型的数据格式,即:
Option。

icon:Some(ico_file) 

这个方法是可行的,我在测试中可以正常启动窗口并显示图片,但是有些问题,首先就是对图片有要求,在测试中遇到两个问题:
一是图片包含像素长度不对,编译器提示无法被4整除,也就是不能分成rgba四个通道,所以会报错。
二是加入图片像素长度可以了,但你的尺寸size设置有问题,举例说明,图片像素字节加起来是120个,除以4就是30,但你的尺寸设置为3232,这就不行,如果把尺寸修改为56,就可以了。

关于上面这个方法,首先它是能够实现在窗口上加载图标的,但是目前我还没有搞清楚图片的像素数据就要是怎么匹配的,导致我在测试中发现,虽然能显示图片,但图片显然和原始图片的图案对不上,也就是像素可能错位了。

第二个方法

所以,我建议使用第二个方法,第二个方法是使用第三方库来处理图片,得到一个完整的rgba图片数据。
这里会用到image库,github地址:

https://github.com/image-rs/image/tree/master

要使用这个库,需要在cargo.toml文件里添加依赖:

image="*"
num-complex="*"

也可以指定版本号。

然后导入:

extern  crate image;
extern crate num_complex;

来看代码:

  //第二种获取rgba图片的方法,利用Image库
    let img2=image::open("../iced_test/src/img3.jpg");    
    let img2_path=match  img2 {
        Ok(path)=>path,
        Err(error)=>panic!("error is {}",error),
    };
    let img2_file=img2_path.to_rgba8();
    let ico2=icon::from_rgba(img2_file.to_vec(), 64, 64);
    let ico2_file=match ico2{
        Ok(file)=>file,
        Err(error)=>panic!("error is {}",error),
    };

这里有个注意的地方,就是image库的open函数,打开图像文件,其参数是图片的路径,但是必须是:

“…/iced_test/src/img3.jpg”

这种形式,如果你写成:

“.iced_test/src/img3.jpg” 或者 “img3.jpg”

image好像会识别错误,它识别的相对路径,必须在前面加上:

…/

image::open函数返回的是一个Result数据:

Result<DynamicImage, ImageError>

我们利用match返回DynamicImage数据,这个DynamicImage是image的一个枚举数据,它拥有转换的功能,我们使用to_rgba8()函数,返回一个rgbaImage数据,rgbaIMage包含:
ImageBuffer<Rgba, Vec>

得到ImageBuffer,可以看到里面包含rgba,我们使用:
to_vec()转为适合的格式,这样ico2就得到想要的rgba格式的Icon了,但ico2还是一个result。我们用match取出Icon即可。

let ico2=icon::from_rgba(img2_file.to_vec(), 64, 64); 
let ico2_file=match ico2{  
        Ok(file)=>file,
        Err(error)=>panic!("error is {}",error),
    };

然后window的Settings中:

 icon:Some(ico2_file)

这样就可以了,看一下实际窗口效果:
图标图片:
在这里插入图片描述
实际窗口:
在这里插入图片描述
可以看到,窗口的icon图标正常显示了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1249377.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

量子计算的发展

目录 一、量子力学的发展历程二、量子计算的发展历程三、量子计算机的发展历程四、量子信息科学的发展 一、量子力学的发展历程 量子力学是现代物理学的一个基本分支&#xff0c;它的发展始于20世纪初。以下是量子力学发展的几个重要阶段&#xff1a; 普朗克&#xff08;1900&…

ubuntu环境删除qtcreator方法

文章目录 方法1方法2方法3参考不同的安装方法,对应不同的删除方法 方法1 apt-get或者dpkg 方法2 QtCreatorUninstaller 方法3 MaintenanceTool

机器学习【02】在 Pycharm 里使用 Jupyter Notebook

只有 Pycharm 的 Professional 版才支持 Jupyter Notebook 本教程结束只能在pycharm中使用&#xff0c;下载的库在pycharm选中的虚拟环境中 ssh -L localhost:9999:localhost:8888 usernameip这句话每次都要用 准备 1.服务器安装jupyter sudo snap install jupyter2.在 Jup…

39 关于 binlog 日志

前言 bin log 相关 呵呵 记得之前是做过基于 binlog 的数据同步到的, 这里 可以来了解一下 binlog 的产生, 以及 相关更加详细的信息 说不定 之后也可以 做一个 binlog 的解析工具 这里 来看一下 各个常见的 binlog event 的相关格式 open-replicator 解析binlog失败 a…

npm pnpm yarn(包管理器)的安装及镜像切换

安装Node.js 要安装npm&#xff0c;你需要先安装Node.js。 从Node.js官方网站&#xff08;https://nodejs.org&#xff09;下载并安装Node.js。 根据你的需要选择相应的版本。 一路Next&#xff0c;直到Finish 打开CMD&#xff0c;输入命令来检查Node.js和npm是否成功安装 nod…

C语言-指针讲解(3)

文章目录 1.字符指针变量1.1 字符指针变量类型是什么1.2字符指针变量的两种使用方法&#xff1a;1.3字符指针笔试题讲解1.3.1 代码解剖 2.数组指针变量2.1 什么是数组指针2.2 数组指针变量是什么&#xff1f;2.2.3 数组指针变量的举例 2.3数组指针和指针数组的区别是什么&#…

AI模型训练——入门篇(一)

前言 一文了解NLP&#xff0c;并搭建一个简单的Transformers模型&#xff08;含环境配置&#xff09; 一、HuggingFace 与NLP 自从ChatGPT3 问世以来的普及性使用&#xff0c;大家或许才真正觉察AI离我们已经越来越近了&#xff0c;自那之后大家也渐渐的开始接触stable diff…

vue+springboot读取git的markdown文件并展示

前言 最近&#xff0c;在研究一个如何将我们git项目的MARKDOWN文档获取到&#xff0c;并且可以展示到界面通过检索查到&#xff0c;于是经过几天的摸索&#xff0c;成功的研究了出来 本次前端vue使用的是Markdown-it Markdown-it 是一个用于解析和渲染 Markdown 标记语言的 …

虹科Pico汽车示波器 | 汽车免拆检修 | 2011款瑞麒M1车发动机起动困难、加速无力

一、故障现象 一辆2011款瑞麒M1车&#xff0c;搭载SQR317F发动机&#xff0c;累计行驶里程约为10.4万km。该车因发动机起动困难、抖动、动力不足、热机易熄火等故障进厂维修。用故障检测仪检测&#xff0c;发动机控制单元&#xff08;ECU&#xff09;中存储有故障代码“P0340相…

C#/.NET/.NET Core推荐学习书籍(已分类)

前言 古人云&#xff1a;“书中自有黄金屋&#xff0c;书中自有颜如玉”&#xff0c;说明了书籍的重要性。作为程序员&#xff0c;我们需要不断学习以提升自己的核心竞争力。以下是一些优秀的C#/.NET/.NET Core相关学习书籍&#xff0c;值得.NET开发者们学习和专研。书籍已分类…

Vue3框架中让table合计居中对齐

第一步&#xff1a;给它加一个类名 center-table 如下&#xff1a; <el-table:data"datas.shows"max-height"600px"show-summarystripeborderstyle"width: 100%":header-cell-style"{ textAlign: center }":cell-style"{ text…

java - 选择排序

一、什么是选择排序 选择排序&#xff08;Selection sort&#xff09;是一种简单直观的排序算法。它的基本思想是每次从待排序的元素中选择最小&#xff08;或最大&#xff09;的元素&#xff0c;将其放到已排序序列的末尾&#xff0c;直到所有元素排序完成。 具体步骤如下&…

LemMinX-Maven:帮助在eclipse中更方便地编辑maven的pom文件

LemMinX-Maven&#xff1a;https://github.com/eclipse/lemminx-maven LemMinX-Maven可以帮助我们在eclipse中更方便地编辑maven工程的pom.xml文件&#xff0c;例如补全、提示等。不用单独安装&#xff0c;因为在安装maven eclipse插件的时候已经自动安装了&#xff1a; 例…

第97步 深度学习图像目标检测:RetinaNet建模

基于WIN10的64位系统演示 一、写在前面 本期开始&#xff0c;我们继续学习深度学习图像目标检测系列&#xff0c;RetinaNet模型。 二、RetinaNet简介 RetinaNet 是由 Facebook AI Research (FAIR) 的研究人员在 2017 年提出的一种目标检测模型。它是一种单阶段&#xff08;o…

【Linux基础】Linux常见指令总结及周边小知识

前言 Linux系统编程的学习我们将要开始了&#xff0c;学习它我们不得不谈谈它的版本发布是怎样的&#xff0c;谈它的版本发布就不得不说说unix。下面是unix发展史是我在百度百科了解的 Unix发展史 UNIX系统是一个分时系统。最早的UNIX系统于1970年问世。此前&#xff0c;只有…

两年功能五年自动化测试面试经验分享

最近有机会做一些面试工作&#xff0c;主要负责面试软件测试人员招聘的技术面试。 之前一直是应聘者的角色&#xff0c;经历了不少次的面试之后&#xff0c;多少也积累一点面试的经验&#xff0c;现在发生了角色转变。初次的面试就碰到个工作年限比我长的&#xff0c;也没有时…

ubuntu22.04 arrch64版操作系统编译zlmediakit

脚本 系统没有cmake&#xff0c;需要通过apt先进行下载&#xff0c;下面的脚本已经包含了 # 安装依赖 gcc-c.x86_64 这个不加的话会有问题 sudo yum -y install gcc gcc-c libssl-dev libsdl-dev libavcodec-dev libavutil-dev ffmpeg git openssl-devel gcc-c.x86_64 ca…

R语言如何实现多元线性回归

输入数据 先把数据用excel保存为csv格式放在”我的文档”文件夹 打开R软件,不用新建,直接写 回归计算 求三个平方和 置信区间(95%)

springboot 返回problem+json

spring所有配置都在WebMvcAutoConfiguration中 其中有 ProblemDetailsExceptionHandler 容器中的一个组件 -ControllerAdvice用来集中处理异常的 -点进ResponseEntityExceptionHandler 包含这些异常&#xff0c;如果出现以下异常&#xff0c;会被springboot支持以RFC 7807规…

2022年03月 Scratch(三级)真题解析#中国电子学会#全国青少年软件编程等级考试

Scratch等级考试(1~4级)全部真题・点这里 一、单选题(共25题,每题2分,共50分) 第1题 以下四个选项中,运行哪个积木块,可能得到523这个数值? A: B: C: D: 答案:B 四个选项都遵循统一的公式:随机数ⅹ10+3=523,因此可以得出随