自动布局画布

我们提供了工具类 ARSessionCanvasLayoutHelper 来帮助你进行画布（Canvas）元素的布局。它可以帮助你实现画面填充整个窗口，或者按采集到的图像的比例进行展示等功能。
ARSessionCanvasLayoutHelper 使用 ARSession 和 ARCanvasLayout 进行初始化：
ARCanvasLayout 可选 3 种：

• fill-window 将画布填充满整个窗口：

  import {
      ARSessionCanvasLayoutHelper
  } from "@volcengine/webar";
  
  const canvasLayoutHelper = new ARSessionCanvasLayoutHelper(session, {
      type: "fill-window"
  });
  

• fixed-size 固定大小：

  import {
      ARSessionCanvasLayoutHelper
  } from "@volcengine/webar";
  
  const canvasLayoutHelper = new ARSessionCanvasLayoutHelper(session, {
      type: "fixed-size",
      size: {
          width: 640,
          height: 360
      }
  });
  

• aspect-fitting 固定比例：按照接受到的画面的比例，设置画布大小。画布最大不会超过 boundingSize 所指定的大小。在没有接受到画面时按照 defaultAspectRatio 的比例进行布局。

  import {
      ARSessionCanvasLayoutHelper
  } from "@volcengine/webar";
  
  const canvasLayoutHelper = new ARSessionCanvasLayoutHelper(session, {
      type: "aspect-fitting",
      boundingSize: {
          width: 640,
          height: 640
      },
      defaultAspectRatio: {
          width: 16,
          height: 9
      }
  });
  

你也可以通过 ARSessionCanvasLayoutHelper 的 updateLayout 方法来更新画布布局：

// 更新画布布局为充满窗口
// Update the layout to "fill-window"
canvasLayoutHelper.updateLayout({
    type: "fill-window" 
});

最后，当你不再想要使用 ARSessionCanvasLayoutHelper 时，请调用它的 dispose 方法来释放资源。

canvasLayoutHelper.dispose();