自适应

填充模式

当 PAGView（PAGSurface）和 PAGFile 的尺寸不一致时，会使用填充模式进行适应，默认是 LetterBox 模式。

填充模式：

• None：不缩放，左上角位置开始裁剪；

• LetterBox：黑边，在保持高宽比的情况下缩放到设备的可用屏幕大小，图像不发生变形，如果图片尺寸和填充区域比例不一致，会出现黑边，为默认填充模式；

• Stretch：拉伸，不保持宽高比填充，会发生失变形；

• Zoom：裁剪，在保持高宽比的情况下缩放到完全填满可用的屏幕大小；

Canvas 尺寸变化

通过高清渲染章节中的描述，我们知道 PAGView.init() 默认会使用将 canvas 的宽高设置到 宽高 * dpr ，然后使用 style 将其缩放回原本的尺寸进行展示。

而当我们希望 canvas 是自适应的状态时，简单的填充模式就无法支持了。这个时候我们需要将 PAGView 默认的高清渲染关闭，手动来控制渲染尺寸。

使用 css 控制 canvas 为你期望的自适应状态后，计算 canvas 的尺寸

const styleDeclaration = window.getComputedStyle(canvas, null);
canvas.width = Number(styleDeclaration.width.replace('px', '')) * window.devicePixelRatio;
canvas.height = Number(styleDeclaration.height.replace('px', '')) * window.devicePixelRatio;

然后，初始化 PAGView 时关闭默认的高清渲染

const pagView = await PAG.PAGView.init(pagFile, canvas, { useScale: false });

最后，当 canvas 展示大小发生变化时，重新计算 canvas 的尺寸，并且调用 updateSize 方法

window.onresize = () => {
  const styleDeclaration = window.getComputedStyle(canvas, null);
  canvas.width = Number(styleDeclaration.width.replace('px', '')) * window.devicePixelRatio;
  canvas.height = Number(styleDeclaration.height.replace('px', '')) * window.devicePixelRatio;
  pagView.updateSize();
  pagView.flush();
}