在 React 中创建签名板

最近，一位客户委托我制作一个表单，允许用户使用无线笔式鼠标进行签名。客户的目标是获取用户签名，用于将来审计的报告。

起初，我考虑从零开始构建自己的签名板。然而，我没有时间这么做。这个功能需要在一周内上线。不幸的是，这在实际工作中是常有的事。这就是为什么我想写这个案例。你不可能总是有时间从头开始构建应用程序中的每个功能。有时，你不得不依赖其他开发者创建的库。本文将帮助初学者了解如何组合不同的库来创建可用的产品。

好的，让我们开始构建签名板。首先，我写了一个用户故事。以下是我们将要构建的用户故事：

• 用户看到一个可以点击打开弹出窗口的按钮
• 当弹出窗口打开时，用户可以在画布上查看和绘制
• 用户可以选择通过“关闭”按钮退出弹出窗口，通过“清除”按钮清除画布，或通过“保存”按钮将签名保存为图像。

现在我们知道要构建什么了，可以开始编写代码了。我们可以将用户故事列表项作为里程碑。

用户看到一个可以点击打开弹出窗口的按钮

我将使用 React 完成此任务，因此让我们使用 create-react-app 来引导项目。

为此，我们需要做的就是在终端上输入以下命令：

npx create-react-app signature-pad

有关 create-react-app 的更多信息，请查看此Github Repo

项目准备就绪后，我们进入文件夹并启动代码编辑器。我使用的是VS Code。

# navigate to the project folder in your terminal
cd signature-pad

# command to start VS Code once you are in root folder of the project
code .

现在我们已经设置好了一切，可以通过输入以下命令来启动我们的项目：

# start project
npm start

项目启动后我们应该看到以下内容：

如果你打开你的App.js文件，我们应该看到以下内容：

让我们把所有这些代码都删掉，然后添加我们需要的东西。根据我们的用户故事，一个按钮，点击后会弹出一个带有签名板的弹窗。

我们的应用程序现在应该是这样的：

项目这部分的最后一步是点击按钮时弹出一个窗口。reactjs-popup 是一个很好的库，可以帮助实现这一点。要安装它，我们输入

npm install --save reactjs-popup

此库可用于创建弹出模型、工具提示和嵌套菜单。在本例中，我们将重点介绍如何使用它来创建弹出模型。有关更多信息，请参阅其非常有用的文档页面。

安装好库后，我们将其导入到App.js文件中。接下来，我们将Popup组件添加到 render 方法中。该组件接收许多 props。在本例中，我们主要关注两个：modal props（默认情况下为 false，表示会显示工具提示）和触发 props，后者接收一个触发弹窗的组件。在本例中，触发 props 指的是我们已经创建的按钮。

现在，当我们点击按钮时，我们应该得到一个弹出窗口。弹出窗口的内容将进入我们的Popup组件内部。

这就是我们现在应该拥有的：

我们已经成功完成了用户故事的第一部分。现在让我们继续下一部分！

当弹出窗口打开时，用户可以在画布上查看和绘制

为了在弹出窗口中构建画布，我们将使用 react-signature-canvas。这是一个功能强大的库，可以让签名板的使用变得非常轻松。尤其是在我们开始考虑为签名板添加诸如清除和保存等功能时。

要安装它，我们输入：

npm install --save react-signature-canvas

安装完成后，我们导入SignatureCanvas组件并将其放置在我们的Popup组件中。就这样！

现在，弹窗内已经有了画布。代码如下：

这就是我们的应用程序应该显示的内容：

在进入用户故事的下一个环节之前，我们先给画布添加一些样式。我会给画布添加一个边框，方便我们识别，并设置它的宽度和高度。

该SignaturePad组件有一个名为 的 prop canvasProps，允许我们将属性传递给画布。在本例中，我将为画布添加一个名为“signatureCanvas”的类。

你可能注意到了，我还导入了一个名为的 CSS 文件sigCanvas.css。我会把所有与画布相关的样式都放在这里。

结果应该如下所示：

好的，准备好进行最后一步。

用户可以选择通过“关闭”按钮退出弹出窗口，通过“清除”按钮清除画布，或通过“保存”按钮将签名保存为图像。

让我们从关闭按钮开始。让我们添加一个带有 onClick 事件的按钮，onClick 事件内部会包含关闭弹窗的方法。reactjs-popup文档建议为组件提供一个子函数Popup。该函数带有一个参数close，用于处理关闭事件，并返回弹窗中所需的组件。

此外，我们不应该允许用户通过此按钮以外的方式关闭弹窗。为此，我们需要传递closeOnDocumentClickprop 并传入一个真值。

我们的应用程序现在看起来是这样的：

接下来我们需要一个按钮来清除画布。react-signature-canvas提供了几种操作画布的方法。为了使用这个方法，我们需要获取画布的一个实例。这可以通过 React refs 来实现。

sigCanvas让我们使用 React Hooks 来实现这一点。首先，我们使用hook创建一个名为 的 ref useRef，其初始值是一个空对象。接下来，我们SignaturePad使用名为 ref 的 prop 将其传递给组件。最后，我们创建一个名为 的函数，clear该函数将在每次点击清除按钮时调用。

在 clear 函数中，我们只需clear()通过 canvas ref调用该方法即可sigCanvas。我意识到步骤很多，所以我在下面的代码中写了注释：

我们的应用程序现在应该是这样的：

现在来看看最后一个按钮，也就是“保存”按钮。这个按钮应该只输出一个代表图片的 base64 字符串。你可以用它将图片存储在数据库中，或者直接将图片上传到服务器。在本例中，我们不会连接任何服务器，因此我们只需将 base64 编码输出到控制台即可。

react-signature-canvas有一个名为 的方法getTrimmedCanvas()，可以修剪画布上的空白（以优化图像），并返回表示图像的 base64 字符串。所有这些都通过我们的sigCanvas引用实现。

我们的应用程序现在应该是这样的：

好了！所有基本功能都完成了！

我确实想为这个项目添加一个部分。让我们将保存的签名输出到屏幕上，而不仅仅是记录它。

我们只需在弹出按钮下方添加一个图片标签，并将图片 URL 传递给它即可。当然，这个图片 URL 就是我们登录到控制台时使用的 URL，所以我们可以将其存储在状态中，而不是像上面那样。

结果应该是这样的：

好了，各位！我们成功完成了用户故事。当然还有改进的空间，但所有基本功能都已具备。

您可以通过以下链接试用代码并添加更多功能

有问题吗？欢迎通过评论区或我的推特联系我。

好了！现在回去学习吧👨🏿‍💻