无纸化办公，这是老板对我的要求，然而有人现场执法文件全部电子化，只有签字部分让一个搞web的人有点儿头疼，不能为了这个找个人来开发app吧于是想到了小程序，对于一个新接触小程序的人来说还是有挑战性的，因为我第一次写小程序。还好有文档。所以思路来了，触碰屏幕记录开始画的位置
手指在屏幕上滑动就是画咯，画完了记录最后的离开屏幕的位置
下一个笔画开始还是先触碰屏幕
手指滑动
最后点击一个完成签字就行了
小程序的canvas 还是挺好的。下面放代码
首先是
被检查单位签字
完成签字
重新签字
很简单啊 就是一个布局里面有个画布 有两个按钮
然后是{border:1px solid #dedede; margin: 10px; height:160px }
.image{border:1px solid #dedede; margin: 10px; height:160px }
.signBtn{display: flex; margin-top:20px;}
.signTitle{ text-align: center; font-size:1.2em;margin:10px auto;}
.handWriting{width:100%}
.image image{width:100%; height:160px }
没啥好说的 就是布局div+css
最后是({
data: {
context1: null,
hasDraw:false, //默认没有画
src:null
},
onLoad: function() {
var context1 = ('handWriting1');
("#000000")
(3);
({
context1: context1,
})
},
touchstart1: function(e) {
var context1 = .context1;
([0].x, [0].y);
({
context1: context1,
hasDraw : true, //要签字了
});
},
touchmove1: function(e) {
var x = [0].x;
var y = [0].y;
var context1 = .context1;
(3);
(x, y);
();
('round');
(true);
(x, y);
},
reSign1: function() { //重新画
var that = this;
var context1 = .context1;
(); //清空画布
({
hasDraw: false, //没有画
src: null
});
},
sign1ok: function () {
var that = this;
if(!){
console.log("签字是空白的 没有签字")
}else{
var context1 = .context1;
(true, ({
canvasId: 'handWriting1',
success(res) {
() //得到了图片下面自己写上传吧
({
src:
})
// ({
// url: "http://**************",
// filePath: ,
// name: "file",
// formData: {
// filetype: "image",
// },
// success: function (result) {
// (result)
// }
// })
}
}))
}
},
});
最后放一下 码云链接：/hebzhm/xiaochegnxu_signature