Interface Displayer<CALLBACKS>

Displayer 接口是白板房间的基础接口。

Properties

callbacks

callbacks: Callbacks<CALLBACKS>

回调函数。你可以通过如下方式设置回调函数：

example

JavaScript
// 监听到 onSliceChanged 回调
function sliceChangeCallback(slice) {
}
// 注册回调函数
displayer.callbacks.on("onSliceChanged", sliceChangeCallback);
// 注销回调函数
displayer.callbacks.off("onSliceChanged", sliceChangeCallback);
// 仅仅回调一次
displayer.callbacks.once("onSliceChanged", function(slice) {
});  

deviceType

deviceType: DeviceType

该客户端的设备类型，决定 SDK 如何处理鼠标事件和触碰事件。

disableCameraTransform

disableCameraTransform: boolean

是否禁止用户通过触屏手势或鼠标滚轮调整视角（即移动或缩放视角）：

true：禁止用户调整视角。
false：（默认）允许用户调整视角。

Note
该属性不影响 setCameraBound、moveCamera、moveCameraToContain 方法的使用。

disableOthersSelectingBox

disableOthersSelectingBox: boolean

是否隐藏其他人的鼠标移动到白板组件上时显示的高亮框。

since

2.12.0

true：隐藏高亮框。
false：（默认）不隐藏高亮框。

Note
该属性不影响自己的高亮框显示。

enableWriteNow

enableWriteNow: boolean

用户当前是否有写的权限:

since

2.10.0

true：有写的权限。
false：没有写的权限。

handToolActive

handToolActive: boolean

报告抓手工具是否启用:

true：启用抓手工具。
false：不启用抓手工具。

handToolKey

handToolKey: string | undefined

抓手工具的快捷键。用户可以使用抓手工具拖动页面。如果设为 undefined，表示不启用快捷键功能。

observerId

observerId: number

用户 ID。

在实时房间中，指本地用户的用户 ID。
在回放房间中:
- 当用户的 ObserverMode 为 Directory 时，observerId 为被跟随的用户的用户 ID。
- 当用户的 ObserverMode 为 Freedom 时，为 AdminObserverId。

region

region: string

数据中心。支持传入以下值：

`region`	数据中心	服务区
`us-sv`	美国硅谷	北美洲、南美洲
`sg`	新加坡	新加坡、东亚、东南亚
`in-mum`	印度孟买	印度
`eu`	欧洲（法兰克福）	欧洲
`cn-hz`	中国杭州	其他数据中心服务区未覆盖的地区

screenType

screenType: ScreenType

用户的屏幕类型，用于调整手势识别参数。

slice

slice: string

当前所处分片的 UUID。

state

state: DisplayerState

Displayer 对象的状态。

version

version: string

当前 SDK 的版本。

since

2.13.14

Methods

addMagixEventListener

addMagixEventListener(event: string, listener: EventListener, options?: MagixEventListenerOptions): void

addMagixEventListener(event: string, listener: EventListener, options?: MagixEventListenerOptions): void

注册自定义事件监听。

成功注册后，你可以接收到对应的自定义事件通知。

Note

对于同名的自定义事件，SDK 仅支持触发一个回调。

参数

参数名	描述
event: string	想要监听的自定义事件名称。
listener: EventListener	自定义事件回调，详见 EventListener。如果添加多个同名的事件回调，则之前添加的回调会被覆盖。
options: MagixEventListenerOptions	自从 v2.15.2。自定义事件监听设置选项。详见 MagixEventListenerOptions。

返回值

void

addMagixEventListener(event: string, listener: EventsListener, fireInterval: number): void

addMagixEventListener(event: string, listener: EventsListener, fireInterval: number): void

注册高频自定义事件监听。

成功注册后，你可以接收到对应的自定义事件通知。

Note

对于同名的自定义事件，SDK 仅支持触发一个回调。

example

function listener(events) {
 // events 是一个数组
 for (const event of events) {
 // 回调事件 event
 }
}
displayer.addMagixEventListener("my-event", listener, 100);

参数

参数名	描述
event: string	想要监听的自定义事件名称。
listener: EventsListener	自定义事件回调，详见 EventsListener。如果添加多个同名的事件回调，则之前添加的回调会被覆盖。
fireInterval: number	SDK 触发回调的频率，单位为毫秒。该参数最小值为 500 ms，如果设置为低于该值会被重置为 500 ms。

返回值

void

bindHtmlElement

bindHtmlElement(element: HTMLDivElement | null): void

将白板绑定到 HTML 元素上。

参数

参数名	描述
element: HTMLDivElement \| null	用于容纳白板的 HTML 元素容器。若为 `null`，表示解除对白板的绑定。

返回值

void

convertToPointInWorld

convertToPointInWorld(point: { x: number; y: number }): { x: number; y: number }

转换白板上点的坐标。

该方法可以将屏幕坐标系（以屏幕左上角为原点，横轴为 X 轴，正方向向右，纵轴为 Y 轴，正方向向下）中的坐标转换为世界坐标系（以白板初始化时的中点为原点，横轴为 X 轴，正方向向右，纵轴为 Y 轴，正方向向下）中的坐标。

