参考:(9条消息) unniapp实现电子签名_你知不知的博客-CSDN博客_uniapp签名板
上面那位大佬写的不全,然后做了写修改
这是封装的电子签名组件
父组件:
//页面
<template>
<view>
<button type="primary" @tap="doss" style="margin: 10px;">点击签名</button>
<view class="imgs"><image class="img" :src="img1" mode="widthFix" style="margin: 0px 24px;"></image></view>
<catSignature canvasId="canvas1" @close="close" @save="save" :visible="isShow" ref="hello"/>
</view>
</template>
//js
<script>
import catSignature from '@/components/canvas.vue';
//引入组件
components: {
catSignature
},
//data函数
isShow: false,
img1:"",
//methods函数
doss() {
this.isShow = true;
},
close() {
this.isShow = false;
},
save(val) {
this.isShow = false;
this.img1 = this.$refs.hello.signImage;
},
</script>
子组件:
<template>
<view class="uni-list list-pd">
<view v-if="visibleSync" class="cat-signature" :class="{ visible: show }" @touchmove.stop.prevent="moveHandle">
<view class="mask" @tap="close" />
<view class="content">
<canvas class="firstCanvas" :canvas-id="canvasId" name="autograph" @touchmove="move"
@touchstart="start($event)" @touchend="end" @touchcancel="cancel" @longtap="tap"
disable-scroll="true" @error="error" />
<view class="btns">
<view class="btn" @tap="clear">清除</view>
<view class="btn" @tap="save">保存</view>
</view>
</view>
</view>
</view>
</template>
<script>
var content = null;
var touchs = [];
var canvasw = 0;
var canvash = 0;
//获取系统信息
uni.getSystemInfo({
success: function(res) {
canvasw = res.windowWidth;
canvash = (canvasw * 9) / 16;
}
});
export default {
name: 'cat-signature',
props: {
visible: {
type: Boolean,
default: false
},
canvasId: {
type: String,
default: 'firstCanvas'
}
},
data() {
return {
show: false,
visibleSync: false,
signImage: '',
hasDh: false
};
},
watch: {
visible(val) {
this.visibleSync = val;
this.show = val;
this.getInfo();
}
},
created(options) {
this.visibleSync = this.visible;
this.getInfo();
setTimeout(() => {
this.show = this.visible;
}, 100);
},
methods: {
getInfo() {
//获得Canvas的上下文
content = uni.createCanvasContext(this.canvasId, this);
//设置线的颜色
content.setStrokeStyle('#000');
//设置线的宽度
content.setLineWidth(5);
//设置线两端端点样式更加圆润
content.setLineCap('round');
//设置两条线连接处更加圆润
content.setLineJoin('round');
},
//
close() {
this.show = false;
this.hasDh = false;
this.$emit('close');
},
moveHandle() {},
// 画布的触摸移动开始手势响应
start(e) {
let point = {
x: e.touches[0].x,
y: e.touches[0].y
};
touchs.push(point);
this.hasDh = true;
},
// 画布的触摸移动手势响应
move: function(e) {
let point = {
x: e.touches[0].x,
y: e.touches[0].y
};
touchs.push(point);
if (touchs.length >= 2) {
this.draw(touchs);
}
},
// 画布的触摸移动结束手势响应
end: function(e) {
//清空轨迹数组
for (let i = 0; i < touchs.length; i++) {
touchs.pop();
}
},
// 画布的触摸取消响应
cancel: function(e) {
// console.log("触摸取消" + e)
},
// 画布的长按手势响应
tap: function(e) {
// console.log("长按手势" + e)
},
error: function(e) {
// console.log("画布触摸错误" + e)
},
//绘制
draw: function(touchs) {
let point1 = touchs[0];
let point2 = touchs[1];
// console.log(JSON.stringify(touchs))
content.moveTo(point1.x, point1.y);
content.lineTo(point2.x, point2.y);
content.stroke();
content.draw(true);
touchs.shift();
},
//清除操作
clear: function() {
//清除画布
content.clearRect(0, 0, canvasw, canvash);
content.draw(true);
// this.close()
this.hasDh = false;
this.$emit('clear');
},
save() {
var that = this;
if (!this.hasDh) {
uni.showToast({
title: '请先签字',
icon: 'none'
});
return;
}
uni.showLoading({
title: '生成中...',
mask: true
});
setTimeout(() => {
uni.canvasToTempFilePath({
canvasId: this.canvasId,
success: function(res) {
that.signImage = res.tempFilePath;
that.$emit('save', res.tempFilePath);
uni.hideLoading();
that.hasDh = false;
that.show = false;
},
fail: function(err) {
console.log(err);
uni.hideLoading();
}
},
this
);
}, 100);
}
}
};
</script>
<style lang="scss">
.cat-signature.visible {
visibility: visible;
}
.cat-signature {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 11;
height: 100vh;
visibility: hidden;
.mask {
display: block;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
transition: opacity 0.3s;
}
.content {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 94%;
height: 500upx;
background: #fff;
border-radius: 8upx;
box-shadow: 0px 3px 3px #333;
// canvas
.firstCanvas {
background-color: #fff;
width: 100%;
height: 400upx;
}
// canvas
.btns {
padding: 0 15px;
height: 100upx;
overflow: hidden;
position: absolute;
bottom: 10upx;
left: 0;
right: 0;
margin: auto;
display: flex;
justify-content: space-between;
.btn {
width: 40%;
text-align: center;
font-size: 28upx;
height: 60upx;
line-height: 60upx;
background-color: #999;
color: #fff;
border-radius: 6upx;
}
}
}
}
.visible .mask {
display: block;
opacity: 1;
}
.uni-list:after {
// 全局样式里面有一个,所以我们用白色把他隐藏起来
background-color: #ffffff;
}
</style>
完成!!!