动态尺寸加载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加载。
FIGHTING