首页 > 其他分享 >动态尺寸加载libpag文件白边问题解决方案

动态尺寸加载libpag文件白边问题解决方案

时间:2024-03-25 15:47:34浏览次数:30  
标签:canvas 1080 pgFile 白边 height 1920 libpag pag 加载

  加载pag文件时,最理想的情况是canvas的宽高和pag资源文件的宽高一致,或比例一致。否则就会出现四周白边(页面底色),除非是按平铺的样式进行设置(源码暂未找到对应方法)。

  而对于页面宽高不定的情况下,就无法保证pag文件能适配页面,如果pag文件底色和父级页面底色不一致,就会表现出来(所以底色改成一致也算是一种解决方案)。

  那么在页面宽高不定(宽高不写死)的情况下,如果想达到内容填满的情况(不拉伸),就需要对canvas进行补全,示例代码:

 1 drawPag: async function() {
 2         $("#pag").css('width','100%')
 3         $("#pag").css('height','100%')
 4         const canvas = document.getElementById('pag');
 5         // pgFile.setContentSize($("#pag").width(),$("#pag").height())左上角开始计算,导致多余部分被剪切
 6         // 计算宽度比1920和高度比1080,取较大值,然后等比例放大另一边,以达到始终能填满
 7         const _w = $("#pag").width()
 8         const _h = $("#pag").height()
 9         if (_w/1920 > _h/1080) {
10             // pgFile.setContentSize(_w, 1080 * _w/1920)
11             $("#pag").height(1080 * _w/1920)
12         } else {
13             // pgFile.setContentSize(1920 * _h/1080, _h)
14             $("#pag").width(1920 * _h/1080)
15         }
16         // pgFile.setContentSize(1920,1080)
17         canvas.width = pgFile.width();
18         canvas.height = pgFile.height();
19 
20         const pgView = await PG.PAGView.init(pgFile, canvas);
21         pgView.setRepeatCount(Infinity)
22         await pgView.play();
23     }

 主要逻辑:

1. 设为动态样式,以实现加载后修改页面尺寸再次重新计算时仍是动态尺寸的目的,方便下次调用;

2. 获取宽高,与标准宽高比较,比例大者为标准尺寸,将另一边按比例进行放大;

3. canvas内pag文件全屏(正常处理过程,与动态计算无关),init加载。

标签:canvas,1080,pgFile,白边,height,1920,libpag,pag,加载
From: https://www.cnblogs.com/ljwsyt/p/18094569

相关文章

  • 普通的动态加载库 和 显式运行时链接
    静态库:静态库在编译时被链接到你的程序中,因此它们会成为你程序的一部分。这意味着当你运行你的程序时,静态库中的代码已经被包含在你的程序中,因此你的程序可以独立运行,不需要依赖外部库文件。静态库的一个缺点是,它会增加你程序的体积,因为静态库中的代码会被完整地复制到你的......
  • CentOS加载yum源时报错 [Errno 14] HTTP Error 404 - Not Found Trying other mirror.
    报错内容:[[email protected]]#yumrepolistLoadedplugins:fastestmirror,product-id,search-disabled-repos,subscription-managerThissystemisnotregisteredtoRedHatSubscriptionManagement.Youcanusesubscription-managertoregister.Determiningf......
  • Java-Java基础学习(5)-注解和反射以及类的加载过程分析
    4.1注解的理解Annotation是从JDK5.0开始引入的新技术Annotation的作用不是程序本身,可以对程序作出解释(这点和注释comment没什么区别);可以被其他程序(比如:编译器等)读取;Annotation的格式注解是以“@注释名”在代码中存在的,还可以添加一些参数值,例如:@SuppressWarnings(v......
  • 动态控件之UI和数据加载分离
    一、问题说明比如一个弹框页面中包含listbox控件,弹框页面打开时,先进行listbox初始化,然后再进行数据加载,如果数据加载较慢,这里就会出现,弹框一直无法显示出来,直到数据加载完成,赋值给listbox控件,才会显示。_listbox.ItemsSource=data; 二、解决方式解决方式也简单,就是异步,......
  • ant design vue的expandedRowRender点击加载数据
    在AntDesignVue中,Table组件提供了一个expandedRowRender属性,可以用来自定义展开行后显示的内容。如果你想在点击展开行时加载数据,可以在expandedRowRender函数中实现异步数据加载。以下是一个简单的例子,展示了如何在点击展开行时加载数据:<template><a-table:columns="......
  • nodejs 实现 AMD 加载 依赖
    importfsfrom"fs";importpathfrom"path";importvmfrom"vm";exportclassLoadComponent{componentsPath:string=path.resolve("../first/components/");componentName:string="";componentIn......
  • 7、静态文件的加载
    fromflaskimportFlask,render_templateapp=Flask(__name__)@app.route("/")defhello_world():"""静态文件加载,包括图片,css,js.涉及到html的标签,已经函数url_for的使用."""returnrender_template("static.html&quo......
  • vue2/3 - element表格组件el-table实现懒加载树型(上下级)数据、默认展开和隐藏层级,支
    效果图在vue2、vue3项目开发中,使用element饿了么组件库,实现Table表格组件动态懒加载表格数据,可以决定是否自动展开所有2级或3级,也可以点击加载下级数据,可搭配表格的增删改查,数据变化后自动更新列表不会破坏树状的展开和折叠结构。提供详细示例代码,一键复制运行查看效果,稍......
  • Three.js中加载和渲染3D Tiles
    1.引言3DTiles是3DGIS中常见的三维数据格式,能否用Three.js来加载渲染呢?肯定是可以,Three.js只是一个WebGL框架,渲染数据肯定可以,但是加载、解析数据得手动解决有没有一个第三方库解决这个问题呢?有,比如这个:NASA-AMMOS/3DTilesRendererJS:Rendererfor3DTilesinJavascrip......
  • Pytorch | Tutorial-07 保存和加载模型
    这是对Pytorch官网的Tutorial教程的中文翻译。在本节中,我们将了解如何通过保存、加载和运行模型预测来持久保存模型状态。importtorchimporttorchvision.modelsasmodels保存和加载模型权重PyTorch模型将学习到的参数存储在内部状态字典中,称为 state_dict 。这......