前言

由于前一段时间的电子合同功能需要合同双方的签名，在此记录一下小程序前端的手写签名组件。

提示：以下是本篇文章正文内容，下面案例可供参考

一、.js文件的内容

// pages/component/signature/signature.js
var cxt = null;// 使用 wx.createContext 获取绘图上下文 cxt
var arrx = [];//所有点的X轴集合
var arry = [];//所有点的Y轴集合
var canvasw = 0;//画布的宽
var canvash = 0;//画布的高
// var canvasTop=0;
// var canvasLeft=0;
Component({
/**
* 组件的属性列表
*/
properties: {
can:Boolean,//用于显示隐藏canvas
},
/**
* 组件的初始数据
*/
data: {
src:""
},
/**
* 组件的方法列表
*/
methods: {
//显示隐藏组件
back(){
//子组件传递给父组件一个方法canvasDis，并传递一个参数src给父组件
this.triggerEvent("canvasDis",{src:this.data.src})
},
//创建canvas上下文
createdCanvas(){
wx.showLoading({
title: '加载中...',
mask: true
})
// 使用 wx.createContext 获取绘图上下文 cxt
//创建 canvas 的绘图上下文,因为这里是封装成组件，所有需要加this
cxt = wx.createCanvasContext('canvas',this);
cxt.beginPath();
//封装成组件，所有需要in(this),如果不加无法创建画布
var query = wx.createSelectorQuery().in(this).select('.handCenter');
query.boundingClientRect(rect => {
// canvasTop = rect.top;
// canvasLeft = rect.left;
canvasw = rect.width/2;
canvash = rect.height/2;
// var ratio = 2;
// while (canvasw > 150){// 保证宽在150以内
//
canvasw = Math.trunc(res.width / ratio)
//
canvash = Math.trunc(res.height / ratio)
//
ratio++;
// }
wx.hideLoading()
}).exec();
},
//canvas发生错误时触发
canvasIdErrorCallback(e){
console.error(e.detail.errMsg)
},
//canvas触摸开始
canvasStart(e){
arrx.push(e.changedTouches[0].x);
arry.push(e.changedTouches[0].y);
},
//canvas触摸过程中
canvasMove(e){
let len = arrx.length;
cxt.moveTo(arrx[len - 1], arry[len - 1]);//把路径移动到画布中指定的点,第一个参数为x轴，第二个参数为y轴
arrx.push(e.changedTouches[0].x);//手指移动过程中canvas的横坐标存入到全局数组变量arrx中
arry.push(e.changedTouches[0].y);//手指移动过程中canvas的纵坐标存入到全局数组变量arry中
cxt.lineTo(e.changedTouches[0].x, e.changedTouches[0].y);//moveTo坐标到lineTo坐标的
cxt.setLineWidth(4);//设置线条的宽度
cxt.setLineCap('round');//设置结束时 点的样式
cxt.stroke();//画线
cxt.draw(true);//设置为true时，会保留上一次画出的图像，false则会清空(方式二设置为false,一为true)
},
getimg() {
if (arrx.length == 0) {
wx.showModal({
title: '提示',
content: '签名内容不能为空！',
showCancel: false
});
return false;
};
wx.showLoading({
title: '签名生成中..',
mask:true
})
let that = this;
wx.canvasToTempFilePath({
canvasId: 'canvas',
success: function (res) {
that.setData({
src: res.tempFilePath
})
wx.hideLoading();
//子组件传递给父组件一个方法canvasDis，并传递一个参数src给父组件
that.triggerEvent("canvasDis",{src:res.tempFilePath})
}
},this)
},
cleardraw() {
//清除画布
arrx = [];
arry = [];
cxt.clearRect(0, 0, canvasw, canvash);
cxt.draw();
this.setData({src:''});
},
canvasEnd(e){}
},
ready(){
this.createdCanvas()
}
})

二、.json文件的内容

{
"component": true,
"usingComponents": {}
}

三、.wxml文件的内容

