小程序封装手写签名组件

在本篇博客中，我们将学习如何封装一个手写签名组件，它将允许用户在小程序中手写签名，保存签名，清除签名和撤销上一步操作。

思路

使用 canvas 组件来绘制手写签名。canvas 元素允许我们绘制2D图形，我们可以使用它来绘制签名。创建一个自定义组件，该组件将包含一个 canvas 元素，以及保存、清除和撤销上一步操作的功能。

1. 我们首先需要新建一个自定义组件文件夹。在小程序的根目录下，创建一个名为 signaImage 的文件夹。在 signaImage 文件夹下，创建一个名为 signaImage.wxml 的文件，以及一个名为 signaImage.js 的文件。
2. 在 signaImage.wxml 文件中，创建一个 canvas 元素，并绑定一些事件，以便我们能够绘制签名。我们还将创建一些按钮，以便用户可以保存、清除和撤销签名。
3. 在 signaImage.js 文件中，编写代码来处理用户与组件的交互。创建一个 signaImage 类，该类将包含保存、清除和撤销签名的方法。我们还将编写一些事件处理程序，以便我们能够绘制签名并处理用户与按钮的交互。
4. 最后，在 app.json 文件中注册我们的组件，以便我们可以在小程序中使用它。

代码实现

signaImage.wxml

<canvas canvas-id="signaImage" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd"></canvas>
<button bindtap="save">保存</button>
<button bindtap="clear">清除</button>
<button bindtap="undo">撤销</button>

signaImage.js

class signaImage {constructor(ctx) {this.ctx = ctx;this.paths = [];this.currentPath = null;}start(x, y) {this.currentPath = {points: [{x, y}], color: '#000000', width: 2};}move(x, y) {this.currentPath.points.push({x, y});this.draw();}end() {this.paths.push(this.currentPath);this.currentPath = null;}undo() {this.paths.pop();this.draw();}clear() {this.paths = [];this.draw();}draw() {this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);this.paths.forEach(path => {this.ctx.strokeStyle = path.color;this.ctx.lineWidth = path.width;this.ctx.beginPath();path.points.forEach((point, index) => {if (index === 0) {this.ctx.moveTo(point.x, point.y);} else {this.ctx.lineTo(point.x, point.y);}});this.ctx.stroke();});if (this.currentPath) {this.ctx.strokeStyle = this.currentPath.color;this.ctx.lineWidth = this.currentPath.width;this.ctx.beginPath();this.currentPath.points.forEach((point, index) => {if (index === 0) {this.ctx.moveTo(point.x, point.y);} else {this.ctx.lineTo(point.x, point.y);}});this.ctx.stroke();}}
}Component({/* 组件的属性列表*/properties: {},/* 组件的初始数据*/data: {},/* 组件的方法列表*/methods: {save() {wx.canvasToTempFilePath({canvasId: 'signaImage',success: (res) => {wx.saveImageToPhotosAlbum({filePath: res.tempFilePath,success: () => {wx.showToast({title: '保存成功', icon: 'success'});}});}});},clear() {const ctx = wx.createCanvasContext('signaImage', this);const signaImage = new signaImage(ctx);signaImage.clear();},undo() {const ctx = wx.createCanvasContext('signaImage', this);const signaImage = new signaImage(ctx);signaImage.undo();},touchStart(event) {const {x, y} = event.changedTouches[0];const ctx = wx.createCanvasContext('signaImage', this);const signaImage = new signaImage(ctx);signaImage.start(x, y);},touchMove(event) {const {x, y} = event.changedTouches[0];const ctx = wx.createCanvasContext('signaImage', this);const signaImage = new signaImage(ctx);signaImage.move(x, y);},touchEnd(event) {const ctx = wx.createCanvasContext('signaImage', this);const signaImage = new signaImage(ctx);signaImage.end();}}
});

app.json

{"pages": ["pages/index/index"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle": "black"},"usingComponents": {"signaImage": "/signaImage/signaImage"}
}

注意事项

• 在 signaImage.js 中， wx.createCanvasContext 方法来获取 canvas 的上下文对象。这个方法有两个参数，第一个参数是 canvas 的 id，第二个参数是组件实例对象。这里我们传入了 this，表示我们在组件内部使用这个方法。
• 在 signaImage.js 中，我们通过 paths 数组来存储已经绘制的路径，通过 currentPath 变量来存储当前正在绘制的路径。我们可以通过 paths 数组来撤销上一步操作，通过 currentPath 变量来清除当前正在绘制的路径。
• 在 signaImage.wxml 中， canvas-id 来指定 canvas 元素的 id。这个 id 将用于在 signaImage.js文件中获取 canvas 上下文对象。
• 在 signaImage.wxml 文件， canvas 元素的 bindtouchstart、bindtouchmove、bindtouchend 属性来绑定 touch 事件，从而实现手写签名功能。
• 在 index.wxml 文件，引入了自定义组件 signaImage，并在其中设置了组件的宽度和高度，使其适应屏幕大小。
• 在 index.js 文件，通过 wx.getSystemInfo 方法来获取系统信息，从而动态设置 canvas 的宽度和高度，使其适应不同的屏幕大小。

总结

本文详细介绍了如何封装一个小程序手写签名组件，包括签名、保存签名、清除签名和撤销功能。使用 canvas 来实现手写签名功能，通过自定义组件的方式来封装手写签名组件，使其可以在不同的页面中重复使用。同时，用面向对象的编程方式，将手写签名的逻辑封装在一个 signaImage 类中，使代码更加清晰易懂。最后希望能帮助大家更好地理解和使用本文介绍的手写签名组件。