<template>
<view class="draw-page">
<view class="draw-content">
<canvas
style="width: 100%; height: 100%"
ref="sign"
canvas-id="sign"
id="sign"
disable-scroll
@touchstart="touchstart"
@touchmove="touchmove"
></canvas>
</view>
<view class="actions">
<button @click="background()" type="warn">清空</button>
<button @click="save" type="primary">保存</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
lineColor: "#000", //线条颜色
lineWidth: 2, //线条宽度
};
},
onReady() {
const ctx = uni.createCanvasContext("sign");
this.ctx = ctx;
this.ctx.setStrokeStyle(this.lineColor);
this.ctx.setLineWidth(this.lineWidth);
// 获取canvas的宽高
const query = uni.createSelectorQuery().in(this);
query.select("#sign").boundingClientRect();
query.exec((res) => {
if (res && res.length) {
this.width = res[0].width;
this.height = res[0].height;
this.background();
}
});
},
methods: {
save() {
uni.canvasToTempFilePath({
canvasId: "sign",
success(res) {
// h5 tempFilePath是base64
const url = res.tempFilePath;
console.log(url);
},
fail(err) {
console.error(err);
},
});
},
/**设置背景色 */
background(color = "#f8f8f8") {
this.ctx.fillStyle = color;
this.ctx.fillRect(0, 0, this.width, this.height);
this.ctx.draw();
},
touchstart(e) {
if (e.touches && e.touches.length) {
const t = e.touches[0];
this.mouseX = t.x;
this.mouseY = t.y;
this.pmouseX = this.mouseX;
this.pmouseY = this.mouseY;
}
},
/**触摸移动 */
touchmove(e) {
if (e.touches && e.touches.length) {
const t = e.touches[0];
this.pmouseX = this.mouseX;
this.pmouseY = this.mouseY;
this.mouseX = t.x;
this.mouseY = t.y;
this.draw();
}
},
draw() {
this.ctx.moveTo(this.pmouseX, this.pmouseY);
this.ctx.lineTo(this.mouseX, this.mouseY);
this.ctx.stroke();
this.ctx.draw(true);
},
},
};
</script>
<style lang="scss">
.draw-page {
height: 100vh;
display: flex;
flex-direction: column;
}
.draw-content {
flex: 1;
}
.actions {
display: flex;
button {
flex: 1;
}
}
// #sign {
// box-sizing: border-box;
// border: 1px solid red;
// }
</style>
标签:uniapp,canvas,touches,flex,res,ctx,draw,电子签名,mouseY
From: https://www.cnblogs.com/ajanuw/p/17628470.html