ar-whiteboard
v1.2.1
Published
SDK 会在全局导出一个 **ArWhiteBoard** 对象,可以通过 `new` 方法创建一个白板实例。一个白板实例代表一个白板客户端。
Downloads
109
Maintainers
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 不保存。
- 断网期间进行的绘画,重连后不会同步。