文档反馈
文档反馈

世界坐标系

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

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

观看模式

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

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

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

观看模式调整

工具栏接入

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

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

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

设置主播

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

drawPlugin.setSelfAsBroadcaster()

取消主播

停止视角同步

drawPlugin.unsetSelfAsBroadcaster()

设置为跟随者

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

drawPlugin.setSelfAsFollower()

设置为自由视角

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

drawPlugin.setSelfAsFreeObserver()

视角调整

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

工具栏接入

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

缩放

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

drawPlugin.zoomIn()
drawPlugin.zoomOut()
drawPlugin.zoomTo(scale: number, animate: boolean)

适配内容

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

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

适配文档

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

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

resetCamera

重置中心至(0,0),缩放比例至100%

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

setCameraBound

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

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

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

禁止缩放

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

drawPlugin.enableCameraTransform(false)

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

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

drawPlugin.enableCameraTransform(true)
×

反馈成功

非常感谢您的反馈,我们会继续努力做得更好。