293 lines
5.9 KiB
Vue
293 lines
5.9 KiB
Vue
<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 btn_cancel" @tap="close">取消</view>
|
||
<view class="btn btn_clear" @tap="clear">清除</view>
|
||
<view class="btn btn_save" @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;
|
||
uni.hideLoading();
|
||
// that.$emit('save', res.tempFilePath);
|
||
uni.saveImageToPhotosAlbum({
|
||
filePath: res.tempFilePath,
|
||
success: function(resImg) {
|
||
debugger;
|
||
// console.log("resImg:"+resImg)
|
||
that.$emit('save', res.tempFilePath,resImg);
|
||
}
|
||
})
|
||
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 0px 2px #333;
|
||
|
||
// canvas
|
||
.firstCanvas {
|
||
background-color: #fff;
|
||
width: 100%;
|
||
height: 400upx;
|
||
border-radius: 8upx;
|
||
}
|
||
|
||
// canvas
|
||
|
||
.btns {
|
||
padding: 0 15px;
|
||
height: 80upx;
|
||
overflow: hidden;
|
||
position: absolute;
|
||
bottom: 10upx;
|
||
left: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.btn {
|
||
width: 30%;
|
||
text-align: center;
|
||
font-size: 28upx;
|
||
height: 80upx;
|
||
line-height: 80upx;
|
||
// background-color: #999;
|
||
color: #007aff;
|
||
border-radius: 10upx;
|
||
}
|
||
.btn_cancel{
|
||
color: #ffa500;
|
||
border: 1upx solid #ffa500;
|
||
}
|
||
.btn_clear{
|
||
border: 1upx solid #007aff;
|
||
}
|
||
.btn_save{
|
||
color:#ffffff;
|
||
background: #007aff;
|
||
border: 1upx solid #007aff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.visible .mask {
|
||
display: block;
|
||
opacity: 1;
|
||
}
|
||
|
||
.uni-list:after {
|
||
// 全局样式里面有一个，所以我们用白色把他隐藏起来
|
||
background-color: #ffffff;
|
||
}
|
||
</style> |