参数

参数名	描述
point: { x: number; y: number }	点在屏幕坐标系中的坐标。 x: number 点在屏幕坐标系上的 X 轴坐标。 y: number 点在屏幕坐标系上的 Y 轴坐标。

返回值

{ x: number; y: number }

点在世界坐标系中的坐标。

x: number

点在世界坐标系上的 X 轴坐标。
y: number

点在世界坐标系上的 Y 轴坐标。

createScenesCallback

createScenesCallback(path: string, callbacks?: Partial<ScenesCallbacks>): ScenesCallbacksNode | null

创建场景目录的监听器对象。

成功创建监听器对象后，当指定场景目录下的场景、子场景目录发生变化时，SDK 会触发你在 ScenesCallbacks 中实现的回调。当不再需要使用已创建的监听器时，需要调用 dispose 来释放该监听器对象。

note

该方法需要在加入白板房间后调用。
对于每个场景目录，仅支持创建一个监听器对象。如果需要创建新的监听器对象，必须先调用 dispose 释放已创建的监听器对象。

参数

参数名	描述
path: string	场景目录的路径。如果你传入的是场景路径，SDK 会将监听对象设置为其父场景目录。
callbacks: Partial<ScenesCallbacks>	需要监听的回调。详见 `ScenesCallbacks`。

返回值

ScenesCallbacksNode | null

方法调用成功时，返回 ScenesCallbacksNode 对象。
方法调用失败时，返回 null。方法调用失败可能是因为指定的场景目录不存在。

entireScenes

entireScenes(): SceneMap

获取当前房间内所有场景的信息。

返回值

SceneMap

当前房间内所有场景的信息。

fillSceneSnapshot

fillSceneSnapshot(scenePath: string, div: HTMLElement, width: number, height: number): void

生成特定场景的屏幕快照。

参数

参数名	描述
scenePath: string	特定场景的路径。
div: HTMLElement	用于显示屏幕快照的 div。
width: number	屏幕快照的宽度。自 2.3.8 起，该参数为可选参数，如果不填，则默认为展示屏幕快照的 div 的宽度。
height: number	屏幕快照的高度。自 2.3.8 起，该参数为可选参数，如果不填，则默认为展示屏幕快照的 div 的高度。

返回值

void

generateScreenshot

generateScreenshot(scenePath?: string, width?: number, height?: number): Promise<string>

生成特定场景的截图。

参数

参数名	描述
scenePath: string	特定场景的路径。
width: number	截图的宽度。
height: number	截图的高度

返回值

Promise<string>

截图的 URL 地址。

Note

如果场景中展示了图片或动态 PPT 幻灯片，请确保该图片或 PPT 幻灯片的存储服务器支持跨域资源共享；否则，生成的截图中可能不会显示该图片或 PPT 幻灯片。

getInvisiblePlugin

getInvisiblePlugin<A>(kind: string): InvisiblePlugin<A> | null

获取指定的不可见插件。

参数

参数名	描述
kind: string	不可见插件的类型。

返回值

InvisiblePlugin<A> | null

指定的不可见插件。

getScene

getScene(path: string): WhiteScene | undefined

获取指定场景的信息。

参数

参数名	描述
path: string	场景的路径。请确保场景路径以 `/` 开头，并且由场景目录和场景名构成，例如，`/math/classA`。

返回值

WhiteScene | undefined

场景信息。详见 WhiteScene。

memberState

memberState(memberId: number): MemberState

获取房间内指定用户的白板工具状态。

参数

参数名	描述
memberId: number	指定用户的 ID。

返回值

MemberState

指定用户的白板工具状态。

moveCamera

moveCamera(camera: Partial<Camera> & Readonly<{ animationMode?: AnimationMode }>): void

调整视角。

参数

参数名	描述
camera: Partial<Camera> & Readonly<{ animationMode?: AnimationMode }>	视角的参数配置，详见 Camera。

返回值

void

moveCameraToContain

moveCameraToContain(rectangle: Rectangle & Readonly<{ animationMode?: AnimationMode }>): void

调整视角，以保证完整显示视觉矩形。

参数

参数名	描述
rectangle: Rectangle & Readonly<{ animationMode?: AnimationMode }>	视觉矩形的参数设置，详见 Rectangle。

返回值

void

refreshViewSize

refreshViewSize(): void

刷新白板的界面。

当白板的 view 发生改变时，需要手动调用该方法刷新白板的界面。该方法仅在 autoResize 为 false 时生效。

返回值

void

removeMagixEventListener

removeMagixEventListener(event: string, listener?: EventListener): void

移除自定义事件监听。

参数

参数名	描述
event: string	想要移除监听的自定义事件名称。
listener: EventListener	要移除的监听。若不传，该自定义事件之下的所有监听器将全部注销。

返回值

void

scalePptToFit

scalePptToFit(animationMode?: AnimationMode): void

