在前端开发中，很多时候我们需要将我们的想法用图形的形式展现出来，比如说画出一个流程图、思维导图等。这个时候，我们就需要使用到白板（whiteboard）功能。而 pingqu-whiteboard 就是一个非常好用的 npm 包，可以方便地实现白板功能。在本篇文章中，我们将详细介绍 pingqu-whiteboard 的使用方法，并提供示例代码。
安装
使用 npm 包需要在项目中先安装，可以通过以下命令来安装 pingqu-whiteboard。
npm install pingqu-whiteboard --save
引入
在需要使用白板的文件中，我们需要先引入相应的模块。
import Whiteboard from 'pingqu-whiteboard';
然后，我们需要在 html 文件中创建一个空的 div 元素，用于白板的显示。
<div id="board"></div>
初始化
接下来，我们需要对白板进行初始化，代码如下：
const board = new Whiteboard({
container: '#board',
width: 1200,
height: 600,
mode: 'pencil',
});其中，container 为容器元素的 id；width 和 height 分别为白板的宽度和高度；mode 为白板的画笔模式，可以取值为：
- pencil：铅笔模式，可以自由绘制；
- eraser：橡皮擦模式，可以擦除之前绘制的图形；
- line：直线模式，可以画直线；
- arrow：箭头模式，可以画箭头；
- rectangle：矩形模式，可以画矩形；
- circle：圆形模式，可以画圆形。
绘制图形
使用 pingqu-whiteboard 绘制图形非常简单，只需要通过调用相应的方法即可。
-- -------------------- ---- ------- ---------------- -- ---- -- ---- ------ ---- ------- ---- ------------ -- ------------ ------- ---------- -------- -- ---- ------ ---
如上所示，使用 drawRect 方法可以在白板上绘制一个矩形。其中，x 和 y 分别为起点坐标；width 和 height 分别为矩形宽度和高度；strokeWidth 和 strokeColor 分别为矩形边框的宽度和颜色；fillColor 为矩形内部的填充色。
类似的，绘制其他的图形也很简单，调用相应的方法即可。例如，我们可以使用 drawLine 方法绘制直线。
board.drawLine({
x1: 100,
y1: 100,
x2: 200,
y2: 200,
strokeWidth: 2,
strokeColor: 'red',
});如上所示，使用 drawLine 方法可以在白板上绘制一条直线。其中，x1、y1、x2 和 y2 分别为起点和终点的坐标；strokeWidth 和 strokeColor 分别为直线的宽度和颜色。
其他的绘制方法类似，可以在 pingqu-whiteboard 的文档中查看详细的参数说明。
共享白板
使用 pingqu-whiteboard，可以方便地实现白板的共享。除了上面介绍的绘制图形的方法，还有一个很重要的方法——sendData。
使用 sendData 方法，将绘制的图形数据发送到服务器，然后再通过其它客户端接收这些数据，从而实现多用户之间白板的共享。
board.sendData({
type: 'rect',
x: 100,
y: 100,
width: 200,
height: 100,
});如上所示，使用 sendData 方法可以将一个矩形的数据发送到服务器。其中，type 为图形类型，可以取值为 rect、line、arrow 等；其它的参数与绘制图形的方法相同。
在其它客户端代码中，可以监听 data 事件，获取发送的图形数据，并在自己的白板上绘制这些图形。
-- -------------------- ---- -------
---------------- ------ -- -
------ ----------- -
---- -------
---------------------
------
---- -------
---------------------
------
---- --------
----------------------
------
-- ---
-
---如上所示，使用 on 方法监听 data 事件，并根据接收到的数据类型进行相应的处理，如调用 drawRect、drawLine、drawArrow 等方法来绘制对应的图形。
结语
通过本文的介绍，我们了解了 npm 包 pingqu-whiteboard 的使用方法，包括安装、引入、初始化、绘制图形和共享白板等方面。希望这篇文章可以帮助你快速上手 pingqu-whiteboard，实现自己的白板功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601181e8991b448de01c