文档反馈
文档反馈

世界坐标系

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

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

观看模式

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

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

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

观看模式调整

工具栏配置

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

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

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

设置主播

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

drawPlugin.setSelfAsBroadcaster()

取消主播

停止视角同步

drawPlugin.unsetSelfAsBroadcaster()

设置为跟随者

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

drawPlugin.setSelfAsFollower()

设置为自由视角

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

drawPlugin.setSelfAsFreeObserver()

视角调整

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

工具栏配置


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

缩放

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

drawPlugin.zoomIn()
drawPlugin.zoomOut()
/**
 * scale范围为0到1之间的数
 */
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)

disableAutoResize

joinRoom时,可以设置resize时候的模式。根据disableAutoResize的值不同,白板容器大小改变时有不同的响应方式:

whiteboardSDk.joinRoom({
    ...otherJoinRoomParams,
    disableAutoResize?: boolean  //默认为true
})

// true: 容器resize时,容器内元素大小不变,修改cameraBound的宽高
// false:容器resize时,容器内cameraBound的宽度不变,大小改变. 如果是等比例调整,则容器的camera bound不会改变

初始视角

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

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

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

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

禁止缩放

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

drawPlugin.enableCameraTransform(false)

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

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

drawPlugin.enableCameraTransform(true)
×

反馈成功

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