小程序封装手写签名组件
在本篇博客中，我们将学习如何封装一个手写签名组件，它将允许用户在小程序中手写签名，保存签名，清除签名和撤销上一步操作。
思路
使用 canvas 组件来绘制手写签名。canvas 元素允许我们绘制2D图形，我们可以使用它来绘制签名。创建一个自定义组件，该组件将包含一个 canvas 元素，以及保存、清除和撤销上一步操作的功能。
- 我们首先需要新建一个自定义组件文件夹。在小程序的根目录下，创建一个名为
signaImage的文件夹。在signaImage文件夹下，创建一个名为signaImage.wxml的文件，以及一个名为signaImage.js的文件。 - 在
signaImage.wxml文件中，创建一个 canvas 元素，并绑定一些事件，以便我们能够绘制签名。我们还将创建一些按钮，以便用户可以保存、清除和撤销签名。 - 在
signaImage.js文件中，编写代码来处理用户与组件的交互。创建一个signaImage类，该类将包含保存、清除和撤销签名的方法。我们还将编写一些事件处理程序，以便我们能够绘制签名并处理用户与按钮的交互。 - 最后，在
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 类中，使代码更加清晰易懂。最后希望能帮助大家更好地理解和使用本文介绍的手写签名组件。
