注:此文适合于对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
我们利用match返回DynamicImage数据,这个DynamicImage是image的一个枚举数据,它拥有转换的功能,我们使用to_rgba8()函数,返回一个rgbaImage数据,rgbaIMage包含:
ImageBuffer
得到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)