ar-whiteboard

SDK 会在全局导出一个 ArWhiteBoard 对象,可以通过 new 方法创建一个白板实例。一个白板实例代表一个白板客户端。

Usage no npm install needed!

<script type="module">
  import arWhiteboard from 'https://cdn.skypack.dev/ar-whiteboard';
</script>

README

SDK 会在全局导出一个 ArWhiteBoard 对象,可以通过 new 方法创建一个白板实例。一个白板实例代表一个白板客户端。

// 初始化配置
const initConfig = {
  id: '<DOM_ID>',
  appId: '<APP_ID>',
  userId: '<U_ID>',
  channel: '<CHANNEL_ID>',
  token: '<TOKEN>',
};
const Board = new ArWhiteBoard(initConfig);

概览

Board 实例包含了以下方法:

全局事件回调
add-board 添加白板页
delete-board 删除白板页
goto-board 白板页切换
clear-board 清空画板
reset-board 重置画板
board-can-redo-status 当前白板页是否可重做
board-can-undo-status 当前白板页是否可撤销
board-error 白板错误回调
board-scale-change 当前白板页缩放比例变化
board-warning 白板警告回调
connection-state-change 网络状态回调
board-background-color-change 背景颜色更改
核心方法
new ArWhiteBoard 白板构造函数,创建白板实例
destroy 销毁白板实例
涂鸦相关方法
clear 清空当前白板页数据。默认只清除当前白板页的涂鸦,如果 clearBackground 参数为 true,则同时清除涂鸦和背景。
getBrushColor 获取画笔颜色。
getBrushThin 获取画笔粗细。
getBrushType 获取画笔类型。
getEnable 获取白板是否可涂鸦。
getTextColor 获取设置的文字颜色。
getTextSize 获取设置的文字大小。
resize 重新计算白板大小,并渲染。
setBrushColor 设置画笔颜色。
setBrushThin 设置画笔粗细。
setBrushType 设置画笔工具类型。
setEnable 设置白板是否可涂鸦。
setTextColor 设置的文字颜色。
setTextSize 设置文字的大小。
白板页相关方法
addBoard 添加一页白板并切换到这一页。
deleteBoard 删除当前白板页并切换到上一页。
getBoardList 获取所有文件的白板列表。
getBoardScale 获取当前白板页缩放比例。
getBoardSnapshot 获取当前白板页的快照。
getCurrentBoardId 获取当前白板页 ID。
getCurrentFileId 获取当前文件 ID。
getFileBoardList 获取指定文件的白板 ID 列表。
getFileInfo 获取白板的基本信息。
gotoBoard 切换到指定的白板页。
nextBoard 切换到下一页白板。
prevBoard 切换到上一页白板。
reset 重置白板。
setBoardScale 设置当前白板页的缩放大小。
背景相关方法
getBackgroundColor 获取当前白板页的背景颜色。
getGlobalBackgroundColor 获取全局设置的白板页背景颜色。
setBackgroundColor 设置当前白板页的背景颜色。
setGlobalBackgroundColor 全局设置白板页的背景颜色。
撤销和恢复相关方法
redo 画笔重做。
undo 撤销画笔。
其他方法
getVersion 获取 SDK 版本。

注意事项

选择画笔工具,避免使用 <select> 标签

因为使用 <select> 标签,document.activeElement 会变成 select 对象,画板会无法捕捉到 mouseout 事件,因此会导致激光笔工具再特定情况下移出画板无法删除激光笔。

收不到(或者收到多次)回调

  • 检查是否在方法调用后监听的回调,确保回调在调用方法之前注册(监听)。
  • 如果收到多次回调,检查是否自己封装的方法中多次监听回调方法(正常回调只需要注册一遍)。

主持人(老师)和观众(学生)

SDK 没有人员身份的标识和逻辑,客户端可以根据自己的业务需求,结合自己的业务系统配合 SDK uid 进行人员权限分配。

橡皮擦

  • 可以擦除任何人的画笔痕迹
  • 擦除后,该画笔变更为改画笔的临时拥有者,可以对该画笔进行撤销和重做

撤销和重做

  • 只能撤销和重做自己的画笔
  • 如果自己的画笔被其他人移动了,则该笔仅能被该移动者撤销和重做
  • 清空白板(或背景)不允许被撤销和重做

重置画板

  • 重置画板会删除所有画板页,仅保留第一页,但是不保留第一页的涂鸦

重连

  • 重连时丢失的画笔,SDK 不保存。
  • 断网期间进行的绘画,重连后不会同步。