888974111 发表于 2025-2-6 13:10:47

[rustGUI][iced]基于rust的GUI库iced(0.13)的部件学习(05):svg图片转为png格式(暨svg部件的使用)

前言
本文是关于iced库的部件介绍,iced库是基于rust的GUI库,作者自述是受Elm启发。
iced目前的版本是0.13.1,相较于此前的0.12版本,有较大改动。
本合集是基于新版本的关于分部件(widget)的使用介绍,包括源代码介绍、实例使用等。
环境配置
系统:window10
平台:visual studio code
语言:rust
库:iced 0.13
扩展库:iced_aw
svg转png

在之前的第一篇博文中,就说过图片格式的转换,主要是将png转为icon,以便于获取图片作为iced窗口的图标。
我们使用了一个图片处理库image,我们需要添加依赖:
cargo add image然后导入时为了不与iced本身的image产生冲突,因此可以重新命名:
extern crate image as eximg不过,外部image库并不支持直接转换svg格式,所以我们将使用另一个库,用于处理svg图片:
cargo add resvg
1、iced中显示svg

在iced中,如果要显示svg图片,如同添加image部件一样,需要先开启features:
iced={version ="0.13.1",features = ["svg","image"]}然后在主程序中导入svg:
use iced::widget::{button, column, row, svg, text,container};显示svg图片与显示png图片一样,我们在view函数中编写:
let svghandle=svg::Handle::from_path(self.srcpath.as_str());let svgcolor=Color::parse("#56F25EFF").unwrap();let svg1=svg(svghandle).content_fit(iced::ContentFit::Contain)         .style(move |t,s|styles::mysvgstyle(t,s,svgcolor));可以看到,svg的参数也是Handle,与image是一样的,但是二者的struct构成有所区别。
官方源码

/// A handle of Svg data.#pub struct Handle {    id: u64,    data: Arc<Data>,}我们去网站上下载一张svg格式的图片,比如:

我们在iced窗口中显示,由于svg图片是矢量图形,我们可以设置一个背景色,以便于观察:

hover状态:

2、svg转png

说一下本文的思路,使用resvg库将svg图片转为字节数组,字节数组作为通用格式,使用image库将其转为png格式。
基本上,这是一个很简单好用的思路,无论什么格式的图片,都能够转为比较底层的数据,即字节数组,这也是非常通用的数据格式,只要能处理字节数组,就能够还原其图像数据。
所以,我们的转换的中转站,就是Vec<u8>。
我们在此前的博文里,创建过一个imgconvert.rs,添加了imgtoico函数,现在,我们可以在此文件中再创建一个函数:
////// svg转png/// pub fn svgtoimg(    svgpath: &str,    destimgpath: &str,) ->Result<(), eximg::ImageError>{    let mut opt=resvg::usvg::Options::default();    opt.resources_dir=std::fs::canonicalize(svgpath)                                 .ok()                                 .and_then(|p| p.parent().map(|p| p.to_path_buf()));    opt.fontdb_mut().load_system_fonts();    let svgdata=std::fs::read(svgpath).unwrap();    let tree=resvg::usvg::Tree::from_data(&svgdata,&opt).unwrap();    let pixmap_size = tree.size().to_int_size();    let mut pixmap = resvg::tiny_skia::Pixmap::new(pixmap_size.width(), pixmap_size.height()).unwrap();    resvg::render(&tree, resvg::tiny_skia::Transform::default(), &mut pixmap.as_mut());    //pixmap.save_png(destimgpath).unwrap();    let pp=pixmap.encode_png().unwrap();    let img=eximg::ImageReader::new(std::io::Cursor::new(pp))                                        .with_guessed_format()?.decode()?;    img.save(destimgpath).unwrap();    Ok(())}我们只需要为函数输入源图片即svg图片的路径与目标图片即png图片的路径即可。
此处转换的核心是resvg库,上述函数的部分代码就是resvg的示例代码,直接复制使用即可。基本上用到了resvg的usvg和tiny_skia这两个子库。此处如果想要深入研究,可以去查看resvg的源码,本文不作赘述。(目前我也说不清楚,会用即可)
3、综述

本文,我们实现的是,通过一个导入按钮导入svg图片,然后通过另一个转换按钮转换格式至png,并保存图片。
由于我们会使用到文件对话框以及获取本地日期,所以我们还需要添加两个库:
rfd="0.15.2"chrono = "0.4.39"我们在update函数中编写按钮的逻辑:
   Message::Load =>{                let res=FileDialog::new()                                    .set_title("载入svg")                                    .add_filter("Svg Files",&["svg"])                                    .set_directory("/")                                    .pick_file();                match res {                  Some(path) =>{                        self.srcpath = path.display().to_string();                        self.tipcontent="".to_string();                  },                  None =>{                        self.srcpath =String::new();                                          }                }            }        Message::Convert =>{                if self.srcpath.is_empty() {                  self.tipcontent="请先导入svg文件!".to_string();                }                else{                  self.tipcontent="".to_string();                  let now=Local::now();                  let date_str=now.format("%Y-%m-%d-%H-%M-%S").to_string();                  //println!("转换时间:{}",date_str);                  //获取源图片的父路径                  let mut path = std::path::PathBuf::from(&self.srcpath).parent().unwrap().to_path_buf();                  let imgname="output-".to_string() + date_str.as_str();                  path.push(imgname);                  path.set_extension("png");                  self.dstpath =path.to_str().unwrap().to_string();                  //svg转png函数                  let res=imgconvert::svgtoimg(&self.srcpath, &self.dstpath);                  match res {                        Ok(_) =>{                        },                        Err(e) =>{                            MessageDialog::new()                              .set_title("提示!")                              .set_description(&e.to_string())                              .show();                        }                  }                }            }当我们转换后,会在本地文件夹生成带有日期的png图片。
动态演示:
页: [1]
查看完整版本: [rustGUI][iced]基于rust的GUI库iced(0.13)的部件学习(05):svg图片转为png格式(暨svg部件的使用)