<Rust><iced>在iced中显示gif动态图片的一种方法

news2024/10/5 20:21:02

前言
本文是在rust的GUI库iced中在窗口显示动态图片GIF格式图片的一种方法。

环境配置
系统:window
平台:visual studio code
语言:rust
库:iced、image

概述

在iced中,提供了image部件,从理论上说,image是支持gif图片的,但是如果你直接将gif的图片路径提供给image,获取图片的handle数据,然后在UI上显示这个image,是无法显示动态图片的,通常,这种情况下,只会显示gif图片的第一帧。

看下面的示例:
在这里插入图片描述
上面这张gif图片,如果直接使用下面的显示方式:

let imghandle=image::Handle::from_path(&self.imgfile); 
        let img1=image(imghandle).content_fit(iced::ContentFit::Contain);

效果如下:
在这里插入图片描述
如上图的左边,image部件只会显示这个gif的第一帧。而右边的图片则是动态的,下面我就来说一下让gif动态显示的方法。

事实上,这个方法是一种间接的方法,iced库的作者提供了一个方法,即使用Subscription来订阅window::frame事件:

let sub_f=iced::window::frames().map(Message::Tick);

这个事件会根据当前系统硬件来刷新,它触发的就是窗口的重绘。
它返回的数据是Instant,是iced中的time的时刻数据,即当前的时间片。

所以,我们根据这个实时刷新的机制,就可以来显示动态的图形,包括gif。
具体逻辑是这样的,先使用image库来获取gif图片的底层数据:

let gf=std::io::BufReader::new(std::fs::File::open("..\\pidpid\\imgout\\pidpid.gif").unwrap()); 
                let mut g1=eximg::codecs::gif::GifDecoder::new(gf).unwrap();
                let g2=g1.into_frames().collect_frames().expect("msg");

如上,g2是gif图片的数据集合,其类型是Vec< Frame>,Frame即gif的每一帧图片。
我们通过索引来获取g2中的每一帧Frame,然后将Frame转为Vec< u8>格式,即图片转为字节数组格式。

这样一来,我们就可以使用iced中的image部件的from_pixels函数,来通过字节数组显示图片:

let imghandle2=image::Handle::from_pixels(200, 200, self.pixpix.clone()); 
        let img2=image(imghandle2).content_fit(iced::ContentFit::Contain);

这样,我们就通过将gif图片分割,然后将每一帧单独显示到image部件,再通过订阅window::frame来修改gif数据组的索引,以此来显示gif的不同帧:

  let gf=std::io::BufReader::new(std::fs::File::open("..\\pidpid\\imgout\\pidpid.gif").unwrap());    
                let mut g1=eximg::codecs::gif::GifDecoder::new(gf).unwrap();
                let g2=g1.into_frames().collect_frames().expect("msg");
        
                if self.pixnum >7{
                    self.pixnum=0;
                }
                self.pixpix=g2[self.pixnum].buffer().to_vec();

                self.pixnum +=1;

这就是间接实现iced中显示动态gif图片的一种方法,看下实际演示:
稍后添加

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1850098.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于51的单片机GPS定位系统设计

一.硬件方案 本设计主要是制作出一款基于51单片机的GPS定位器&#xff0c;根据设计需求&#xff0c;硬件部分主要由51单片机GPS定位模块LCD12864液晶LED指示灯3.3V稳压电路天线设计而成&#xff1b; 二.设计功能 &#xff08;1&#xff09;单片机选用&#xff1a;51单片机(S…

MQ~消息队列能力、AMQP协议、现有选择(Kafka、RabbitMQ、RocketMQ 、Pulsar)

消息队列 消息队列看作是一个存放消息的容器&#xff0c;当我们需要使用消息的时候&#xff0c;直接从容器中取出消息供自己使用即可。由于队列 Queue 是一种先进先出的数据结构&#xff0c;所以消费消息时也是按照顺序来消费的。 常⽤的消息队列主要这 五 种&#xff0c;分别…

Python星载气溶胶数据处理与反演分析

在当前全球气候变化和环境污染问题日益突出的背景下&#xff0c;气溶胶研究显得尤为重要。气溶胶在大气中由直径范围在0.01微米至10微米固体和液体颗粒构成&#xff0c;直接或间接影响地球辐射平衡、气候变化和空气质量。尤其在“碳中和”目标的驱动下&#xff0c;研究气溶胶对…

掌握 Nuxt 3 中的状态管理:实践指南

title: 掌握 Nuxt 3 中的状态管理&#xff1a;实践指南 date: 2024/6/22 updated: 2024/6/22 author: cmdragon excerpt: 摘要&#xff1a;该文指南详述了Nuxt 3的概况与安装&#xff0c;聚焦于在Nuxt 3框架下运用Vuex进行高效的状态管理&#xff0c;涵盖基础配置、模块化实…

vue实现post请求接口流式输出数据sse

使用fetchEventSource 参考git源码&#xff1a;https://github.com/Azure/fetch-event-source/tree/main 本地联通 发现数据并没有流式输出&#xff1a;vue代理需要关闭compress 如下&#xff1a; devServer:{proxy:{},compress:false } 安装插件 npm install microsoft/f…

深入理解Python中的并发与异步的结合使用

​ 在上一篇文章中&#xff0c;我们讨论了异步编程中的性能优化技巧&#xff0c;并简单介绍了trio和curio库。今天&#xff0c;我们将深入探讨如何将并发编程与异步编程结合使用&#xff0c;并详细讲解如何利用trio和curio库优化异步编程中的性能。 文章目录 并发与异步编程的区…

