在 Web 开发中，手写签名板功能经常被用到。Angular 是一种流行的前端框架，它提供了 HTML Canvas API 来实现手写签名板。
在本文中，我们将学习如何使用 Angular 和 HTML Canvas 实现手写签名板。我们将介绍如何创建一个组件来显示 Canvas 并在 Canvas 上绘制图形。我们将解释如何使用鼠标输入捕捉来处理手写笔画，并演示如何保存签名为 PNG 图像。
示例代码
在开始本文之前，让我们先看一下实现手写签名板的代码示例。
-- -------------------- ---- -------
------ - ---------- ----------- --------- - ---- ----------------
------------
--------- --------------------
--------- -
------- -----------------
-----
------- --------------------------------
------- ------------------------------
------
--
------- --
------ -
------- --- ----- ------
-
--
--
------ ----- --------------------- -
-------------------- ------- ------------------------------
------- -------- -------------------------
----------- ---- -
----- --------- ----------------- - --------------------------
------------ - --------------------------
-------------- - ----
--------------- - ----
---------------------- - --
-------------------- - --------
------------------------ - --------
---------------------- - --------
------------------------ -- --------------- -----------------
-
-------- ---- -
----- --------- ----------------- - --------------------------
------------------------- -- --------------- -----------------
---------------------- - --------
------------------------ -- --------------- -----------------
-
------- ---- -
----- --------- ----------------- - --------------------------
----- ----- - --------------------------------
----- ---- - ----------------------------
------------- - ----------------
--------- - ------
-------------
-
------- ------------ ------- --- ------- --- ------- --- -------- ---- -
-------------------------
----------------------- ----
----------------------- ----
----------------------
-
------------------ ------------ ---- -
----- --------- ----------------- - --------------------------
----- ---- - ---------------------------------
----- ------ - ------------- - ----------
----- ------ - ------------- - ---------
--------------------- ------- ------- --------
------------------------------------------------------- ------------------
----------------------------------------------------- ----------------
-
----------- - ------- ----------- -- -
----- --------- ----------------- - --------------------------
----- ---- - ---------------------------------
----- - - ------------- - ----------
----- - - ------------- - ---------
--------------
--------------- --- --------- - - - --------------- - --
--------------- --- --------- - - - --------------- - --
--
-
--
--
--------- - -- -- -
---------------------------------------------------------- ------------------
-------------------------------------------------------- ----------------
--
-创建组件
首先，我们需要创建一个组件，它将承载 Canvas 和用于绘画的上下文。
在这个组件中，我们需要定义一些属性和方法：
-- -------------------- ---- -------
------ - ---------- ----------- --------- - ---- ----------------
------------
--------- --------------------
--------- -
------- -----------------
-----
------- --------------------------------
------- ------------------------------
------
--
------- --
------ -
------- --- ----- ------
-
--
--
------ ----- --------------------- -
-------------------- ------- ------------------------------
------- -------- -------------------------
----------- ---- -
-- ---
-
-------- ---- -
-- ---
-
------- ---- -
-- ---
-
------- ------------ ------- --- ------- --- ------- --- -------- ---- -
-- ---
-
------------------ ------------ ---- -
-- ---
-
----------- - ------- ----------- -- -
-- ---
--
--------- - -- -- -
-- ---
--
-初始化 Canvas
在组件的 ngOnInit() 方法中，我们将初始化 Canvas 和它的上下文。我们还将设置一些默认属性，例如线宽，线帽和笔画颜色。
我们还会将 Canvas 填充为白色背景，以便在绘图时有一个干净的画布。
-- -------------------- ---- ------- ----------- ---- - ----- --------- ----------------- - -------------------------- ------------ - -------------------------- -------------- - ---- --------------- - ---- ---------------------- - -- -------------------- - -------- ------------------------ - -------- ---------------------- - -------- ------------------------ -- --------------- ----------------- -
清除 Canvas
在 clear() 方法中，我们将清除 Canvas 上的所有图形。我们还会将 Canvas 再次填充为白色背景。
clear(): void {
const canvasEl: HTMLCanvasElement = this.canvas.nativeElement;
this.context.clearRect(0, 0, canvasEl.width, canvasEl.height);
this.context.fillStyle = 'white';
this.context.fillRect(0, 0, canvasEl.width, canvasEl.height);
}保存签名
在 save() 方法中，我们将使用 toDataURL() 方法将签名保存为 PNG 图像。我们还将创建一个下载链接，用户可以使用它来下载 PNG 图像。
save(): void {
const canvasEl: HTMLCanvasElement = this.canvas.nativeElement;
const image = canvasEl.toDataURL('image/png');
const link = document.createElement('a');
link.download = 'signature.png';
link.href = image;
link.click();
}绘制线条
在 drawLine() 方法中，我们将描绘一条由两个点x0，y0和x1，y1组成的线段。我们将使用 Canvas API 中的 beginPath() 和 stroke() 方法来绘制线条。
private drawLine(x0: number, y0: number, x1: number, y1: number): void {
this.context.beginPath();
this.context.moveTo(x0, y0);
this.context.lineTo(x1, y1);
this.context.stroke();
}响应鼠标输入
在 onMouseDown() 方法中，我们将捕捉鼠标输入事件以便确定鼠标初始位置。在这个事件的处理程序中，我们将调用 drawLine() 方法绘制一条由单个点组成的线条。同时，我们还将添加两个事件监听器以处理鼠标移动和抬起的事件。
在 onMouseMove() 方法中，我们将捕捉鼠标移动事件以便绘制连续的线条。我们将使用 movementX 和 movementY 属性来计算鼠标移动的距离，并调用 drawLine() 方法绘制线条。
在 onMouseUp() 方法中，我们将删除鼠标移动和抬起事件的监听器，以便在鼠标移动时不再绘制。
-- -------------------- ---- -------
------------------ ------------ ---- -
----- --------- ----------------- - --------------------------
----- ---- - ---------------------------------
----- ------ - ------------- - ----------
----- ------ - ------------- - ---------
--------------------- ------- ------- --------
------------------------------------------------------- ------------------
----------------------------------------------------- ----------------
-
----------- - ------- ----------- -- -
----- --------- ----------------- - --------------------------
----- ---- - ---------------------------------
----- - - ------------- - ----------
----- - - ------------- - ---------
--------------
--------------- --- --------- - - - --------------- - --
--------------- --- --------- - - - --------------- - --
--
-
--
--
--------- - -- -- -
---------------------------------------------------------- ------------------
-------------------------------------------------------- ----------------
--确定鼠标位置
在 onMouseDown() 和 onMouseMove() 方法中，我们需要使用 getBoundingClientRect() 方法来确定 Canvas 在页面上的位置。我们将使用这些信息来计算鼠标点击位置的在画布上的位置。
const canvasEl: HTMLCanvasElement = this.canvas.nativeElement; const rect = canvasEl.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top;
总结
在本文中，我们介绍了如何使用 Angular 和 HTML Canvas API 来实现手写签名板。我们演示了如何创建一个组件来显示 Canvas 和处理输入事件。我们还解释了如何将签名保存为 PNG 图像。以上内容旨在介绍和演示 Angular 中实现手写签名板功能的基本思路和技术。希望本文内容能对大家了解 Angular 的使用，并实现类似功能提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64702811968c7c53b0e4b45b