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

<Rust><iced><resvg>基于rust使用iced构建GUI实例:使用resvg库实现svg转png

前言
本文是使用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()}
}

实例演示:
在这里插入图片描述

http://www.lryc.cn/news/379608.html

相关文章:

  • 面试突击:Java 中的泛型
  • 3_2、MFC常用控件用法:组合框、滚动条和图片控件
  • 如何使用gprof对程序进行性能分析
  • 四川汇聚荣科技有限公司靠谱吗?
  • 可灵王炸更新,图生视频、视频续写,最长可达3分钟!Runway 不香了 ...
  • oracle中使用临时表GLOBAL TEMPORARY TABLE
  • Gradio入门—快速开始
  • AOP应用之系统操作日志
  • 海外云手机自动化管理,高效省力解决方案
  • 后仿真中的 《specify/endspecify block》之(5)使用specify进行时序仿真
  • win10/11磁盘管理
  • 【昇思初学入门】第四天打卡
  • 禁用/屏蔽 Chrome 默认快捷键
  • 移动端+PC端应用模式的智慧城管综合执法办案平台源码,案件在线办理、当事人信用管理、文书电子送达、沿街店铺分析
  • AI音乐大模型时代:版权归属与创意产业的新生长点
  • C++函数作为参数
  • 考前刷题练手感(北航期末往年数据结构编程题)
  • Android记录9--实现转盘效果
  • 【Oracle APEX开发小技巧1】转换类型实现显示小数点前的 0 以 及常见类型转换
  • GRIT论文阅读笔记
  • 1980python个性化电影推荐管理系统mysql数据库Django结构layUI布局elasticsearch存储计算机软件工程网页
  • 基于IDEA的Maven(依赖介绍和引用)
  • pytest测试框架pytest-sugar插件生成进度条
  • 若依框架集成微信支付
  • IOS开发学习日记(十七)
  • 【ARMv8/ARMv9 硬件加速系列 2 -- ARM NEON 加速运算介绍】
  • LayoutSystem布局系统
  • 滚球游戏笔记
  • Mysql8死锁排查
  • 程序猿成长之路之数据挖掘篇——决策树分类算法(1)——信息熵和信息增益