var content = null;
var touchs = [];
var canvasw = 0;
var canvash = 0;
var that = null;
?
Page({
? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ??
? },
? // 畫布的觸摸移動開始手勢響應(yīng)
? start: function(event) {
? ? // console.log("觸摸開始" + event.changedTouches[0].y)
? ? // console.log("觸摸開始" + event.changedTouches[0].x)
? ? //獲取觸摸開始的 x,y
? ? let point = {
? ? ? x: event.changedTouches[0].y,
? ? ? y: event.changedTouches[0].x
? ? }
? ? touchs.push(point)
? },
?
? // 畫布的觸摸移動手勢響應(yīng)
? move: function(e) {
? ? let point = {
? ? ? x: e.touches[0].y,
? ? ? y: e.touches[0].x
? ? }
? ? touchs.push(point)
? ? if (touchs.length >= 2) {
? ? ? this.draw(touchs)
? ? }
? },
?
? // 畫布的觸摸移動結(jié)束手勢響應(yīng)
? end: function(e) {
? ? // console.log("觸摸結(jié)束" + e)
? ? //清空軌跡數(shù)組
? ? for (let i = 0; i < touchs.length; i++) {
? ? ? touchs.pop()
? ? }
?
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面加載
? ?*/
? onLoad: function(options) {
? ? that = this
? ? //獲得Canvas的上下文
? ? content = wx.createCanvasContext('firstCanvas')
? ? //設(shè)置線的顏色
? ? content.setStrokeStyle("#000")
? ? //設(shè)置線的寬度
? ? content.setLineWidth(5)
? ? //設(shè)置線兩端端點樣式更加圓潤
? ? content.setLineCap('round')
? ? //設(shè)置兩條線連接處更加圓潤
? ? content.setLineJoin('round')
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
? ?*/
? onReady: function() {
?
? ? // 獲取畫布尺寸
? ? var query = wx.createSelectorQuery()
? ? query.select('#canvas').boundingClientRect()
? ? query.exec(function(res) {
? ? ? canvasw = res[0].width;
? ? ? canvash = res[0].height
? ? })
? },
?
? //繪制
? draw: function(touchs) {
? ? let point1 = touchs[0]
? ? let point2 = touchs[1]
? ? touchs.shift()
? ? content.moveTo(point1.y, point1.x)
? ? content.lineTo(point2.y, point2.x)
? ? content.stroke()
? ? content.draw(true)
? },
? //清除操作
? clearClick: function() {
? ? //清除畫布
? ? content.clearRect(0, 0, canvasw, canvash)
? ? content.draw(true)
? },
? //保存圖片
? saveClick: function() {
? ? var that = this
? ? wx.canvasToTempFilePath({
? ? ? canvasId: 'firstCanvas',
? ? ? success: function(res) {
? ? ? ? //打印圖片路徑
? ? ? ? var path = res.tempFilePath
? ? ? ? //上傳圖片
? ? ? ? that.uploadSignPic(path)
? ? ? ? console.log(path)
?
?
? ? ? }
? ? })
? },
?
?
? /**
? ?* 上傳簽名圖片
? ?*/
? uploadSignPic: function(path) {
? ? ? //具體實現(xiàn)的業(yè)務(wù)邏輯
? }
?
})

<!-- 手寫界面 -->
<view class='hand_writing_container'>
? <view class="tips_title">請在區(qū)域內(nèi)進行簽名</view>
? <view id="canvas" class="canvas">
? ? <canvas class='firstCanvas'?
? ? canvas-id="firstCanvas"?
? ? bindtouchmove='move'?
? ? bindtouchstart='start'?
? ? bindtouchend='end'?
? ? disable-scroll='true' >
? ? </canvas>
? </view>
? <view class="btn_container">
? ? <view class="btn clean" bindtap="clearClick">
? ? ? <image src="/image/clear.png"></image>
? ? ? <text>內(nèi)容清除</text>
? ? </view>
? ? <view class="btn submit" bindtap="saveClick">
? ? ? <image src="/image/submit.png"></image>
? ? ? <text>確認提交</text>
? ? </view>
? </view>
</view>

.hand_writing_container {
? width: 100%;
? padding: 5.503vh 8.1761vh 0;
? box-sizing: border-box;
}
?
.tips_title {
? height: 4.72vh;
? line-height: 4.72vh;
? margin-bottom: 3.459vh;
? font-size: 4.71698vh;
? font-family: Source Han Sans CN;
? font-weight: 500;
? color: rgba(45, 45, 45, 1);
}
?
.canvas {
? width: 100%;
? height: 66.194968vh;
? margin-bottom: 3.7735849vh;
? box-sizing: border-box;
? border: 1rpx dashed black;
}
?
.firstCanvas {
? background-color: white;
? width: 100%;
? height: 100%;
}
?
.btn_container {
? display: flex;
? align-items: center;
? padding: 0 45.44vh;
? box-sizing: border-box;
? justify-content: space-between;
}
?
.btn {
? width: 45.597484vh;
? height: 13.83647798vh;
? padding: 0 11vh;
? box-sizing: border-box;
? border-radius: 1.572327vh;
? display: flex;
? justify-content: space-between;
? align-items: center;
}
?
.btn image {
? flex: 0 0 4.71698vh;
? width: 4.71698vh;
? height: 4.71698vh;
? display: block;
? margin-right: 1.88679vh;
}
?
.btn text {
? flex: 0 0 auto;
? height: 4.717vh;
? line-height: 4.717vh;
? font-size: 4.71698vh;
? font-family: Source Han Sans CN;
? font-weight: 400;
? color: rgba(255, 255, 255, 1);
}
?
.clean {
? background-color: #07c160;
}
?
.submit {
? background-color: #ff3d33;
}