簽名此處利用的是橫屏需要在json文件中添加
"pageOrientation": "landscape"
<view class='container'>
<!-- 簽名畫布 -->
<view style="width:{{width}}px;height:{{height}}px;border: 3rpx solid #000000;">
<canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback" style="width:{{width}}px;height:{{height}}px">
</canvas>
</view>
<view class='buttonBox'>
<button bindtap='save' class='surebutton' open-type="getuserinfo">確定</button>
<button type="default" class='emptybutton' bindtap="emptydraw">清除</button>
</view>
</view>
//全局配置
const app = getApp()
var context = null;
var isButtonDown = false;
var arrx = [];
var arry = [];
var arrz = [];
var canvasw = 0;
var canvash = 0;
//注冊頁面
Page({
data: {
'width':'',
'height':''
},
canvasIdErrorCallback: function (e) {
console.error(e.detail.errMsg)
},
//開始
canvasStart: function (event) {
isButtonDown = true;
arrz.push(0);
arrx.push(event.changedTouches[0].x);
arry.push(event.changedTouches[0].y);
},
onLoad: function (options) {
canvasw = wx.getSystemInfoSync().windowWidth;
canvash = wx.getSystemInfoSync().windowHeight*0.8;
this.setData({
'height':wx.getSystemInfoSync().windowHeight*0.8,
'width':wx.getSystemInfoSync().windowWidth
})
context = wx.createCanvasContext('canvas');
context.beginPath()
context.draw();
},
//繪畫過程過程
canvasMove: function (event) {
if (isButtonDown) {
arrz.push(1);
arrx.push(event.changedTouches[0].x);
arry.push(event.changedTouches[0].y);
};
for (var i = 0; i < arrx.length; i++) {
if (arrz[i] == 0) {
context.moveTo(arrx[i], arry[i])
} else {
context.lineTo(arrx[i], arry[i])
};
};
context.clearRect(0, 0, canvasw, canvash);//設置坐標和寬高
context.setStrokeStyle('black');//設置或返回用於筆觸的顏色、漸變或模式。
context.setFillStyle('#fff')
context.fillRect(0, 0, this.data.width, this.data.width)
context.setLineWidth(4);//設置或返回當前的線條寬度
context.setLineCap('round');//設置或返回線條的結束端點樣式。
context.setLineJoin('round');//設置或返回兩條線相交時，所創建的拐角類型。
context.stroke();//繪制已定義的路徑。
context.draw(true);
},
canvasEnd: function (event) {
isButtonDown = false;
},
//清除畫布
emptydraw: function () {
arrx = [];
arry = [];
arrz = [];
context.clearRect(0, 0, canvasw, canvash);
context.draw(true);
},
// 點擊保存簽名圖片
save: function () {
var that = this;
if (arrx.length == 0) {
wx.showModal({
content: '簽名內容不能為空！',
showCancel: false
});
return false;
};
wx.canvasToTempFilePath({
canvasId: 'canvas',
fileType: 'jpg',
success: function (res) {
wx.uploadFile({
url: url, //接口地址
header: {
"Content-Type": "multipart/form-data",
'Accept': 'application/json'
},
filePath: res.tempFilePath,
name: 'file',
formData: {
},
success: function (res) {
}, (error) => {
console.log(error)
})
}
}
});
}
})
},
/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
/* pages/signature/signature.wxss */
.container{
padding: 2.5% 0;
}
.canvas {
position: fixed;
box-sizing: border-box;
}
.imageCanvas{
width: 100%;
height: 300rpx;
}
.buttonBox{
width: 100%;
justify-content: center;
display: flex;
position: fixed;
bottom: 0;
left: 0;
}
.surebutton{
color: black;
background-color: aquamarine;
}
.emptybutton{
color: aqua !important;
background-color: rgb(32, 85, 121) !important;
}
