微信小程序实现手写签名的示例代码

网友投稿 561 2023-11-10

−目录1.效果图2.相关代码canvas代码js相关

在微信小程序上实现手写签名，获取canvascontext新版本和旧版本有点坑，新版本在获取canvas后如果页面有滑动，则签名坐标出现异常(在微信开发者工具上会出现2022-2-17)，但是在真机上即使滑动也不会出现异常，为了防止出现问题，暂时使用旧版本获取canvascontext

1.效果图

2.相关代码

canvas代码

微信小程序实现手写签名的示例代码

新版2d canvas

?
1
2
3
4
5
6
7
8
9
10
11
<canvas
id="canvas"
class="canvas"
canvas-id="canvas"
type="2d"
:disable-scroll="true"
@touchstart="handleTouchStart"
@touchmove="handleTouchMove"
@touchend="handleTouchEnd"
@touchcancel="handleTouchCancel"
></canvas>

旧版canvas

js相关

获取新版2d canvas对象

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const query = uni.createSelectorQuery().in(this);
query.select(.canvas).node(res => {
const {
_width,
_height
} = res.node;
/* 获取canvas wxml节点 */
this.canvas = res.node;
this.canvasWidth = _width;
this.canvasHeight = _height;
/* 获取canvas 2dcontext */
this.canvasContext= this.canvas.getContext(2d);
/* 缩放设置canvas画布大小，防止笔迹错位 */
const ratio = wx.getSystemInfoSync().pixelRatio;
this.canvas.width = this.canvasWidth * ratio;
this.canvas.height = this.canvasHeight * ratio;
this.canvasContext.scale(ratio, ratio);
/* 设置线条颜色 */
this.canvasContext.strokeStyle = #2A2A2A;
/* 设置线条粗细 */
this.canvasContext.lineWidth = 4;
/* 设置线条的结束端点样式 */
this.canvasContext.lineCap = round;
}).exec()

缩放设置canvas画布大小，防止笔迹错位，这点和页面滑动没有关系，不设置也会导致坐标错位

?
1
2
3
4
const ratio = wx.getSystemInfoSync().pixelRatio;
this.canvas.width = this.canvasWidth * ratio;
this.canvas.height = this.canvasHeight * ratio;
this.canvasContext.scale(ratio, ratio);

旧版本获取canvas

?
1
2
3
4
5
6
7
this.canvasContext = uni.createCanvasContext(canvas, this);
/* 设置线条颜色 */
this.canvasContext.setStrokeStyle(#2A2A2A);
/* 设置线条粗细 */
this.canvasContext.setLineWidth(4);
/* 设置线条的结束端点样式 */
this.canvasContext.setLineCap(round);

签名js方法，新版本和旧版本只有一个draw的区别，新版本不需要使用draw方法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/* 触摸开始 */
handleTouchStart(e) {
this.drawStartX = e.changedTouches[0].x;
this.drawStartY = e.changedTouches[0].y;
this.canvasContext.beginPath();
},
/* 触摸移动 */
handleTouchMove(e) {
/* 记录当前位置 */
const tempX = e.changedTouches[0].x;
const tempY = e.changedTouches[0].y;
/* 画线 */
this.canvasContext.moveTo(this.drawStartX, this.drawStartY);
this.canvasContext.lineTo(tempX, tempY);
this.canvasContext.stroke();
/* 旧版draw方法，新版本不需要draw */
this.canvasContext.draw(true);
/* 重新记录起始位置 */
this.drawStartX = tempX;
this.drawStartY = tempY;
},
/* 触摸结束 */
handleTouchEnd(e) {
this.canvasContext.save();
},
/* 触摸取消 */
handleTouchCancel(e) {
this.canvasContext.save();
},
/* 清空画布 */
clearCanvas() {
this.canvasContext.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
},

canvas生成本地图片(我这里封装了组件，需要传入this防止this指向异常)

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 生成签名图片 */
generateSignImage() {
return new Promise((resolve, reject) => {
uni.canvasToTempFilePath({
x: 0,
y: 0,
// canvas: this.canvas, // 新版
canvasId: canvas, // 旧版使用id
width: this.canvasWidth,
height: this.canvasHeight,
destWidth: this.canvasWidth,
destHeight: this.canvasHeight,
fileType: png,
quality: 1,
success: res => {
resolve(res.tempFilePath)
},
fail: err => {
reject(err);
}
}, this)
})
},

新版本的canvas主要是canvas wxml节点和canvas context中做了区分，旧版则只有一个canvas context就可以做全部的操作，在生成图片时，新版本是传入wxml对象，旧版本则是传入唯一canvasId，新版本canvas取消了draw方法

您可能感兴趣的文章:小程序实现手写签名功能微信小程序实现横屏手写签名微信小程序实现手写签名(签字版)微信小程序实现手写签名小程序实现手写板签名微信小程序canvas实现手写签名微信小程序实现简单手写签名组件的方法实例微信小程序实现电子签名功能微信小程序实现电子签名并导出图片小程序实现手写签名

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：示例 程序 代码 微信小程序 小程序
上一篇:一文读懂微信小程序页面导航
下一篇:H5页面跳转小程序的3种实现方式
相关文章

 发表评论

暂时没有评论，来抢沙发吧~