鸿蒙HarmonyOS NEXT角落里的知识:ArkTS高性能编程实践

概述 本文主要提供应用性能敏感场景下的高性能编程的相关建议&#xff0c;助力开发者开发出高性能的应用。高性能编程实践&#xff0c;是在开发过程中逐步总结出来的一些高性能的写法和建议&#xff0c;在业务功能实现过程中&#xff0c;我们要同步思考并理解高性能写法的原理…

AMSR/ADEOS-II L1A Raw Observation Counts V003地球表面和大气微波辐射的详细观测数据

AMSR/ADEOS-II L1A Raw Observation Counts V003 简介 AMSR/ADEOS-II L1A Raw Observation Counts V003数据是由日本航空航天研究开发机构&#xff08;JAXA&#xff09;的AMSR (Advanced Microwave Scanning Radiometer)仪器收集的一组原始观测计数数据。这些数据是从ADEOS-I…

2024年高压电工证考试题库及高压电工试题解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年高压电工证考试题库及高压电工试题解析是安全生产模拟考试一点通结合&#xff08;安监局&#xff09;特种作业人员操作证考试大纲和&#xff08;质检局&#xff09;特种设备作业人员上岗证考试大纲随机出的高压…

第2章 Android应用的界面编程

&#x1f308;个人主页&#xff1a;小新_- &#x1f388;个人座右铭&#xff1a;“成功者不是从不失败的人&#xff0c;而是从不放弃的人&#xff01;”&#x1f388; &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd; &#x1f3c6;所属专栏&#xff1…

高通安卓12-Input子系统

1.Input输入子系统架构 Input Driver(Input设备驱动层)->Input core(输入子系统核心层)->Event handler(事件处理层)->User space(用户空间) 2.getevent获取Input事件的用法 getevent 指令用于获取android系统中 input 输入事件&#xff0c;比如获取按键上报信息、获…

04_FFmpeg常用API及内存模型

【说明】课程学习地址&#xff1a;https://ke.qq.com/course/468797 FFmpeg内存模型 FFmpeg内存模型 int avcodec_send_packet(AVCodecContext *avctx, const AVPacket *avpkt); int avcodec_receive_frame(AVCodecContext *avctx, AVFrame *frame);问题(数据的申请和释放): …

Python高效内存访问,memoryview这个神器你值得拥有!

目录 1、初识memoryview 🌀 1.1 memoryview基础介绍 1.2 为何使用memoryview优化内存访问 1.3 创建memoryview对象实战 示例1:基于bytes创建memoryview 示例2:修改memoryview中的数据 示例3:memoryview与切片 2、深入理解memoryview操作 🔄 2.1 访问与修改数据…

【Java】已解决java.nio.channels.FileLockInterruptionException异常

文章目录 一、分析问题背景二、可能出错的原因三、错误代码示例四、正确代码示例 已解决java.nio.channels.FileLockInterruptionException异常 在Java NIO&#xff08;New I/O&#xff09;中&#xff0c;java.nio.channels.FileLockInterruptionException是一个特殊的异常&am…

tedsign vue3 web-端框架中封装一个验证码组件 以及对应node 接口逻辑说明

一个这样的组件 我直接上代码了 <template><t-loading size"small" :loading"loading" show-overlay><div class"container" click"refresh"><div v-if"svg" class"svg" v-html"svg&…

VUE3脚手架工具cli配置搭建及创建VUE工程

1、VUE的脚手架工具(CLI&#xff09; 开发大型vue的时候&#xff0c;不能通过html编写一个大型的项目&#xff0c;这个时候需要用到vue的脚手架工具 通过vue的脚手架&#xff0c;可以快速的生成vue工程 1.1、安装nodejs和npm 【下载nodejs】 https://nodejs.org/en 【安装…

高通安卓12-安卓系统定制2

将开机动画打包到system.img里面 在目录device->qcom下面 有lito和qssi两个文件夹 现在通过QSSI的方式创建开机动画&#xff0c;LITO方式是一样的 首先加入自己的开机动画&#xff0c;制作过程看前面的部分 打开qssi.mk文件&#xff0c;在文件的最后加入内容 PRODUCT_CO…

python爬虫学习笔记一(基本概念urllib基础)

学习资料&#xff1a;尚硅谷_爬虫 学习环境: pycharm 一.爬虫基本概念 爬虫定义 > 解释1&#xff1a;通过程序&#xff0c;根据URL进行爬取网页&#xff0c;获取有用信息 > 解释2&#xff1a;使用程序模拟浏览器&#xff0c;向服务器发送请求&#xff0c;获取相应信息…

某程序员:30岁了,老婆管钱,背着我买了50万股票,亏了20w,强制她清仓后又买了36万

“辛辛苦苦攒了几年钱&#xff0c;本想买房买车&#xff0c;结果全被老婆炒股亏掉了&#xff01;” 近日&#xff0c;一位30岁的程序员大哥在网上吐苦水&#xff0c;引发了网友们的热议。 这位程序员大哥和妻子结婚后&#xff0c;一直秉持着“男主外&#xff0c;女主内”的传统…

C++——位图的介绍和使用

位图的介绍 位图的引入 给40亿个不重复的无符号整数&#xff0c;没排过序。给一个无符号整数&#xff0c;如何快速判断一个数是否在这40亿个数中&#xff1f; 要判断一个数是否在某一堆数中&#xff0c;我们可能会想到如下方法&#xff1a; 将这一堆数进行排序&#xff0c…