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

  加载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加载。

  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值