视角
更新时间: 2024/07/24 13:59:48
世界坐标系
在白板上绘制的各种图形,都是以世界坐标系存储的。世界坐标系是一个虚拟坐标系。屏幕上显示的白板内容,其实是世界坐标系中一部分内容的投影。在白板内容,用centerX, centerY, width, height
四个变量表示其展示的世界坐标系的范围。
白板初始世界坐标系以(0,0)为中心。若用户使用平移工具拖动白板,则centerX, centerY
也会随之变化。若用户使用鼠标滚轮控制白板缩放,则centerX, centerY, width, height
都会随之变化。
观看模式
房间内用户可能处于下面三种视角模式中的一种:
- 主播模式:能主动调整视角,并会将自己视角同步给其他用户
- 跟随模式:视角随主播变化
- 自由模式:能自由变化视角。视角不会影响其他角色
默认情况下,所有用户均为自由视角。当任一用户切换为主播时,剩下人会自动切换为跟随者。主播切换为自由模式后,其他用户自动切换为自由模式。若用户处于跟随状态,需要先切换为自由模式,才能够调整视角。
观看模式调整
工具栏配置
用户可以通过配置工具栏,并点击调整视角:
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
文档