<view class="wrapper">
<view class="back" catchtap="back">返回</view>
<view class="handBtn">
<button catchtap="cleardraw" class="delBtn">清空</button>
<button catchtap="getimg" class="subBtn">完成</button>
</view>
<view class="handCenter">
<canvas class="canvas"
id="canvas"
canvas-id="canvas"
disable-scroll="true"
bindtouchstart="canvasStart"
bindtouchmove="canvasMove"
binderror="canvasIdErrorCallback"></canvas>
<cover-image class='overImg' src="{{src}}" wx:if="{{src!=''}}"></cover-image>
</view>
</view>

四、.wxss文件的内容

.wrapper{
position: fixed;
top:0;
bottom: 0;
right: 0;
left: 0;
box-sizing: border-box;
background-color: #fff;
z-index: 99999;
}
.back{
width: 160rpx;
background: #008ef6;
margin: 20rpx;
padding: 10rpx 0;
color:#fff;
border-radius:16rpx;
text-align: center;
}
.handCenter{
box-sizing: border-box;
width: 100%;
}
canvas {
width:100%;
height: 310rpx;
margin:auto;
}
.overImg{
width: 200rpx;
height: 200rpx;
}
.handCenter {
box-sizing: border-box;
}
.handBtn {
height: 100rpx;
display: flex;
align-content: space-between;
align-items: center;
margin-top:40rpx;
}
.delBtn {
width: 40%;
color: #666;
}
.subBtn {
width: 40%;
background: #008ef6;
color: #fff;
}
button{
font-size: 28rpx;
}

五、要引用的.wxml文件的内容

<view class="cu-form-group">
<view class="title text-cyan light">签名</view>
<view class='cu-tag bg-cyan radius padding' bindtap='handlChangeCanvasShow'>
点击设置
</view>
</view>
<signature
wx:if="{{can}}"
backInfo="{{can}}"
bindcanvasDis="handlChangeCanvasShow"
>
</signature>
<image wx:if="{{src}}" src='{{src}}'
style="width: 100%;height: 310rpx;border:1px solid #ccc"></image>

六、要引用的.js文件的内容

data: {
dataNow: moment().format('YYYY-MM-DD'),
liveDate: moment().format('YYYY-MM-DD'),
// leaveDate: moment().add(1,"months").format('YYYY-MM-DD'),
leaseDuration: 1,//
multiArray: [],
multiIndex: [0, 0],
roomTypeList:[],
waterMode:1,//
refundWay: false, //
showRefundWay: false,
priceLineList: [],
newPriceLineList: [],
can:false,
src:"",
imageSrc:"",
imageBase64: ''
},
//handlChangeCanvasShow自定义事件，子组件传递过来的方法和数据
handlChangeCanvasShow(e){
let that = this
that.setData({
can:(!this.data.can)
})
//显示隐藏canvas
if (e.changedTouches == undefined && e.detail.src != '') {
wx.getFileSystemManager().readFile({
filePath: e.detail.src, //选择图片返回的相对路径
encoding: 'base64', //编码格式
success: res => { //成功的回调
that.setData({
imageBase64: res.data
})
}
})
that.setData({
src:e.detail.src
})
//点击了确定就把图片直接保存并更新并重新加载页面
wx.uploadFile({
url: http.api.fileupload,
filePath: e.detail.src,
name: 'file',
formData: {
dir: 'jianxi_s_addSign',
},
success(res) {
let data = JSON.parse(res.data)
if (data.code == 0) {
that.setData({
imageSrc: data.url
})
} else {
util.hideLoading()
}
},
fail() {
util.hideLoading()
}
})
} else {
let imageUrl = this.data.signUrl == "undefined" ? '' : this.data.signUrl;
that.setData({
src: imageUrl
})
}
},

七、总结

这个是小程序的签名案例，可以参考。

最后

以上就是懦弱刺猬为你收集整理的记录一下小程序的手写签名组件前言一、.js文件的内容二、.json文件的内容三、.wxml文件的内容四、.wxss文件的内容五、要引用的.wxml文件的内容六、要引用的.js文件的内容七、总结的全部内容，希望文章能够帮你解决记录一下小程序的手写签名组件前言一、.js文件的内容二、.json文件的内容三、.wxml文件的内容四、.wxss文件的内容五、要引用的.wxml文件的内容六、要引用的.js文件的内容七、总结所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。