世界坐标系

在白板上绘制的各种图形，都是以世界坐标系存储的。世界坐标系是一个虚拟坐标系。屏幕上显示的白板内容，其实是世界坐标系中一部分内容的投影。在白板内容，用centerX, centerY, width, height四个变量表示其展示的世界坐标系的范围。

白板初始世界坐标系以（0，0）为中心。若用户使用平移工具拖动白板，则centerX, centerY也会随之变化。若用户使用鼠标滚轮控制白板缩放，则centerX, centerY, width, height都会随之变化。

观看模式

房间内用户可能处于下面三种视角模式中的一种：

1. 主播模式：能主动调整视角，并会将自己视角同步给其他用户
2. 跟随模式：视角随主播变化
3. 自由模式：能自由变化视角。视角不会影响其他角色

默认情况下，所有用户均为自由视角。当任一用户切换为主播时，剩下人会自动切换为跟随者。主播切换为自由模式后，其他用户自动切换为自由模式。若用户处于跟随状态，需要先切换为自由模式，才能够调整视角。

观看模式调整

工具栏配置

用户可以通过配置工具栏，并点击调整视角：

jsitems: [
    //其他工具
    {
        tool: 'visionControl',
        hint: '视角同步'
    },
    {
        tool: 'visionLock',
        hint: '视角模式切换'
    }
]

也可以调用下面的接口配置观看模式。

设置主播

设置当前用户为主播。其他用户将与当前用户保持视角同步。

jsdrawPlugin.setSelfAsBroadcaster()

取消主播

停止视角同步

jsdrawPlugin.unsetSelfAsBroadcaster()

设置为跟随者

当页面中存在主播时，可以在自由观看和跟随模式中切换。若处于自由模式，可以调用setSelfAsFollower切换回跟随模式

jsdrawPlugin.setSelfAsFollower()

设置为自由视角

当页面中存在主播时，可以在自由观看和跟随模式中切换。若处于跟随模式，可以调用setSelfAsFreeObserver切换回自由模式

jsdrawPlugin.setSelfAsFreeObserver()

视角调整

和其他操作一样，白板也提供了工具栏和接口接入两种方式调整视角。

工具栏配置

js
items: [
    //其他工具
    {
        tool: 'fitToContent',
        hint: '适配内容'
    },
    {
        tool: 'fitToDoc',
        hint: '适配文档'
    },
    {
        tool: 'zoomOut',
        hint: '缩放'
    },
    {
        tool: 'zoomLevel'
    },
    {
        tool: 'zoomIn',
        hint: '缩放'
    },
]

缩放

以当前白板视角中心为瞄点缩放

jsdrawPlugin.zoomIn()
drawPlugin.zoomOut()
/**
 * scale范围为0到1之间的数
 */
drawPlugin.zoomTo(scale: number, animate: boolean)

适配内容

适配白板窗口至包含全部内容

js/**
 * animate: 是否通过动画过渡到重置后的位置
 */
drawPlugin.fitToContent(animate: boolean)

适配文档

适配白板窗口至包含背景图(通过addDoc或者setPageBackground添加的图片)

js/**
 * animate: 是否通过动画过渡到重置后的位置
 */
drawPlugin.fitToDoc(animate: boolean)

resetCamera

重置中心至（0，0），缩放比例至100%

js/**
 * animate: 是否通过动画过渡到重置后的位置
 */
drawPlugin.resetCamera(animate: boolean)

setCameraBound

设置当前白板容器对应的世界坐标系。由于容器宽高和设置的宽高可能不同，因此实际上会保证设置的世界坐标系完全显示在白板容器上，并且宽，或者高完全撑住容器。

有些业务场景需要将白板盖在文档上，并使用白板对文档做标记。为了标记的位置和文档位置能够对应，应该在所有端都使用该函数设置容器对应的世界坐标系位置。注意，需要容器的宽高比都一样才能够让最终的位置对齐

jsdrawPlugin.setCameraBound(bound: {
    centerX: number,
    centerY: number,
    width: number,
    height: number
}, animate: boolean)

disableAutoResize

disableAutoResize控制resize时候的模式。根据disableAutoResize的值不同，白板容器大小改变时有不同的响应方式：

js/*
 * 默认为true
 * true: 容器resize时，容器内元素大小不变
 * false：容器resize时，容器所代表的世界坐标系的宽度不变. 如果是等比例缩放，容器大小变化，则容器内元素内容和容器的相对位置不变
 */
drawPlugin.setAppConfig({
    disableAutoResize: boolean
})

初始视角

为了让所有用户都有一个相同的初始世界坐标系范围，可以在WhiteBoardSDK.getInstance时传入cameraBound。

jsWhiteBoardSDK.getInstance({
    ...otherParams,
    drawPluginParams: {
        cameraBound: {
            centerX: 100,
            centerY: 100,
            width: 1000,
            height: 1000
        }
    }
})

上面的修改只对第一次进入房间时有效。如果用户进入房间后，移动了相机的位置，然后再刷新页面，此时不会回到getInstance时设置的cameraBound中。

在使用webview接入时，以及使用录像回放，录像回放的webview接入时，也需要在初始化参数drawPluginParams中传入cameraBound。

禁止缩放

可以使用下面的命令禁止通过鼠标缩放，平移。

jsdrawPlugin.enableCameraTransform(false)

注意下面的命令并不会禁止通过fitToContent, fitToDoc, resetCamera, zoomIn, zoomOut, zoomTo, setCameraBound等函数对视角的修改。

若要再次准许鼠标缩放，平移，可以再次调用该函数

jsdrawPlugin.enableCameraTransform(true)

标注模式

白板标注是白板的常见使用场景之一。

由于白板的宽高和被标注物不同、白板在不同设备上宽高不同、甚至白板在运行时可以随着窗口调整宽高，导致白板和被标注物之间的相对位置难以对齐。

云信互动白板3.7.3之后，提供接口lockCameraWithContent，使得白板的内容可以始终和被标注物保持对齐。

jsdrawPlugin.lockCameraWithContent({
    width: number,
    height: number
})

如果要解除对齐，则使用函数:

jsdrawPlugin.unlockCameraWithContent()

该函数的具体用法请查看API文档