"pageOrientation":"landscape"

<view class='contents'>
?? ??? ?<canvas class='firstCanvas' canvas-id="firstCanvas" @touchmove='move' @touchstart='start($event)'
?? ??? ??? ?@touchend='end' @touchcancel='cancel' @longtap='tap' disable-scroll='true' @error='error'>
?? ??? ?</canvas>
?? ??? ?<view class="btnBox">
?? ??? ??? ?<view class="btn1" @tap='clearClick'>重簽</view>
?? ??? ??? ?<view class="btn2" @tap="overSign">完成簽名</view>
?? ??</view>
</view>

page {
?? ??? ?background-color: #f2f2f2;
?? ?}

?? ?canvas {
?? ??? ?background-color: #fff;
?? ??? ?width: calc(100% - 20px);
?? ??? ?height: calc(100% - 70px);
?? ??? ?margin: 10px;
?? ??? ?position: absolute;
?? ?}

?? ?.btnBox {
?? ??? ?display: flex;
?? ??? ?height: 50px;
?? ??? ?width: 100%;
?? ??? ?position: fixed;
?? ??? ?left: 0;
?? ??? ?bottom: 0;
?? ?}

?? ?.btnBox view {
?? ??? ?width: 50%;
?? ??? ?text-align: center;
?? ??? ?height: 50px;
?? ??? ?line-height: 50px;
?? ??? ?color: #FFFFFF;
?? ?}

?? ?.btnBox view:active {
?? ??? ?background-color: #CCCCCC;
?? ??? ?color: #333333;
?? ?}

?? ?.btn1{
?? ??? ?background-color: #FF8F58;
?? ?}

?? ?.btn2{
?? ??? ?background-color: #0599D7;
?? ?}

