<template>
<view class="x-modal">
<view class="x-m-con">
<canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
</view>
<view class="x-m-title">
<view class="xm-t-clear" @click="clear">
<text>清除</text>
</view>
<view class="xm-t-sure" @click="confirm">
<text>確定</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
configUrl: '', //七牛云地址
showAutograph: false, //簽名彈框是否顯示
ctx: '', //繪圖圖像
points: [], //路徑點集合
signature: ''
}
},
mounted () {
this.autograph()
},
methods: {
//創(chuàng)建并顯示簽名畫布
autograph() {
this.showAutograph = true;
//創(chuàng)建繪圖對象
this.ctx = uni.createCanvasContext("mycanvas", this);
//設置畫筆樣式
this.ctx.lineWidth = 4;
this.ctx.lineCap = "round"
this.ctx.lineJoin = "round"
},
//觸摸開始，獲取到起點
touchstart(e) {
let startX = e.changedTouches[0].x;
let startY = e.changedTouches[0].y;
let startPoint = {
X: startX,
Y: startY
};
this.points.push(startPoint);
//每次觸摸開始，開啟新的路徑
this.ctx.beginPath();
},
//觸摸移動，獲取到路徑點
touchmove(e) {
let moveX = e.changedTouches[0].x;
let moveY = e.changedTouches[0].y;
let movePoint = {
X: moveX,
Y: moveY
};
this.points.push(movePoint); //存點
let len = this.points.length;
if (len >= 2) {
this.draw(); //繪制路徑
}
},
// 觸摸結束，將未繪制的點清空防止對后續(xù)路徑產生干擾
touchend() {
this.points = [];
},
/* ***********************************************
# 繪制筆跡
# 1.為保證筆跡實時顯示，必須在移動的同時繪制筆跡
# 2.為保證筆跡連續(xù)，每次從路徑集合中區(qū)兩個點作為起點（moveTo）和終點(lineTo)
# 3.將上一次的終點作為下一次繪制的起點（即清除第一個點）
************************************************ */
draw() {
let point1 = this.points[0]
let point2 = this.points[1]
this.points.shift()
this.ctx.moveTo(point1.X, point1.Y)
this.ctx.lineTo(point2.X, point2.Y)
this.ctx.stroke()
this.ctx.draw(true)
},
//清空畫布
clear() {
let that = this;
uni.getSystemInfo({
success: function(res) {
let canvasw = res.windowWidth;
let canvash = res.windowHeight;
that.ctx.clearRect(0, 0, canvasw, canvash);
that.ctx.draw(true);
},
})
},
//關閉并清空畫布
cancel() {
this.showAutograph = false;
this.clear();
},
//完成繪畫并保存到本地
confirm() {
let that = this;
let token = uni.getStorageSync('token')
uni.canvasToTempFilePath({
canvasId: 'mycanvas',
success: function(res) {
//圖片格式為base64，如果不是可上傳七牛云，之后請求簽名接口即可
uni.uploadFile({
url: that.$myurlsst.IMG_URL,
file: that.base64ToBlob(res.tempFilePath) ,
name: 'file',
header: {
"token": token
},
datatype: 'json',
success: (res) => {
var newimgUrl = JSON.parse(res.data) == ''?'':JSON.parse(res.data)
if (newimgUrl.code == '401'){
uni.reLaunch({
url: "/pages/signUp/signUp"
})
} else {
var newurls = newimgUrl.data
console.log(newurls)
}
},
});
}
})
},
// base64轉png
base64ToBlob(urlData) {
let arr = urlData.split(',');
let mime = arr[0].match(/:(.*?);/)[1] || "image/png";
// 去掉url的頭，并轉化為byte
let bytes = window.atob(arr[1]);
// 處理異常,將ascii碼小于0的轉換為大于0
let ab = new ArrayBuffer(bytes.length);
// 生成視圖（直接針對內存）：8位無符號整數(shù)，長度1個字節(jié)
let ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], {
type: mime
});
}
}
}
</script>
樣式使用less,可自行選擇
<style lang="less">
@playcenter:{
display: flex;
align-items: center;
justify-content: center;
}
.x-modal {
width: 100%;
.x-m-title {
width: 100%;
height: 90rpx;
padding: 0 38rpx 0 31rpx;
box-sizing: border-box;
font-size: 29rpx;
color: #333333;
@playcenter();
justify-content: space-between;
.xm-t-clear {
font-size: 25rpx;
width: 120rpx;
height: 54rpx;
color: #999;
border: 1px solid #999;
border-radius: 20rpx;
@playcenter();
}
.xm-t-sure {
font-size: 25rpx;
width: 120rpx;
height: 54rpx;
color: #267DFF;
border: 1px solid #267DFF;
border-radius: 20rpx;
@playcenter();
}
}
.x-m-con {
width: 100%;
margin-top: 5rpx;
box-sizing: border-box;
border: 1px dashed #999;
.mycanvas{
width: 100%;
height: 300rpx;
}
}
}
</style>
