Displayer
- Web
更新时间不可用
Whiteboard Web SDK 2.16.59 公开 interface。
export declare interface Displayer<CALLBACKS extends DisplayerCallbacks = DisplayerCallbacks>成员
- callbacks
- observerId
- region
- slice
- version
- deviceType
- screenType
- state
- enableWriteNow
- handToolKey
- views
- useMobXState
- useMultiViews
- handToolActive
- disableOthersSelectingBox
- disableCameraTransform
- commandWheelToZoom
- refreshViewSize
- setCameraBound
- createScenesCallback
- memberState
- moveCamera
- moveCameraToContain
- bindHtmlElement
- getInvisiblePlugin
- convertToPointInWorld
- scenePreview
- generateScreenshot
- fillSceneSnapshot
- screenshotToCanvas
- screenshotToCanvasAsync
- getBoundingRect
- addMagixEventListener
- removeMagixEventListener
- waitMagixEvent
- scalePptToFit
- scenePathType
- entireScenes
- getScene
Properties
callbacks
readonly callbacks: Callbacks<CALLBACKS>;
回调函数,你可以通过如下方式来操作回调函数。
@example
```typescript
function sliceChangeCallback(slice) {
// 监听到 onSliceChanged 回调
}
// 注册回调函数
displayer.callbacks.on("onSliceChanged", sliceChangeCallback);
// 注销回调函数
displayer.callbacks.off("onSliceChanged", sliceChangeCallback);
displayer.callbacks.once("onSliceChanged", function(slice) {
// 仅仅回调一次
});
```observerId
readonly observerId: number;
当前观察者的用户 ID。
若是实时房间,观察者是我自己。若是回放房间,观察者是当前跟随视角的用户,如果当前没有跟随任何用户的视角,则取值 AdminObserverId。region
readonly region: string;
当前房间所在的区域slice
readonly slice: string;
当前所处的 ``slice`` 的 UUIDversion
readonly version: string;
当前 SDK 的版本deviceType
readonly deviceType: DeviceType;
该客户端的设备类型,决定 SDK 如何处理鼠标事件和触碰事件screenType
readonly screenType: ScreenType;
该客户端的屏幕类型,用于调整手势识别参数state
readonly state: DisplayerState;
状态enableWriteNow
readonly enableWriteNow: boolean;
当前是否允许对房间进行写操作handToolKey
readonly handToolKey: string | undefined;
按下键盘上哪个键能唤出抓手工具抓住屏幕以供用户拖动,若为 ``undefined`` 则关闭该功能views
readonly views: Views;
useMobXState
readonly useMobXState: boolean;
useMultiViews
readonly useMultiViews: boolean;
handToolActive
handToolActive: boolean;是否启动抓手工具抓住屏幕以供用户拖动disableOthersSelectingBox
disableOthersSelectingBox: boolean;是否隐藏其他人鼠标移动到白板组建上时,显示的高亮框。
该属性不会影响自己的高亮框显示。disableCameraTransform
disableCameraTransform: boolean;是否禁止设备主动操作视角。
禁止后,用户无法使用鼠标滚轮,或在 touch 设备上通过多指手势来改变视角。
该属性不会影响 ``setCameraBound``、``moveCamera``、``moveCameraToContain`` 方法的使用。commandWheelToZoom
commandWheelToZoom: boolean;在 macOS 系统上,是否允许按住 ``command`` 键并滚动来放大缩小白板。
此选项不影响 ``control`` 滚轮的放大缩小行为。
默认为 ``false``。Methods
refreshViewSize
refreshViewSize(): void;仅当 ``autoResize: false`` 时调用有意义。
当白板的尺寸改变后,必须主动调用该方法让其同步。| 返回类型 | 描述 |
|---|---|
void |
setCameraBound
setCameraBound(cameraBound: CameraBound): void;修改 ``cameraBound`` 以调整视角边界| 返回类型 | 描述 |
|---|---|
void |
createScenesCallback
createScenesCallback(path: string, callbacks?: Partial<ScenesCallbacks>): ScenesCallbacksNode | null;创建监听器,以监听特定地址的场景组中子场景、子场景组列表的变化情况。
创建的监听器对象必须在使用完毕后调用 ``dispose()`` 释放。
当某个场景组已经被监听之后,无法再次创建新的监听器,除非上一个监听器被释放。
@param path 要监听的场景组地址。如果该地址对应一个场景,则取其父场景组
@param callbacks 一开始要监听的内容,可选
@returns 返回一个 ScenesCallbacksNode 对象,当对应地址不存在时,返回 ``null``| 返回类型 | 描述 |
|---|---|
ScenesCallbacksNode | null |
memberState
memberState(memberId: number): MemberState;获取房间内特定用户的自定义状态
@param memberId 用户的 ID| 返回类型 | 描述 |
|---|---|
MemberState |
moveCamera
moveCamera(camera: Partial<Camera> & Readonly<{ animationMode?: AnimationMode; }>): void;移动视角| 返回类型 | 描述 |
|---|---|
void |
moveCameraToContain
moveCameraToContain(rectangle: Rectangle & Readonly<{ animationMode?: AnimationMode; }>): void;移动视角以容纳特定的视觉矩形| 返回类型 | 描述 |
|---|---|
void |
bindHtmlElement
bindHtmlElement(element: HTMLDivElement | null): void;将白板绑定到 HTML 元素上
@param element 用于容纳白板的 HTML 元素容器。若为 ``null``,表明解除对白板的绑定。| 返回类型 | 描述 |
|---|---|
void |
getInvisiblePlugin
getInvisiblePlugin<A extends Object, MA extends Object>(kind: string): InvisiblePlugin<A, MA> | null;获取特定的不可件插件| 返回类型 | 描述 |
|---|---|
InvisiblePlugin<A, MA> | null |
convertToPointInWorld
convertToPointInWorld(point: { x: number; y: number; }): { x: number; y: number; };点的坐标系转换
@param point 屏幕坐标系上的点,以屏幕坐上角为原点。
@returns 世界坐标系上的点| 返回类型 | 描述 |
|---|---|
{ x: number; y: number; } |
scenePreview
scenePreview(scenePath: string, div: HTMLElement, width?: number, height?: number, engine?: RenderEngine): void;生成场景预览
@param scenePath 想要获取预览内容的场景的场景路径
@param div 想要展示预览内容的 div
@param width 白板的缩放宽度:将当前白板内容,缩小到真实像素宽度。2.3.8 后,该参数为可选参数,如果不填,则默认为展示内容 div 的宽度。
@param height 白板的缩放高度:将当前白板的内容,缩小到真实像素高度。2.3.8 后,该参数为可选参数,如果不填,则默认为展示内容 div 的高度。| 返回类型 | 描述 |
|---|---|
void |
generateScreenshot
generateScreenshot(scenePath?: string, width?: number, height?: number): Promise<string>;读取场景背景图 ``scene.ppt.src`` 并生成他的 base64 URL| 返回类型 | 描述 |
|---|---|
Promise<string> |
fillSceneSnapshot
fillSceneSnapshot(scenePath: string, div: HTMLElement, width?: number, height?: number, engine?: RenderEngine): void;生成场景预览,和 {@link scenePreview} 的区别是此函数会选取一个框住所有元素的视角,而 scenePreview 选取的是用户当前视角| 返回类型 | 描述 |
|---|---|
void |
screenshotToCanvas
screenshotToCanvas(context: CanvasRenderingContext2D, scenePath: string, width: number, height: number, camera: Camera, ratio?: number): void;生成屏幕快照,并写入指定的 CanvasRenderingContext2D 对象中。
调用此方法时可能存在一些图片还未加载完成从而不会渲染出来。
@param context canvas 2D 上下文, 你可以通过 ``canvas.getContext("2d")`` 来获取
@param scenePath 要截图的场景路径
@param width canvas 的宽度,单位像素
@param height canvas 的高度,单位像素
@param camera 目标视角
@param ratio 缩放比例,默认为 1
@example
```javascript
const canvas = document.createElement("canvas");
const { scenePath } = room.state.sceneState;
const { width, height, ...camera } = room.state.cameraState;
canvas.width = width;
canvas.height = height;
room.screenshotToCanvas(canvas.getContext("2d"), scenePath, width, height, camera);
```| 返回类型 | 描述 |
|---|---|
void |
screenshotToCanvasAsync
screenshotToCanvasAsync(context: CanvasRenderingContext2D, scenePath: string, width: number, height: number, camera: Camera, ratio?: number, timeout?: number): Promise<void>;**实验性** 等待目标场景的图片加载完成,然后生成屏幕快照,写入指定的渲染上下文中。
@param timeout 超时时间,单位毫秒,默认为永远等待。超时后,不会等待图片加载完成,直接进行下一步绘制操作。
只能设为大于 ``0`` 的数,否则等于不设超时。| 返回类型 | 描述 |
|---|---|
Promise<void> |
getBoundingRect
getBoundingRect(scenePath: string): Rectangle;获取某个场景里包含所有元素的矩形| 返回类型 | 描述 |
|---|---|
Rectangle |
addMagixEventListener
addMagixEventListener(event: string, listener: EventListener, options?: MagixEventListenerOptions): void;addMagixEventListener(event: string, listener: EventsListener, fireInterval: number): void;添加自定义事件监听器
@param event 自定义事件名
@param listener 自定义事件监听器
@param options 监听配置| 返回类型 | 描述 |
|---|---|
void |
添加自定义事件监听器
@param event 自定义事件名
@param listener 自定义事件监听器
@param options 监听配置| 返回类型 | 描述 |
|---|---|
void |
removeMagixEventListener
removeMagixEventListener(event: string, listener?: EventListener): void;注销自定义事件监听器
@param event 自定定义事件名
@param listener 要注销的监听器,若不传,则将该自定义事件之下的所有监听器全部注销| 返回类型 | 描述 |
|---|---|
void |
waitMagixEvent
waitMagixEvent(filter: EventFilter): Promise<Event>;等待直到特定的自定义事件发生
@param filter 用于判断是否是想要的自定义事件,若是,该方法应该返回 ``true``。
@returns 当特定自定义事件发生时,返回该事件| 返回类型 | 描述 |
|---|---|
Promise<Event> |
scalePptToFit
scalePptToFit(animationMode?: AnimationMode): void;调整视角以将 PPT 充满屏幕。若当前场景没有 PPT,则什么都不做。
@param animationMode 调整视角时的过渡动画模式| 返回类型 | 描述 |
|---|---|
void |
scenePathType
scenePathType(path: string): ScenePathType;查看特定场景的类型
@param path 该场景的路径| 返回类型 | 描述 |
|---|---|
ScenePathType |
entireScenes
entireScenes(): SceneMap;获取当前房间中所有场景信息| 返回类型 | 描述 |
|---|---|
SceneMap |
getScene
getScene(path: string): WhiteScene | undefined;获取特定场景信息| 返回类型 | 描述 |
|---|---|
WhiteScene | undefined |