var content = null;
var touchs = [];
var canvasw = 0;
var canvash = 0;
var _that;
export default {
?? ?data() {
?? ??? ?return {
?? ??? ??? ?isEnd: false, // 是否簽名
?? ??? ??? ?srcA: ''
?? ??? ?}
?? ?},

?? ?methods: {
?? ??? ?overSign: function() {
?? ??? ??? ?if (this.isEnd) {
?? ??? ??? ??? ?let that = this
?? ??? ??? ??? ?uni.canvasToTempFilePath({
?? ??? ??? ??? ??? ?canvasId: 'firstCanvas',
?? ??? ??? ??? ??? ?fileType: 'png',
?? ??? ??? ??? ??? ?success: function(res) {
?? ??? ??? ??? ??? ??? ?//打印圖片路徑
?? ??? ??? ??? ??? ??? ?console.log(res.tempFilePath)
?? ??? ??? ??? ??? ??? ?console.log('完成簽名')
?? ??? ??? ??? ??? ??? ?// 可以再次進行直接保存圖片到本地，這個保存就不寫了可參考之前的canvas圖片保存到本地
?? ??? ??? ??? ??? ??? ?// 一般簽名都是要返回前一頁進行提交，所以在此將圖片寫到微信內(nèi)部文件（不會出現(xiàn)在手機相冊中）返回上一頁獲取，在上一頁提交后在將圖片刪除
?? ??? ??? ??? ??? ??? ?let fsm = uni.getFileSystemManager();
?? ??? ??? ??? ??? ??? ?fsm.readFile({
?? ??? ??? ??? ??? ??? ??? ?filePath: res.tempFilePath,
?? ??? ??? ??? ??? ??? ??? ?success: function(res) {
?? ??? ??? ??? ??? ??? ??? ??? ?//轉(zhuǎn)換成功
?? ??? ??? ??? ??? ??? ??? ??? ?var arrayBuffer = res.data
?? ??? ??? ??? ??? ??? ??? ??? ?fsm.writeFile({
?? ??? ??? ??? ??? ??? ??? ??? ??? ?filePath: `${wx.env.USER_DATA_PATH}/autograph.png`,
?? ??? ??? ??? ??? ??? ??? ??? ??? ?data: arrayBuffer,
?? ??? ??? ??? ??? ??? ??? ??? ??? ?encoding: 'binary',
?? ??? ??? ??? ??? ??? ??? ??? ??? ?success() {
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?console.log('寫入成功')
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?uni.navigateBack()
?? ??? ??? ??? ??? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ??? ??? ??? ??? ?fail(err) {
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?console.log(err)
?? ??? ??? ??? ??? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ??? ??? ??? ?});
?? ??? ??? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ??? ??? ?fail: function(e) {}
?? ??? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?})
?? ??? ??? ?} else {
?? ??? ??? ??? ?uni.showToast({
?? ??? ??? ??? ??? ?title: '請先完成簽名',
?? ??? ??? ??? ??? ?icon: "none",
?? ??? ??? ??? ??? ?duration: 1500,
?? ??? ??? ??? ??? ?mask: true
?? ??? ??? ??? ?})
?? ??? ??? ?}

?? ??? ?},
?? ??? ?// 畫布的觸摸移動開始手勢響應(yīng)
?? ??? ?start: function(event) {
?? ??? ??? ?// console.log(event)
?? ??? ??? ?// console.log("觸摸開始" + event.changedTouches[0].x)
?? ??? ??? ?// console.log("觸摸開始" + event.changedTouches[0].y)
?? ??? ??? ?//獲取觸摸開始的 x,y
?? ??? ??? ?let point = {
?? ??? ??? ??? ?x: event.changedTouches[0].x,
?? ??? ??? ??? ?y: event.changedTouches[0].y
?? ??? ??? ?}
?? ??? ??? ?// console.log(point)
?? ??? ??? ?touchs.push(point);

?? ??? ?},
?? ??? ?// 畫布的觸摸移動手勢響應(yīng)
?? ??? ?move: function(e) {
?? ??? ??? ?let point = {
?? ??? ??? ??? ?x: e.touches[0].x,
?? ??? ??? ??? ?y: e.touches[0].y
?? ??? ??? ?}
?? ??? ??? ?// console.log(point)
?? ??? ??? ?touchs.push(point)
?? ??? ??? ?if (touchs.length >= 2) {
?? ??? ??? ??? ?this.draw(touchs)
?? ??? ??? ?}
?? ??? ?},
?? ??? ?// 畫布的觸摸移動結(jié)束手勢響應(yīng)
?? ??? ?end: function(e) {
?? ??? ??? ?// console.log("觸摸結(jié)束" + e)
?? ??? ??? ?// 設(shè)置為已經(jīng)簽名
?? ??? ??? ?this.isEnd = true
?? ??? ??? ?// 清空軌跡數(shù)組
?? ??? ??? ?for (let i = 0; i < touchs.length; i++) {
?? ??? ??? ??? ?touchs.pop()
?? ??? ??? ?}

?? ??? ?},
?? ??? ?// 畫布的觸摸取消響應(yīng)
?? ??? ?cancel: function(e) {
?? ??? ??? ?console.log("觸摸取消" + e)
?? ??? ?},
?? ??? ?// 畫布的長按手勢響應(yīng)
?? ??? ?tap: function(e) {
?? ??? ??? ?console.log("長按手勢" + e)
?? ??? ?},
?? ??? ?error: function(e) {
?? ??? ??? ?console.log("畫布觸摸錯誤" + e)
?? ??? ?},
?? ??? ?//繪制
?? ??? ?draw: function(touchs) {
?? ??? ??? ?// console.log(touchs[0], touchs[1])
?? ??? ??? ?let point1 = touchs[0]
?? ??? ??? ?let point2 = touchs[1]
?? ??? ??? ?touchs.shift()
?? ??? ??? ?content.moveTo(point1.x, point1.y)
?? ??? ??? ?content.lineTo(point2.x, point2.y)
?? ??? ??? ?content.stroke()
?? ??? ??? ?content.draw(true)
?? ??? ?},
?? ??? ?//清除操作
?? ??? ?clearClick: function() {
?? ??? ??? ?// 設(shè)置為未簽名
?? ??? ??? ?this.isEnd = false
?? ??? ??? ?//清除畫布
?? ??? ??? ?content.clearRect(0, 0, canvasw, canvash)
?? ??? ??? ?content.draw(true)
?? ??? ?},
?? ?},
?? ?/*生命周期函數(shù)--監(jiān)聽頁面加載 */
?? ?onLoad: function(options) {
?? ??? ?_that = this
?? ??? ?let dev = uni.getSystemInfoSync()
?? ??? ?console.log(dev)
?? ??? ?// 獲取橫屏的寬高 設(shè)置畫布的大小
?? ??? ?// screenWidth windowHeight
?? ??? ?canvasw = dev.screenWidth - 20
?? ??? ?canvash = dev.screenHeight - 70
?? ??? ?//獲得Canvas的上下文
?? ??? ?content = wx.createCanvasContext('firstCanvas')
?? ??? ?//設(shè)置線的顏色
?? ??? ?content.setStrokeStyle("#000")
?? ??? ?//設(shè)置線的寬度
?? ??? ?content.setLineWidth(5)
?? ??? ?//設(shè)置線兩端端點樣式更加圓潤
?? ??? ?content.setLineCap('round')
?? ??? ?//設(shè)置兩條線連接處更加圓潤
?? ??? ?content.setLineJoin('round')
?? ??? ?content.setFillStyle('white'); //填充白色

?? ??? ?content.fillRect(0, 0, canvasw, canvash); //畫出矩形白色背景

?? ??? ?content.restore()
?? ??? ?content.save()
?? ?},
}

// 獲取本地保存的圖片
getImg() {
?? ??? ?var timestamp = new Date().getTime();
?? ??? ?uni.getImageInfo({
?? ??? ??? ?src: `${wx.env.USER_DATA_PATH}/autograph.png`,
?? ??? ??? ?success: function(res) {
?? ??? ??? ??? ?console.log(res.path)
?? ??? ??? ??? ?_that.srcA = res.path
?? ??? ??? ??? ?hasQM = true
?? ??? ??? ?},
?? ??? ??? ?fail: function(err) {
?? ??? ??? ??? ?console.log(err)
?? ??? ??? ??? ?_that.srcA = ''
?? ??? ??? ?},
?? ??? ?})
?? ?},
?? ?//刪除緩存的圖片
?? ?delPic() {
?? ??? ??? ?let fsm = uni.getFileSystemManager();
?? ??? ??? ?fsm.unlink({
?? ??? ??? ??? ?filePath: `${wx.env.USER_DATA_PATH}/autograph.png`,
?? ??? ??? ??? ?success(res) {
?? ??? ??? ??? ??? ?console.log(res)
?? ??? ??? ??? ??? ?_that.srcA = ''
?? ??? ??? ??? ??? ?hasQM = false
?? ??? ??? ??? ?},
?? ??? ??? ??? ?fail(res) {
?? ??? ??? ??? ??? ?console.error(res)
?? ??? ??? ??? ?}
?? ?})
}