微信小程序实现签字功能

2023-08-04 02:36:04 65

效果展示

准备工作

1.canvas的使用

主要用到了bindtouchstart，bindtouchmove两个属性，捕捉手指移动的同时，将移动前的坐标和移动后的坐标用canvas的画图api绘制出来

2.wx.createCanvasContext

这个api用于创建并获取指定canvas对象

代码说明

在wxml中声明一个canvas

指定canvas-id和触摸开始和移动函数

初始化canvas

onShow:function(){
constcontext=wx.createCanvasContext('firstCanvas')
this.setData({
context:context
})
context.draw()
},

给手指触摸绑定函数

//开始触摸
bindtouchstart:function(e){
console.log("bindtouchstart",e);
this.data.context.moveTo(e.changedTouches[0].x,e.changedTouches[0].y)
},

//触摸移动
bindtouchmove:function(e){
console.log("bindtouchstart",e);
this.data.context.lineTo(e.changedTouches[0].x,e.changedTouches[0].y);
this.data.context.stroke();
this.data.context.draw(true);
this.data.context.moveTo(e.changedTouches[0].x,e.changedTouches[0].y);
},

具体代码

index.wxml





清除


提交

index.js

Page({
data:{
context:null,
imgUrl:""
},
/**记录开始点*/
bindtouchstart:function(e){
this.data.context.moveTo(e.changedTouches[0].x,e.changedTouches[0].y)
},
/**记录移动点，刷新绘制*/
bindtouchmove:function(e){
this.data.context.lineTo(e.changedTouches[0].x,e.changedTouches[0].y);
this.data.context.stroke();
this.data.context.draw(true);
this.data.context.moveTo(e.changedTouches[0].x,e.changedTouches[0].y);
},
/**清空画布*/
clear:function(){
this.data.context.draw();
},
/**导出图片*/
export:function(){
constthat=this;
this.data.context.draw(false,wx.canvasToTempFilePath({
x:0,
y:0,
fileType:'jpg',
canvasId:'firstCanvas',
success(res){
const{
tempFilePath
}=res;
that.setData({
imgUrl:tempFilePath,
})
},
fail(){
wx.showToast({
title:'导出失败',
icon:'none',
duration:2000
})
}
}))
},
onShow:function(){
constcontext=wx.createCanvasContext('firstCanvas')
this.setData({
context:context
})
context.draw()
},
})

总结

以上所述是小编给大家介绍的微信小程序实现签字功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

微信小程序实现签字功能

热门推荐

随机推荐