视角

更新时间: 2024/07/24 13:59:48

世界坐标系

在白板上绘制的各种图形,都是以世界坐标系存储的。世界坐标系是一个虚拟坐标系。屏幕上显示的白板内容,其实是世界坐标系中一部分内容的投影。在白板内容,用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文档

此文档是否对你有帮助?
有帮助
去反馈
  • 世界坐标系
  • 观看模式
  • 观看模式调整
  • 工具栏配置
  • 设置主播
  • 取消主播
  • 设置为跟随者
  • 设置为自由视角
  • 视角调整
  • 工具栏配置
  • 缩放
  • 适配内容
  • 适配文档
  • resetCamera
  • setCameraBound
  • disableAutoResize
  • 初始视角
  • 禁止缩放
  • 标注模式