Displayer

Whiteboard Web SDK 2.16.59 公开 interface。

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

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`` 的 UUID

version

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{"\n"}const canvas = document.createElement("canvas");{"\n"}const {"{"} scenePath {"}"} = room.state.sceneState;{"\n"}const {"{"} width, height, ...camera {"}"} = room.state.cameraState;{"\n"}canvas.width = width;{"\n"}canvas.height = height;{"\n"}room.screenshotToCanvas(canvas.getContext("2d"), scenePath, width, height, camera);{"\n"}

返回值

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: EventListener, options?: MagixEventListenerOptions): void;

添加自定义事件监听器
@param event 自定义事件名
@param listener 自定义事件监听器
@param options 监听配置

返回值

void

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

addMagixEventListener(event: string, listener: EventsListener, fireInterval: number): 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

Properties​

callbacks

observerId

region

slice

version

deviceType

screenType

state

enableWriteNow

handToolKey

views

useMobXState

useMultiViews

handToolActive

disableOthersSelectingBox

disableCameraTransform

commandWheelToZoom

Methods​

refreshViewSize

返回值​

setCameraBound

返回值​

createScenesCallback

返回值​

memberState

返回值​

moveCamera

返回值​

moveCameraToContain

返回值​

bindHtmlElement

返回值​

getInvisiblePlugin

返回值​

convertToPointInWorld

返回值​

scenePreview

返回值​

generateScreenshot

返回值​

fillSceneSnapshot

返回值​

screenshotToCanvas

返回值​

screenshotToCanvasAsync

返回值​

getBoundingRect

返回值​

addMagixEventListener

返回值​

返回值​

removeMagixEventListener

返回值​

waitMagixEvent

返回值​

scalePptToFit

返回值​

scenePathType

返回值​

entireScenes

返回值​

getScene

返回值​

Properties

Methods

返回值

返回值

返回值

返回值

返回值

返回值

返回值

返回值

返回值

返回值

返回值

返回值

返回值

返回值

返回值

返回值

返回值

返回值

返回值

返回值

返回值

返回值

返回值