在前端开发过程中，经常会用到显示文本或图案的需求，而电子纸显示器则因为其低功耗、长时间不掉电等特性，在一些场景下成为了不错的选择。node-epd 就是一款适用于树莓派等单板电脑上的电子纸驱动程序，能够支持多种电子纸屏幕类型，并提供了方便的 API 接口，使用起来便捷易懂。
安装 node-epd
由于 node-epd 是作为 npm 包发布的，因此只需要在终端中输入以下命令即可安装：
npm install node-epd --save
驱动屏幕
在使用 node-epd 之前，需要根据自己使用的电子纸屏幕类型来作出不同的选择。目前 node-epd 未支持的类型也可以通过编写自己的驱动来实现。本文使用的是 GDEW0154M09 这款屏幕。
首先，需要在我们的代码文件中引入 node-epd 包，并创建一个屏幕实例，代码如下：
-- -------------------- ---- ------- ----- --- - -------------------- ----- ------ - --- ----- ------ -------------- ------- --- ------ --- -------- --- ---------- ----------------- ------ ---- ------- ---- --------- -- ------- ------ ------------ --- --------- ---- ---
其中，各个参数的含义如下：
model: 屏幕型号，目前 node-epd 可以支持的型号可以到 GitHub 主页 中进行查看；rstPin: 复位引脚编号；dcPin: 数据传输控制引脚编号；busyPin: 状态引脚编号；spiDevice: SPI 设备文件路径；width: 屏幕宽度；height: 屏幕高度；rotation: 屏幕旋转角度，0 表示不旋转，90/180/270 分别表示顺时针旋转的角度（需要根据电子纸屏幕类型来确定，本文使用的屏幕旋转角度为 0）；invert: 是否翻转颜色，即反相显示；spiSpeedMHz: SPI 传输速度；autoInit: 是否需要对屏幕进行初始化，在创建实例时直接设置为 true 即可。
在创建屏幕实例之后，我们可以使用 begin 方法来初始化屏幕，并使用 clear 方法将屏幕清空：
screen.begin(() => {
screen.clear();
});编写显示内容
node-epd 提供了多种可以显示的元素，包括图片、文本、图形以及自定义元素等。使用这些元素需要遵循一定的规则，比如给定宽度和高度等等。以下是一些常用的元素以及示例代码：
文本元素
要创建一个文本元素，只需要使用 text 方法即可。下面是一个简单的示例：
-- -------------------- ---- ------- ----- ----------- - ------------- ----- ------- -------- -- --- -- --- ------ ---- ------- ---- ----- --- ------ --------------- --- -------------------
上述代码中，我们首先使用 text 方法创建了一个文本元素，并设置了相应的参数。其中，text 表示要显示的文本内容；x 和 y 分别表示文本元素在屏幕中的位置；width 和 height 分别表示文本元素的宽度和高度，一般需要根据文本内容的长度来设置；size 表示字体的大小；color 表示文本的颜色，可以使用 Epd.Color.White 或 Epd.Color.Black 表示黑白两种颜色。
创建文本元素之后，我们需要调用 draw 方法来将其绘制到屏幕上。
图片元素
要创建一个图片元素，需要先将图片读取到内存中，然后使用 image 方法将其绘制到屏幕。以下是一个示例：
-- -------------------- ---- ------- ----- -- - -------------- ----- ---- - ------------------------------- ----- ------------ - -------------- ----- ----- -- --- -- --- ------ ---- ------- --- --- --------------------
上述代码中，我们首先使用 fs 模块将图片读取到内存中，然后使用 image 方法创建一个图片元素，并设置了相应的参数。其中，data 表示图片的二进制数据，可以使用其他方式获取；x 和 y 分别表示图片元素在屏幕中的位置；width 和 height 分别表示图片元素的宽度和高度，需要根据图片的实际大小来设置。创建图片元素之后，同样需要调用 draw 方法进行绘制。
线条元素
要创建一个线条元素，可以通过 line 方法来实现。以下是一个简单示例：
-- -------------------- ---- ------- ----- ----------- - ------------- --- --- --- --- --- ---- --- ---- ---------- -- ------ --------------- --- -------------------
上述代码中，我们使用 line 方法创建一个线条元素，并设置了相应的参数。其中，x1 和 y1 分别表示线条的起点坐标，x2 和 y2 分别表示线条的终点坐标，thickness 表示线条的粗细，color 表示线条的颜色（同样可以使用 Epd.Color.White 或 Ep.Color.Black 表示黑白两种颜色）。
自定义元素
如果上述元素都无法满足我们的需求，那么可以通过自定义元素来实现。自定义元素需要根据屏幕的像素点来进行绘制，通常需要使用 canvas 方法来创建自定义元素。以下是一个简单示例：
-- -------------------- ---- ------- ----- ------ - --------------- -- --- -- --- ------ ---- ------- --- --- ----- --- - ------------------------ ------------- - -------- --------------- -- ---- ----- ------------- - -------- -------- - ----- ------- -------------------- --------- --- ---- ----- ------------- - --------------- -- --- -- --- ------ ---- ------- ---- ----- ----------------- --- ---------------------
上述代码中，我们首先使用 canvas 方法创建了一个 canvas 元素，并使用 getContext 方法获取其上下文对象。然后，我们使用 fillRect 和 fillText 方法绘制了一个简单的图案和文本。最后，我们使用 custom 方法创建一个自定义元素，并将之前绘制的图案设置为其数据。创建自定义元素之后，同样需要使用 draw 方法将其绘制到屏幕上。
如何运行
要运行本文中的示例代码，需要先在树莓派上安装好必要的软件和硬件，包括 nodejs 环境、SPI 接口等等。然后，将代码保存为 demo.js 文件，并在终端中运行 node demo.js 即可看到屏幕上的效果。
总结
本文介绍了 node-epd 包的使用方法，包括引入、驱动屏幕、编写显示内容等等。使用 node-epd 可以方便地驱动电子纸屏幕，并显示各种元素，为一些特定场景中的信息展示和交互提供了良好的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005606681e8991b448de862