@pano.video/whiteboard

Pano web whiteboard lib.

Usage no npm install needed!

<script type="module">
  import panoVideoWhiteboard from 'https://cdn.skypack.dev/@pano.video/whiteboard';
</script>

README

Pano whiteboard

Properties

bgScaleMode

• bgScaleMode: WBImageScalingMode = Constants.WBImageScalingMode.Fit

画布缩放适应背景图的模式(直接设置这个属性不会改变缩放模式，请使用 setBackgroundImageScalingMode 方法)

bold

• bold: boolean = false

文字是否加粗，对新插入的文本生效

fillStyle

• fillStyle: string = Constants.DEFAULT_FILL_COLOR

填充颜色，对新绘制的 shape 生效

fillType

• fillType: "none" | "color" = "none"

新绘制的 shape 的填充类型，填充颜色或者不填充

fontSize

• fontSize: number = 14

字体大小，对插入的文本生效

italic

• italic: boolean = false

文字是否斜体，对新插入的文本生效

lineWidth

• lineWidth: number = 5

画笔宽度，对新绘制 shape 生效

strokeStyle

• strokeStyle: string = "rgba(33,212,183,1)"

画笔颜色，对新绘制的 shape 生效

toolsWrapper

• toolsWrapper: HTMLDivElement

自定义 tools 的挂载 dom 节点

Accessors

activeDocId

• get activeDocId(): string

获取当前激活的 DocId

Returns: string

backgroundColor

• get backgroundColor(): string

获取当前白板视图的背景颜色

Returns: string

• set backgroundColor(color: string): void

设置当前白板视图的背景颜色(仅支持 rgba 颜色，如: rgba(0,0,0,0.7))

Parameters:

Name Type
color string

Returns: void

isAdmin

• get isAdmin(): boolean

当前用户是否是 admin 用户

Returns: boolean

role

• get role(): WBRoleType

获取当前用户的角色

Returns: WBRoleType

scale

• get scale(): number

获取当前白板视图的缩放比例

Returns: number

• set scale(nextScale: number): void

设置当前白板视图的缩放比例

Parameters:

Name Type
nextScale number

Returns: void

selectedShape

• get selectedShape(): undefined | BaseShape‹›

当前被选中的 shape

Returns: undefined | BaseShape‹›

• set selectedShape(shape: BaseShape | undefined): void

设置或清除当前选择的 shape

Parameters:

Name Type
shape BaseShape | undefined

Returns: void

translate

• get translate(): number[]

获取当前页面的位移

Returns: number[]

Methods

addPage

▸ addPage(autoSwitch: boolean): QResult

添加一个新页面到最后

Parameters:

Name Type Default Description
autoSwitch boolean true 是否自动切换到新页面

Returns: QResult

addBackgroundImages

▸ addBackgroundImages(urls: string[], addToCurrentDoc: boolean): QResult

导入指定数量的背景图，可以插入到当前文档中，或者新建一组文档

Parameters:

Name Type Default Description
urls string[] - 图片 url 列表
addToCurrentDoc boolean false 是否添加到当前文档中

Returns: QResult

broadcastMessage

▸ broadcastMessage(message: any): QResult

Parameters:

Name Type Description
message any 自定义消息内容

Returns: QResult

clearContents

▸ clearContents(type: WBClearType): QResult

清除内容

Parameters:

Name Type Description
type WBClearType 清除内容类型

Returns: QResult

close

▸ close(): void

关闭白板

Returns: void

deleteDoc

▸ deleteDoc(docId: string): QResult

删除文档

Parameters:

Name Type Description
docId string 删除文档

Returns: QResult

getCurrentPageNumber

▸ getCurrentPageNumber(): number

获取当前页码

Returns: number

getShapeById

▸ getShapeById(id: string): undefined | BaseShape‹›

通过 id 获取 shape

Parameters:

Name Type
id string

Returns: undefined | BaseShape‹›

getToolType

▸ getToolType(): ShapeType

获取当前的工具类型

Returns: ShapeType

getTotalNumberOfPages

▸ getTotalNumberOfPages(): number

获取总白板页码数

Returns: number

gotoPage

▸ gotoPage(pageIndex: number): QResult

获取当前白板页码 (从 0 开始)

Parameters:

Name Type Description
pageIndex number

Returns: QResult

insertPage

▸ insertPage(pageIndex: number, autoSwitch: boolean): QResult

添加一个新页面到指定位置

Parameters:

Name Type Default Description
pageIndex number - 指定位置 index
autoSwitch boolean true 是否自动切换到新页面

Returns: QResult

nextPage

▸ nextPage(): QResult

切换到下一页

Returns: QResult

on

▸ on(event: string, cb: Function): void

监听事件，内部分发的事件参见 RtcWhiteboard.EVENTS

Parameters:

Name Type
event string
cb Function

Returns: void

off

▸ on(event: string, cb: Function): void

取消监听事件，内部分发的事件参见 RtcWhiteboard.EVENTS

Parameters:

