Displayer

  • Web

更新时间不可用

Whiteboard Web SDK 2.16.59 公开 interface。

TypeScript
export declare interface Displayer<CALLBACKS extends DisplayerCallbacks = DisplayerCallbacks>

成员

Properties

callbacks

readonly callbacks: Callbacks<CALLBACKS>;

Text
回调函数,你可以通过如下方式来操作回调函数。

@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;

Text
当前观察者的用户 ID。
若是实时房间,观察者是我自己。若是回放房间,观察者是当前跟随视角的用户,如果当前没有跟随任何用户的视角,则取值 AdminObserverId。

region

readonly region: string;

Text
当前房间所在的区域

slice

readonly slice: string;

Text
当前所处的 ``slice`` 的 UUID

version

readonly version: string;

Text
当前 SDK 的版本

deviceType

readonly deviceType: DeviceType;

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

screenType

readonly screenType: ScreenType;

Text
该客户端的屏幕类型,用于调整手势识别参数

state

readonly state: DisplayerState;

Text
状态

enableWriteNow

readonly enableWriteNow: boolean;

Text
当前是否允许对房间进行写操作

handToolKey

readonly handToolKey: string | undefined;

Text
按下键盘上哪个键能唤出抓手工具抓住屏幕以供用户拖动,若为 ``undefined`` 则关闭该功能

views

readonly views: Views;

useMobXState

readonly useMobXState: boolean;

useMultiViews

readonly useMultiViews: boolean;

handToolActive

handToolActive: boolean;
Text
是否启动抓手工具抓住屏幕以供用户拖动

disableOthersSelectingBox

disableOthersSelectingBox: boolean;
Text
是否隐藏其他人鼠标移动到白板组建上时,显示的高亮框。
该属性不会影响自己的高亮框显示。

disableCameraTransform

disableCameraTransform: boolean;
Text
是否禁止设备主动操作视角。
禁止后,用户无法使用鼠标滚轮,或在 touch 设备上通过多指手势来改变视角。
该属性不会影响 ``setCameraBound``、``moveCamera``、``moveCameraToContain`` 方法的使用。

commandWheelToZoom

commandWheelToZoom: boolean;
Text
在 macOS 系统上,是否允许按住 ``command`` 键并滚动来放大缩小白板。
此选项不影响 ``control`` 滚轮的放大缩小行为。
默认为 ``false``。

Methods

refreshViewSize

refreshViewSize(): void;
Text
仅当 ``autoResize: false`` 时调用有意义。
当白板的尺寸改变后,必须主动调用该方法让其同步。
Returns
返回类型描述

void

表格内容超出当前宽度,可横向滚动查看更多列。

setCameraBound

setCameraBound(cameraBound: CameraBound): void;
Text
修改 ``cameraBound`` 以调整视角边界
Returns
返回类型描述

void

表格内容超出当前宽度,可横向滚动查看更多列。

createScenesCallback

createScenesCallback(path: string, callbacks?: Partial<ScenesCallbacks>): ScenesCallbacksNode | null;
Text
创建监听器,以监听特定地址的场景组中子场景、子场景组列表的变化情况。
创建的监听器对象必须在使用完毕后调用 ``dispose()`` 释放。
当某个场景组已经被监听之后,无法再次创建新的监听器,除非上一个监听器被释放。

@param path 要监听的场景组地址。如果该地址对应一个场景,则取其父场景组
@param callbacks 一开始要监听的内容,可选
@returns 返回一个 ScenesCallbacksNode 对象,当对应地址不存在时,返回 ``null``
Returns
返回类型描述

ScenesCallbacksNode | null

表格内容超出当前宽度,可横向滚动查看更多列。

memberState

memberState(memberId: number): MemberState;
Text
获取房间内特定用户的自定义状态
@param memberId 用户的 ID
Returns
返回类型描述

MemberState

表格内容超出当前宽度,可横向滚动查看更多列。

moveCamera

moveCamera(camera: Partial<Camera> & Readonly<{ animationMode?: AnimationMode; }>): void;
Text
移动视角
Returns
返回类型描述

void

表格内容超出当前宽度,可横向滚动查看更多列。

moveCameraToContain

moveCameraToContain(rectangle: Rectangle & Readonly<{ animationMode?: AnimationMode; }>): void;
Text
移动视角以容纳特定的视觉矩形
Returns
返回类型描述

void

表格内容超出当前宽度,可横向滚动查看更多列。

bindHtmlElement

bindHtmlElement(element: HTMLDivElement | null): void;
Text
将白板绑定到 HTML 元素上
@param element 用于容纳白板的 HTML 元素容器。若为 ``null``,表明解除对白板的绑定。
Returns
返回类型描述

void

表格内容超出当前宽度,可横向滚动查看更多列。

getInvisiblePlugin

getInvisiblePlugin<A extends Object, MA extends Object>(kind: string): InvisiblePlugin<A, MA> | null;
Text
获取特定的不可件插件
Returns
返回类型描述

InvisiblePlugin<A, MA> | null

表格内容超出当前宽度,可横向滚动查看更多列。

convertToPointInWorld

