<template>
<view>
<view class="title">请在下面输入签名:</view>
<canvas
class="mycanvas"
disable-scroll="true"
canvas-id="Canvas"
id="Canvas"
@touchstart="touchstart"
@touchmove="touchmove"
@touchend="touchend"
@touchcancel="touchcancel"
>
</canvas>
<view class="footer">
<view class="left" @click="finish">完成</view>
<view class="right" @click="clear">清除</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
ctx: "", //绘图图像
points: [], //启动点集合,
item: null,
len: 0,
};
},
onLoad(e) {
console.log(e);
this.ctx = uni.createCanvasContext("Canvas");
this.ctx.lineCap = "round";
this.ctx.lineWidth = 5;
this.ctx.lineJoin = "round";
this.item = window.location.search.substr(1);
},
methods: {
finish() {
if (this.len < 2) {
uni.showToast({
title: "请先签名",
duration: 2000,
});
return;
}
let that = this;
uni.canvasToTempFilePath({
canvasId: "Canvas",
success: (res) => {
that.config
.postRequestFile(
"/sup/seSiteCheckRecording/updatingSignature",
res.tempFilePath,
{
fkId: that.item,
tableName: "sup_plan_list",
}
)
.then((res) => {
var res = JSON.parse(res);
if (res.code == 0) {
uni.showToast({
title: "上传成功",
duration: 2000,
});
} else {
uni.showToast({
title: "上传失败",
duration: 2000,
});
}
})
.catch((err) => {
console.log(err);
});
},
});
},
clear() {
let that = this;
that.len = 0;
uni.getSystemInfo({
success: function (res) {
console.log(res);
let canvasw = res.windowWidth;
let canvash = res.windowHeight;
that.ctx.clearRect(0, 0, canvasw, canvash);
that.ctx.draw(true);
},
});
},
touchstart(e) {
let x = e.changedTouches[0].x;
let y = e.changedTouches[0].y;
let startPoint = { X: x, Y: y };
this.points.push(startPoint);
this.ctx.beginPath();
e.preventDefault();
},
touchmove(e) {
let moveX = e.changedTouches[0].x;
let moveY = e.changedTouches[0].y;
this.points.push({ X: moveX, Y: moveY });
this.len = this.points.length;
if (this.len > 2) {
this.line();
}
e.preventDefault();
},
touchend(e) {
let endX = e.changedTouches[0].x;
let endY = e.changedTouches[0].y;
this.points = [];
e.preventDefault();
},
touchcancel(e) {
e.preventDefault();
},
line() {
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);
},
},
};
</script>
<style>
.title {
height: 50upx;
line-height: 50upx;
font-size: 16px;
}
.mycanvas {
width: 100%;
height: calc(100vh - 200upx);
background-color: #ececec;
}
.footer {
font-size: 16px;
height: 150upx;
display: flex;
justify-content: space-around;
align-items: center;
}
.left,
.right {
line-height: 100upx;
height: 100upx;
width: 250upx;
text-align: center;
font-weight: bold;
color: white;
border-radius: 5upx;
}
.left {
background: #007aff;
}
.right {
background: orange;
}
</style>
uni-app 之Cavase画布签名
于 2022-02-17 15:01:20 首次发布