Name Type
event string
cb Function

Returns: void

open

▸ open(wrapperEle: HTMLElement): QResult

打开白板

Parameters:

Name Type Description
wrapperEle HTMLElement 白板嵌入的 html 元素

Returns: QResult

prevPage

▸ prevPage(): QResult

切换到上一页

Returns: QResult

redo

▸ redo(): void

重做白板的上一次被撤销操作

Returns: void

removePage

▸ removePage(index: number): QResult

删除指定页

Parameters:

Name Type Default
index number this._pageIndex

Returns: QResult

sendMessage

▸ sendMessage(to: string, message: any): QResult

发送自定义消息 Parameters:

Name Type Description
to string 接受者 userId
message any 自定义消息内容

Returns: QResult

setBackgroundImage

▸ setBackgroundImage(url: string): QResult

设置背景图片

Parameters:

Name Type Description
url string 背景图片 url

Returns: QResult

setBackgroundImageScalingMode

▸ setBackgroundImageScalingMode(scaleMode: WBImageScalingMode): void

设置白板背景图缩放模式

Parameters:

Name Type
scaleMode WBImageScalingMode

Returns: void

setRoleType

▸ setRoleType(roleType: WBRoleType): QResult

设置白板角色类型

Parameters:

Name Type Description
roleType WBRoleType 角色类型

Returns: QResult

setSelectedShapeFontStyle

▸ setSelectedShapeFontStyle(style: object): void

设置当前选中 shape 的 fontStyle

Parameters:

▪ style: object

Name Type
bold? undefined | false | true
fontSize? undefined | number
italic? undefined | false | true

Returns: void

setSelectedShapeStyle

▸ setSelectedShapeStyle(style: object): void

设置当前选中 shape 的 style

Parameters:

▪ style: object

Name Type
fillStyle? undefined | string
fillType? undefined | string
lineWidth? undefined | number
strokeStyle? undefined | string

Returns: void

setToolType

▸ setToolType(insertType: ShapeType): void

设置工具类型

Parameters:

Name Type Description
insertType ShapeType 工具类型

Returns: void

switchToDoc

▸ switchToDoc(docId: string): QResult

切换白板文档

Parameters:

Name Type Description
docId string

Returns: QResult

undo

▸ undo(): void

撤消上一次操作

Returns: void

uploadDoc

▸ uploadDoc(onDocTranscodeStatus: function): QResult

Overrides Whiteboard.uploadDoc

上传本地需转码的文件并创建新的白板文件

Parameters:

▪ onDocTranscodeStatus: (data: {status: string; code: number; docId?: string;}) => any

发布进度回调，在 code 为 3 时表示转成成功，会返回 docId，code 定义： 0 或正数表示正常状态，负数表示失败, 0: start upload，1: upload success，2: transcoding，3: transcode success，-1: transcode failed, -2: upload failed，

▸ (data: object): any

Parameters:

▪ data: object

Name Type
code number
docId? undefined | string
status string

Returns: QResult

updateCanvasSize

• updateCanvasSize: void

手动调用更新画布 size，在外部画布容器变化后主动调用更新画板大小信息

Object literals

Static EVENTS

RtcWhiteboard 内部状态变化时触发的回调，用户可以调用 RtcWhiteboard 实例的 on 方法添加监听回调

docCreated

• docCreated: string = "DOC_CREATED"

白板文档创建通知

callbackparams

'12433223' // 新创建的文档 Id

docDeleted

• docDeleted: string = "DOC_DELETED"

文档被删除

callbackparams

'12433223' // 被删除的文档 Id

docSwitched

• docSwitched: string = "DOC_SWITCHED"

文档切换

callbackparams

'12433223' // 切换到的文档 Id

messageReceived

• messageReceived: string = "RECEIVE_CUSTOM_MESSAGE"

收到自定义消息

callbackparams

{
  form: "3309586", //用户的 userId
  message: 'xxxx' // 消息内容
}

openStateChanged

• openStateChanged: string = "WHITEBOARD_OPEN_STATE_CHANGE"

白板开启的状态变化，当 channel 中有任一用户打开白板，会触发这个事件

readyStateChanged

• readyStateChanged: string = "READY_STATE_CHANGE"

白板 ready 状态变化，在加入、离开会议或者 failover 时触发 callbackparams

{
  ready: true, // 是否 ready
  type: "join", // 触发类型，'join' | 'failover' | 'left'
  message: "Join channel success." // 提示消息
}

userRoleTypeChanged

• userRoleTypeChanged: string = "WHITEBOARD_ROLE_TYPE_CHANGE"

当前用户角色类型变化时触发

whiteboardContentUpdate

• whiteboardContentUpdate: string = "WHITEBOARD_CONTENT_UPDATE"

白板内容更新时触发

whiteboardFailover

• whiteboardFailover: string = "WHITEBOARD_FAILOVER"

白板错误恢复状态变化

callbackparams

{
  state: 'Failed', // Reconnecting || Success || Failed
}