我们提供了工具类 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();