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

注:此文适合于对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.hqwc.cn/news/214693.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

哦?是吗|兜兜转转,最后还是选择了盖雅排班系统

在之前发布的和「人效案例集」中&#xff0c;我们为大家呈现了很多关于人效提升的理论方法&#xff0c;以及各家企业的人效提升提升实践。 回过头来&#xff0c;我们发现&#xff1a;排班管理渗透于人效九宫格之中&#xff0c;也因此成为很多企业人效提升的一个重要中介&#x…

《opencv实用探索·二》根据RGB的像素排列来理解图像深度、像素深度和位深度

通常对于RGB图像主要分为RGB16&#xff0c;RGB24和RGB32。RGB16从高位到低位的排列为R->G->B&#xff0c;RGB24和RGB32从高位到低位的排列为B->G->R。 RGB16: 16 位为一个存储单元&#xff08;一个像素&#xff09;&#xff0c;来存储一个RGB像素;因为人眼对绿色比…

从零学算法400

400.给你一个整数 n &#xff0c;请你在无限的整数序列 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, …] 中找出并返回第 n 位上的数字。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;3 示例 2&#xff1a; 输入&#xff1a;n 11 输出&#xff1a;0 解释&#xff1a;第…

乐得瑞LDR6020 VR串流线方案:实现同时充电传输视频信号

VR&#xff08;Virtual Reality&#xff09;&#xff0c;俗称虚拟现实技术&#xff0c;是一项具有巨大潜力的技术创新&#xff0c;正在以惊人的速度改变我们的生活方式和体验&#xff0c;利用专门设计的设备&#xff0c;如头戴式显示器&#xff08;VR头盔&#xff09;、手柄、定…

Android Studio 显示build variants工具栏

工具栏&#xff1a; 如下图所示 依次点击View-->ToolWindows-->Build Variants。 在此记个笔记

P8 C++引用

前言 本期我们要讲的是 C 中的引用。 上期我们讨论了指针&#xff0c;如果你没有看过那期内容&#xff0c;你一定要回去看看&#xff0c;因为引用实际上只是指针的扩展&#xff0c;你至少需要在基本层面上理解指针是如何工作的&#xff0c;然后才能继续学习本期的内容&#xf…

「Whale 帷幄」连续入选科技榜单,AGI 冲击波正在加速行业洗牌

以 AGI 为底座&#xff0c;品牌 MarTech 正在经历一场前所未有的深度变革。 近日&#xff0c;弯弓研究院发布「中国 MarTech 500 强榜单」&#xff0c;以 2023 中国营销技术&#xff08;MarTech&#xff09;生态为研究对象&#xff0c;洞察行业现象与未来趋势。作为品牌数字化…

Coded Block Pattern

Coded Block Pattern简称CBP,在H264协议7.3.2.1中有介绍,CBP表征了MB中的亮度和色度块的残差做DCT后的系数是否为0的情况,CBP可以拆分为CodedBlockLuma和CodedBlockChroma,分别对应亮度和色度块的残差系数是否为0,它们的具体含义后面会做介绍,首先我们要获取CodedBlockLu…

element ui 上传组件实现手动上传

首先需要给上传组件增加http-request属性&#xff0c;这个方法中可以获取到文件&#xff0c;并按照自己的方式进行上传。 <el-uploadreffileUploadaction#:http-requesthttpRequest:on-preview"handlePreview":on-remove"handleRemove":limit"1&q…

【数据分享】2023年我国省市县三级的瞪羚企业数量(免费获取/Excel/Shp格式)

企业是经济活动的参与主体。一个城市的企业数量决定了这个城市的经济发展水平&#xff01;比如一个城市的金融企业较多&#xff0c;那这个城市的金融产业肯定比较发达&#xff1b;一个城市的制造业企业较多&#xff0c;那这个城市的制造业肯定比较发达。 之前我们给大家分享了…

标题导航点击导航滑动到指定位置滑动到指定位置选中对应导航vue3

菜单导航栏点击导航滑动到指定位置&滑动到指定位置选中对应导航 效果 实现 话不多说直接上代码&#xff0c;有用素质三连(点赞、评论、加关注) import { defineComponent, onBeforeUnmount, onMounted, reactive, ref } from "vue"; import { map } from &quo…

加入华为云鲲鹏极简开发创造营,激活创造力,探索无限可能!

数字经济时代&#xff0c;速度、效率、质量安全已成为各行业告诉拓新发展的关键&#xff0c;华为云不断打磨敏捷安全开发的软件平台&#xff0c;为更高效率的生产力变革积蓄能量。 在刚刚过去不久的2023华为全联接大会上&#xff0c;华为最新发布了华为云CodeArts与鲲鹏DevKit…