hbj_app/components/sign/sign.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">
					<u-button class="btn" @tap="clear" type="primary" size="mini" text="清除签名"></u-button>
					<u-button class="btn" @tap="close" type="primary" size="mini" text="退出签名"></u-button>
					<u-button class="btn" @tap="save" type="primary" size="mini" text="保存到相册"></u-button>
				</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 = res.windowHeight;
	}
});
export default {
	name: 'sign',
	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() {
			// console.log(canvasw, canvash, '222');
			//清除画布
			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: '生成中...' });
			setTimeout(() => {
				uni.canvasToTempFilePath(
					{
						canvasId: this.canvasId,
						success: function(res) {
							that.signImage = res.tempFilePath;
							//把base图片保存本地一份

							//触发父组件emit时间传值
							that.$emit('save', res.tempFilePath);
							//把base图片保存本地一份
							// #ifdef APP-PLUS
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function(res) {
									uni.showToast({
										title: '保存成功',
										//将值设置为 success 或者直接不用写icon这个参数
										icon: 'success',
										//显示持续时间为 2秒
										duration: 2000
									});
									console.log(res.path, res.errMsg.saveImageToPhotosAlbum, 'save success');
								},
								fail: () => {
									uni.showToast({
										title: '失败',
										//将值设置为 success 或者直接不用写icon这个参数
										//显示持续时间为 2秒
										duration: 2000
									});
								}
							});
							// #endif
							// #ifdef H5
							// 获取当前时间并转成字符串，用来当做文件名
							const date = Date.now().toString();
							// 创建一个 a 标签
							const a = document.createElement('a');
							// 设置 a 标签的下载文件名
							a.download = `${date}.png`;
							// 设置 a 标签的跳转路径为 文件流地址
							a.href = res.tempFilePath;
							// 手动触发 a 标签的点击事件
							a.click();
							// 移除 a 标签
							a.remove();
							// #endif
							uni.hideLoading();
							that.hasDh = false;
							that.show = false;
						},
						fail: function(err) {
							console.log(err);
							uni.hideLoading();
						}
					},
					this
				);
			}, 100);
		}
		// 1
	}
};
</script>

<style lang="scss">
.cat-signature.visible {
	visibility: visible;
	width: 100%;
	height: 100%;
}
.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: 100%;
		height: 100%;
		background: #fff;
		border-radius: 8upx;
		box-shadow: 0px 3px 3px #333;
		// canvas
		.firstCanvas {
			background-color: #ffffff;
			width: 100%;
			height: 100%;
		}
		// canvas

		.btns {
			padding: 0 15px;
			display: flex;
			overflow: hidden;
			position: absolute;
			bottom: 10upx;
			left: 0;
			right: 0;
			margin: auto;

			.btn {
				width: 30%;
				text-align: center;
				font-size: 28upx;
				height: 60upx;
				line-height: 60upx;
				color: #fff;
				border-radius: 6upx;
			}
		}
	}
}

.visible .mask {
	display: block;
	opacity: 1;
}

.uni-list:after {
	// 全局样式里面有一个，所以我们用白色把他隐藏起来
	background-color: #ffffff;
}
</style>