convertToPointInWorld(point: { x: number; y: number; }): { x: number; y: number; };
Text
点的坐标系转换
@param point 屏幕坐标系上的点,以屏幕坐上角为原点。
@returns 世界坐标系上的点
Returns
返回类型描述

{ x: number; y: number; }

表格内容超出当前宽度,可横向滚动查看更多列。

scenePreview

scenePreview(scenePath: string, div: HTMLElement, width?: number, height?: number, engine?: RenderEngine): void;
Text
生成场景预览
@param  scenePath 想要获取预览内容的场景的场景路径
@param  div 想要展示预览内容的 div
@param  width 白板的缩放宽度:将当前白板内容,缩小到真实像素宽度。2.3.8 后,该参数为可选参数,如果不填,则默认为展示内容 div 的宽度。
@param  height 白板的缩放高度:将当前白板的内容,缩小到真实像素高度。2.3.8 后,该参数为可选参数,如果不填,则默认为展示内容 div 的高度。
Returns
返回类型描述

void

表格内容超出当前宽度,可横向滚动查看更多列。

generateScreenshot

generateScreenshot(scenePath?: string, width?: number, height?: number): Promise<string>;
Text
读取场景背景图 ``scene.ppt.src`` 并生成他的 base64 URL
Returns
返回类型描述

Promise<string>

表格内容超出当前宽度,可横向滚动查看更多列。

fillSceneSnapshot

fillSceneSnapshot(scenePath: string, div: HTMLElement, width?: number, height?: number, engine?: RenderEngine): void;
Text
生成场景预览,和 {@link scenePreview} 的区别是此函数会选取一个框住所有元素的视角,而 scenePreview 选取的是用户当前视角
Returns
返回类型描述

void

表格内容超出当前宽度,可横向滚动查看更多列。

screenshotToCanvas

screenshotToCanvas(context: CanvasRenderingContext2D, scenePath: string, width: number, height: number, camera: Camera, ratio?: number): void;
Text
生成屏幕快照,并写入指定的 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);
```
Returns
返回类型描述

void

表格内容超出当前宽度,可横向滚动查看更多列。

screenshotToCanvasAsync

screenshotToCanvasAsync(context: CanvasRenderingContext2D, scenePath: string, width: number, height: number, camera: Camera, ratio?: number, timeout?: number): Promise<void>;
Text
**实验性** 等待目标场景的图片加载完成,然后生成屏幕快照,写入指定的渲染上下文中。

@param timeout 超时时间,单位毫秒,默认为永远等待。超时后,不会等待图片加载完成,直接进行下一步绘制操作。
               只能设为大于 ``0`` 的数,否则等于不设超时。
Returns
返回类型描述

Promise<void>

表格内容超出当前宽度,可横向滚动查看更多列。

getBoundingRect

getBoundingRect(scenePath: string): Rectangle;
Text
获取某个场景里包含所有元素的矩形
Returns
返回类型描述

Rectangle

表格内容超出当前宽度,可横向滚动查看更多列。

addMagixEventListener

addMagixEventListener(event: string, listener: EventListener, options?: MagixEventListenerOptions): void;
addMagixEventListener(event: string, listener: EventsListener, fireInterval: number): void;
Text
添加自定义事件监听器
@param event 自定义事件名
@param listener 自定义事件监听器
@param options 监听配置
Returns
返回类型描述

void

表格内容超出当前宽度,可横向滚动查看更多列。
Text
添加自定义事件监听器
@param event 自定义事件名
@param listener 自定义事件监听器
@param options 监听配置
Returns
返回类型描述

void

表格内容超出当前宽度,可横向滚动查看更多列。

removeMagixEventListener

removeMagixEventListener(event: string, listener?: EventListener): void;
Text
注销自定义事件监听器
@param event 自定定义事件名
@param listener 要注销的监听器,若不传,则将该自定义事件之下的所有监听器全部注销
Returns
返回类型描述

void

表格内容超出当前宽度,可横向滚动查看更多列。

waitMagixEvent

waitMagixEvent(filter: EventFilter): Promise<Event>;
Text
等待直到特定的自定义事件发生
@param filter 用于判断是否是想要的自定义事件,若是,该方法应该返回 ``true``。
@returns 当特定自定义事件发生时,返回该事件
Returns
返回类型描述

Promise<Event>

表格内容超出当前宽度,可横向滚动查看更多列。

scalePptToFit

scalePptToFit(animationMode?: AnimationMode): void;
Text
调整视角以将 PPT 充满屏幕。若当前场景没有 PPT,则什么都不做。
@param animationMode 调整视角时的过渡动画模式
Returns
返回类型描述

void

表格内容超出当前宽度,可横向滚动查看更多列。

scenePathType

scenePathType(path: string): ScenePathType;
Text
查看特定场景的类型
@param path 该场景的路径
Returns
返回类型描述

ScenePathType

表格内容超出当前宽度,可横向滚动查看更多列。

entireScenes

entireScenes(): SceneMap;
Text
获取当前房间中所有场景信息
Returns
返回类型描述

SceneMap

表格内容超出当前宽度,可横向滚动查看更多列。

getScene

getScene(path: string): WhiteScene | undefined;
Text
获取特定场景信息
Returns
返回类型描述

WhiteScene | undefined

表格内容超出当前宽度,可横向滚动查看更多列。