根据指定的动画模式调整视角，以保证完整显示 PPT 的内容。

since: 2.3.18

参数

参数名	描述
animationMode: AnimationMode	视角调整时的动画模式，详见 AnimationMode。

返回值

void

scenePathType

scenePathType(path: string): ScenePathType

查询场景路径类型。

参数

参数名	描述
path: string	场景的路径。请确保场景路径以 `/` 开头，并且由场景目录和场景名构成，例如，`/math/classA`。

返回值

ScenePathType

场景路径的类型。

scenePreview

scenePreview(scenePath: string, div: HTMLElement, width: number | undefined, height: number | undefined): void

生成特定场景的预览图。

参数

参数名	描述
scenePath: string	特定场景的路径。
div: HTMLElement	用于显示预览内容的 div。
width: number \| undefined	预览图的宽度。自 2.3.8 起，该参数为可选参数，如果不填，则默认为展示预览内容的 div 的宽度。
height: number \| undefined	预览图的高度。自 2.3.8 起，该参数为可选参数，如果不填，则默认为展示预览内容的 div 的高度。

返回值

void

screenshotToCanvas

screenshotToCanvas(context: CanvasRenderingContext2D, scenePath: string, width: number, height: number, camera: Camera, ratio?: number): void

生成屏幕快照，并写入指定的 CanvasRenderingContext2D 对象中。

参数

参数名	描述
context: CanvasRenderingContext2D	CanvasRenderingContext2D 对象。
scenePath: string	场景的路径。你可以通过 `room.state.sceneState.scenePath` 获取当前场景。
width: number	屏幕快照的宽度。
height: number	屏幕快照的高度。
camera: Camera	视角的描述。
ratio: number	设备像素比。该参数为可选参数，如果不填，则默认值为 1。

返回值

void

screenshotToCanvasAsync

screenshotToCanvasAsync(context: CanvasRenderingContext2D, scenePath: string, width: number, height: number, camera: Camera, ratio?: number, timeout?: number): Promise<void>

等待目标场景的图片加载完成后生成屏幕快照，写入指定的 CanvasRenderingContext2D 对象中。

note

该功能处于实验阶段。
如果目标场景的图片无法完成加载，则该函数无法返回屏幕快照，你需要自行处理超时逻辑。
如果你希望生成的屏幕快照不包含图片，请使用 screenshotToCanvas。

参数

参数名	描述
context: CanvasRenderingContext2D	CanvasRenderingContext2D 对象。
scenePath: string	场景的路径。你可以通过 `room.state.sceneState.scenePath` 获取当前场景。
width: number	屏幕快照的宽度。
height: number	屏幕快照的高度。
camera: Camera	视角的描述。详见 Camera。
ratio: number	设备像素比。该参数为可选参数，如果不填，则默认值为 1。
timeout: number	图片加载的超时时间 (ms)，默认为永不超时，只能设为大于 `0` 的数。图片的加载时间超过该值后，SDK 会直接进行下一步绘制操作，而不会等待图片加载完成。

返回值

Promise<void>

setCameraBound

setCameraBound(cameraBound: CameraBound): void

设置用户的视角边界。

参数

参数名	描述
cameraBound: CameraBound	视角边界。

返回值

void

waitMagixEvent

waitMagixEvent(filter: EventFilter): Promise<Event>

等待特定的自定义事件发生。

参数

参数名	描述
filter: EventFilter	事件过滤器。

返回值

Promise<Event>

当特定自定义事件发生时，返回该事件。

Properties​

callbacks

deviceType

disableCameraTransform

disableOthersSelectingBox

enableWriteNow

handToolActive

handToolKey

observerId

region

screenType

slice

state

version

Methods​

addMagixEventListener

参数​

返回值​

参数​

返回值​

bindHtmlElement

参数​

返回值​

convertToPointInWorld

参数​

返回值​

x: number

y: number

createScenesCallback

参数​

返回值​

entireScenes

返回值​

fillSceneSnapshot

参数​

返回值​

generateScreenshot

参数​

返回值​

getInvisiblePlugin

参数​

返回值​

getScene

参数​

返回值​

memberState

参数​

返回值​

moveCamera

参数​

返回值​

moveCameraToContain

参数​

返回值​

refreshViewSize

返回值​

removeMagixEventListener

参数​

返回值​

scalePptToFit

参数​

返回值​

scenePathType

参数​

返回值​

scenePreview

参数​

返回值​

screenshotToCanvas

参数​

返回值​

screenshotToCanvasAsync

参数​

返回值​

setCameraBound

参数​

返回值​

waitMagixEvent

参数​

返回值​

Properties

Methods

参数

返回值

参数

返回值

参数

返回值

参数

返回值

参数

返回值

返回值

参数

返回值

参数

返回值

参数

返回值

参数

返回值

参数

返回值

参数

返回值

参数

返回值

返回值

参数

返回值

参数

返回值

参数

返回值

参数

返回值

参数

返回值

参数

返回值

参数

返回值

参数

返回值