app端 uniapp 签字手写板，手写签名

<template>
	<view class="">
		<w-nav-bar :title="'签字'></w-nav-bar>
		<canvas ref="canvas" canvas-id="2d" :style="`width: ${config.width}px; height: ${config.height}px;`"
			@touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"></canvas>
		<view class="button-view" style="position: fixed; bottom: 0;display: flex;width: 100%;justify-content: space-around;">
			<u-button type="primary" shape="circle" @click="save()" hover-class="none">保存</u-button>
			<u-button type="plain" shape="circle" @click="reset()" hover-class="none">重置</u-button>
		</view>
	</view>
</template>
<script>
	export default {
		name: "demo",
		components: {},
		data() {
			return {
				ctx: null,
				canvas: null,
				drawCount: 0,
				config: {
					width: 0, // 宽度
					height: 0, // 高度

					offsetX: 0,
					offsetY: 0,
					lineWidth: 5, // 线宽
					strokeStyle: '#000000', // 线条颜色
				}
			}
		},
		methods: {
			drawingBoardInit() {
				// 设置边框
				//   canvas.style.border = '1px solid #000';
				// 创建上下文
				this.ctx = uni.createCanvasContext('2d');
				this.ctx.setLineWidth(this.config.lineWidth)
				this.ctx.setStrokeStyle(this.config.strokeStyle)
				this.ctx.lineWidth = this.config.lineWidth
				this.ctx.strokeStyle = this.config.strokeStyle
				this.ctx.clearRect(0, // x 轴起始绘制位置
					0, // y 轴起始绘制位置
					this.config.width,
					this.config.height);
				// 设置填充背景色
				this.ctx.setFillStyle('#ffffff');
				// 绘制填充矩形
				this.ctx.fillRect(
					0, // x 轴起始绘制位置
					0, // y 轴起始绘制位置
					this.config.width, // 宽度
					this.config.height, // 高度
				);
			},
			// 鼠标按下
			touchStart(event) {
				if (this.drawCount == 0) {
					this.drawingBoardInit()
				}
				this.drawCount++
				// 获取偏移量及坐标
				const {
					x,
					y
				} = event.changedTouches[0];
				// 清除以上一次 beginPath 之后的所有路径，进行绘制
				this.ctx.beginPath();
				// 设置画线起始点位（减去 左边、上方的偏移量很关键）
				this.ctx.moveTo(x - this.config.offsetX, y - this.config.offsetY);
			},
			// 绘制
			touchMove(event) {
				// 获取当前坐标点位;
				const {
					x,
					y
				} = event.changedTouches[0];
				// 根据坐标点位移动添加线条（减去 左边、上方的偏移量很关键）
				this.ctx.lineTo(x - this.config.offsetX, y - this.config.offsetY);
				this.ctx.stroke();
				this.ctx.draw(true, ((ret) => {
					console.log(ret);
				}));
				this.ctx.moveTo(x - this.config.offsetX, y - this.config.offsetY);
			},
			// 结束绘制
			touchEnd() {},
			// 清除
			reset() {
				// 清空当前画布上的所有绘制内容
				this.ctx.clearRect(0, 0, this.config.width, this.config.height);
				this.ctx.stroke();
				this.ctx.draw(true);
				this.drawCount = 0
			},
			// 将画布内容保存为图片
			save() {
				if (!this.drawCount) {
					uni.showToast({
						icon:'none',
						title: this.$t('qz.toast')
					})
					return
				}
				return new Promise((resolve, reject) => {
					uni.canvasToTempFilePath({
						canvasId: '2d',
						success: function(res) {
							console.log(res.tempFilePath)
						},
						fail: function(error) {
							console.log('绘制失败-------------', error);
						},
						complete: function() {}
					});
				});
			},
		},
		mounted() {

			const sys = uni.getSystemInfoSync();
			console.log(sys)
			this.config.width = sys.safeArea.width;
			this.config.height = sys.safeArea.height - sys.safeArea.top;
			this.config.offsetX = 0;
			this.config.offsetY = 0;
		},

	}

</script>

<style scoped lang="scss">
	.container-view {
		height: 100vh;
		display: flex;
		flex-direction: column;
	}
	.button-view {
		padding: 0 $page-spacing;
		background-color: #fff;
		display: flex;
		flex-wrap: wrap;
		/deep/ .u-btn {
			margin: 0 0 $card-vertical-spacing;
			margin-left: 0;
			min-width: 285rpx;
			&:nth-child(2n) {
				margin-left: 20rpx;
			}
			&:nth-child(-n + 2) {
				margin-top: $card-vertical-spacing;
			}
		}
		/deep/ .u-btn--primary--plain {
			background-color: #fff !important;
			color: $primary-color-button !important;
			border-color: $primary-color-button !important;
		}
		/deep/ .u-btn--primary {
			height: 80rpx;
			line-height: 80rpx;
			background: $primary-color-button;
			font-size: $primary-font-size;
			font-weight: 500;
			color: #FFFFFF;
			border-radius: 4rpx !important;
		}
		uni-button::after{
			border-radius: 4rpx !important;
		}
	}
</style>
 No newline at end of file