npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ar-whiteboard

v1.2.1

Published

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

Downloads

109

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 不保存。
  • 断网期间进行的绘画,重连后不会同步。