You need to enable JavaScript to run this app.
导航
自动布局画布
最近更新时间:2023.11.21 14:51:31首次发布时间:2023.11.21 14:51:31

我们提供了工具类 ARSessionCanvasLayoutHelper 来帮助你进行画布(Canvas)元素的布局。它可以帮助你实现画面填充整个窗口,或者按采集到的图像的比例进行展示等功能。
ARSessionCanvasLayoutHelper 使用 ARSessionARCanvasLayout 进行初始化:
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
        }
    });
    

你也可以通过 ARSessionCanvasLayoutHelperupdateLayout 方法来更新画布布局:

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

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

canvasLayoutHelper.dispose();