一、在.json里加入强制装换屏幕的配置
"pageOrientation": "landscape"
二、使用用canvas绘制签名
<template>
<div class="written"
v-show="status == 'default'">
<div class="canvasBox">
<canvas :style="{ width: (canvaw)+'rpx', height: (canvah) + 'rpx' }"
class="firstCanvas"
canvas-id="firstCanvas"
@touchmove="move"
@touchend="end"
@error="error"
disable-scroll="true"></canvas>
<p class="info"
v-if="flag">签字方向</p>
</div>
<div class="button_clear"
@click="clearClick()">重写</div>
<div class="button_submit"
@click="saveClick()">保存</div>
</div>
</template>
<script>
let content = null;
let touchs = [];
let canvasw = 0;
let canvash = 0;
export default {
data () {
return {
signImage: '',
imgUrl: '',
canvaw: 0,
canvah: 0,
flag: true,
status: false
}
},
props: {
status: {
type: String,
default: 'default',
required: false
}
},
onLoad () {
var _this = this;
wx.getSystemInfo({
success (res) {
console.log(res)
canvasw = res.windowWidth;
canvash = res.windowHeight;
_this.canvaw = res.windowWidth * 0.75;
_this.canvah = res.windowHeight * 0.65;
content = wx.createCanvasContext('firstCanvas', this);
content.setStrokeStyle("#000000");
content.setLineWidth(5);
content.setLineCap('round');
content.setLineJoin('round')
},
});
},
methods: {
error (e) {
wx.showModal({
title: "初始化异常,请尝试刷新!"
});
},
move (e) {
// 开始清空背景图
if (this.flag) {
content.clearRect(0, 0, canvasw, canvash);
this.flag = false;
}
let point = { x: e.touches[0].x, y: e.touches[0].y };
touchs.push(point);
if (touchs.length >= 2) {
this.draw(touchs)
}
},
end (e) {
for (let i = 0; i < touchs.length; i++) {
touchs.pop()
}
},
//重签
clearClick () {
var _this = this;
content.clearRect(0, 0, canvasw, canvash);
this.flag = true;
content.draw(true)
},
//保存
saveClick () {
var that = this;
wx.canvasToTempFilePath({
canvasId: 'firstCanvas',
success (res) {
that.signImage = res.tempFilePath;
console.log(that.signImage);//图片地址
}
}, this)
},
draw (touchs) {
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);
}
}
}
</script>
<style scoped>
.canvasBox {
width: 100%;
height: 80%;
display: flex;
align-items: center;
justify-content: space-around;
position: relative;
}
.info {
position: absolute;
font-size: 20rpx;
opacity: 0.5;
}
.firstCanvas {
background-color: #fff;
width: 100%;
height: 98%;
border: 1rpx dashed #e9e9e9;
border-radius: 5rpx;
}
.button_clear {
position: absolute;
bottom: 25rpx;
left: 40rpx;
width: 80rpx;
height: 30rpx;
background-color: #fff;
border: #d23d44 1px solid;
text-align: center;
line-height: 30rpx;
border-radius: 5rpx;
color: #d23d44;
z-index: 10000;
}
.button_submit {
position: absolute;
bottom: 25rpx;
right: 40rpx;
width: 80rpx;
height: 30rpx;
background-color: #d23d44;
border: #d23d44 1px solid;
text-align: center;
line-height: 30rpx;
border-radius: 5rpx;
color: #ffffff;
z-index: 10000;
}
.button:first-of-type {
border-right: 1px solid #ddd;
}
.button:last-of-type {
border-left: 1px solid #ddd;
}
.written {
width: 100%;
height: 100%;
position: relative;
background-color: #fbfbfb;
padding: 10rpx 10rpx;
box-sizing: border-box;
}
</style>
最终效果