当前位置：首页 > news >正文

＜Rust＞＜iced＞＜resvg＞基于rust使用iced构建GUI实例：使用resvg库实现svg转png

news 来源：原创 2024/7/7 22:07:53

前言
本文是使用rust库resvg来将svg图片转为png图片。

环境配置
系统：windows
平台：visual studio code
语言：rust
库：resvg

代码分析

resvg是一个基于rust的svg渲染库，其官方地址：
An SVG rendering library

resvg库的核心是svg的渲染，但本文暂且不关注如何渲染svg，本文关注如何将svg转为png格式，官方有提供演示代码。

本文参考官方示例，将代码稍作修改，并结合rust的文件库rfd，编写一个简单的程序，可以导入svg图片，然后转为png图片，并保存。

首先看一下核心的转换代码：
官方代码：

fn main() {let args: Vec<String> = std::env::args().collect();if args.len() != 3 {println!("Usage:\n\tminimal <in-svg> <out-png>");return;}let tree = {let mut opt = usvg::Options::default();// Get file's absolute directory.opt.resources_dir = std::fs::canonicalize(&args[1]).ok().and_then(|p| p.parent().map(|p| p.to_path_buf()));opt.fontdb_mut().load_system_fonts();let svg_data = std::fs::read(&args[1]).unwrap();usvg::Tree::from_data(&svg_data, &opt).unwrap()};let pixmap_size = tree.size().to_int_size();let mut pixmap = tiny_skia::Pixmap::new(pixmap_size.width(), pixmap_size.height()).unwrap();resvg::render(&tree, tiny_skia::Transform::default(), &mut pixmap.as_mut());pixmap.save_png(&args[2]).unwrap();
}

本地使用时，简单封装成一个函数，如下：

///
/// svg转png
/// 
pub fn svgtopng(svgpath: &str,destimgpath: &str,
)
{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();
}

转换的程序就好了，然后我们结合rust的GUI库iced来编写一个简单的带UI的转换程序，所以，我们还需要添加iced库，看一下toml文件：

[package]
name = "gui-serial"
version = "0.1.0"
edition = "2021"[dependencies]iced={version="0.12.1"}
iced_widget={version="0.12.3",features=[]}
serialport="4.3.0"
clap="4.5.7"image="0.25.1"resvg={version="0.42.0",features=[]}

关于iced以及rfd库的使用，此处不再赘述，可以参考本人的另外的博文：
Rust UI开发（三）：iced如何打开图片（对话框）并在窗口显示图片？

我直接把主程序的代码贴在这：

use std::{io::{self,Write}, process::CommandArgs};use eximg::codecs::png;
use imgtoicon::image_to_icon;
use resvg::usvg::filter::Merge;
use serialport::{DataBits,StopBits,Parity};
//use clap::{value_parser, Arg, ArgAction, Command};
mod ser;
mod imgtoicon;
mod resvgpro;
use iced::{Application, Command, Element, Font, Renderer, Settings, Subscription};
use iced_widget::{container,button,text,column,row,svg,image};use rfd::FileDialog;extern  crate resvg;
extern crate image as eximg;#[derive(Debug,Clone)]
enum Message{Cvt,Open,Save,
}
struct Serial{portname:String,baudrate:u32,databits:DataBits,stopbits:StopBits,parity:Parity,timeout:u64,openfile:String,destfile:String,
}
fn main() ->iced::Result {let myicon=imgtoicon::image_to_icon("..\\gui-serial\\img\\mainicon4.png");let myfont="微软雅黑";Serial::run(Settings{id:Some("mw".to_string()),window:iced::window::Settings{size:iced::Size{width:800.0,height:600.0},min_size:Some(iced::Size { width: 200.0, height: 200.0 }),max_size:Some(iced::Size { width: 1000.0, height: 800.0 }),position:iced::window::Position::Specific(iced::Point::new(100.0,100.0)),icon:Some(myicon),level:iced::window::Level::Normal,..Default::default()},default_font:Font::with_name(myfont),..Default::default()})}impl Application for Serial{type Executor = iced::executor::Default;type Message = Message;type Flags = ();type Theme = iced::Theme;fn new(flags: Self::Flags) -> (Self, Command<Self::Message>) {(Self{portname:String::from("COM1"),baudrate:9600,databits:DataBits::Eight,stopbits:StopBits::One,parity:Parity::None,timeout:1000,openfile:String::from(""),destfile:String::from(""),},Command::none())}fn title(&self) -> String {String::from("串口调试工具-rs")}fn update(&mut self, message: Self::Message) -> Command<Self::Message> {match message{Message::Cvt=>{resvgpro::svgtopng(&self.openfile,&self.destfile)}Message::Open=>{if let Some(file)=FileDialog::new().set_title("打开文件").add_filter("svg", &["svg"]).pick_file(){self.openfile=file.display().to_string();}else{println!("打开文件失败")};}Message::Save=>{if let Some(file)=FileDialog::new().set_title("保存文件").add_filter("png", &["png"]).save_file(){let filestr=file.display().to_string();resvgpro::svgtopng(&self.openfile, &filestr);self.destfile=filestr;}else{println!("保存文件失败")};}}Command::none()}fn subscription(&self) -> Subscription<Self::Message> {Subscription::none()}fn view(&self) -> Element<'_, Self::Message, Self::Theme, crate::Renderer> {//let btn1=button("转换").on_press(Message::Cvt);let btn2=button("打开").on_press(Message::Open);let btn3=button("转换并保存").on_press(Message::Save);let svghandle=svg::Handle::from_path(&self.openfile);let pnghandle=image::Handle::from_path(&self.destfile);let col1=column![btn2,text(format!("打开文件路径:{}",&self.openfile)).size(15),btn3,text(format!("保存文件路径:{}",&self.destfile)).size(15),//btn1,row![svg(svghandle).content_fit(iced::ContentFit::Contain).width(300),image(pnghandle).content_fit(iced::ContentFit::Contain).width(300),].padding(5).spacing(20),].padding(5).spacing(5);let cont=container(col1).padding(5);cont.into()}
}