<template>
	<view class="canvas-box">
		<!-- @touchstart:触摸开始，@touchmove：触摸移动，@touchend：触摸结束 -->
		<canvas @touchstart="handleTouch" @touchmove="handleMove" @touchend="handleEnd" class="my-canvas" type="2d"
			canvas-id="myCanvas" id="myCanvas"></canvas>
		<view class="sign-btn-box">
			<view @click="clearSign">清空</view>
			<view @click="confirmSign">确定</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive } from 'vue';
	import { onReady } from '@dcloudio/uni-app';
	const isDrawing = ref(false);
	const ctx = ref(null);

	const position = reactive({
		x: 0,
		y: 0
	})
	onReady(() => {
		const query = uni.createSelectorQuery()
		console.log(query);
		query.select('#myCanvas').fields({ node: true, size: true }, null).exec((res) => {
			const canvas = res[0].node;
			console.log(canvas, '----canvas对象');
			ctx.value = canvas.getContext('2d');   //渲染上下文
			const dpr = uni.getSystemInfoSync().pixelRatio  //获取设备像素进行画布初始化
			canvas.width = res[0].width * dpr
			canvas.height = res[0].height * dpr
			ctx.value.scale(dpr, dpr)
			// 设置绘制属性
			ctx.value.strokeStyle = '#000'; // 黑色线条
			ctx.value.lineWidth =4; // 线条宽度
			draw_signBg()
		})
	})

	const draw_signBg = () => {
		// 创建白色矩形背景板
		ctx.value.fillStyle = "#fff"
		ctx.value.fillRect(0, 0, ctx.value.canvas.width, ctx.value.canvas.height)
	}
	// 开始绘制
	const handleTouch = (e) => {
		isDrawing.value = true
		// 获取当前点的坐标
		const x = e.touches[0].x;
		const y = e.touches[0].y;
		position.x = x;
		position.y = y;
	}

	// 进行绘制
	const handleMove = (e) => {
		if (!isDrawing.value) return;
		const x = e.touches[0].x;
		const y = e.touches[0].y;
		// beginPath() 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
		ctx.value.beginPath();
		// moveTo(x,y) 将笔触移动到指定的坐标 x 以及 y 上。
		ctx.value.moveTo(position.x, position.y);
		// lineTo(x, y) 绘制一条从当前位置到指定 x 以及 y 位置的直线。
		ctx.value.lineTo(x, y);
		// stroke() 使用描边通过线条来绘制当前路径,不需要填充闭合路径
		ctx.value.stroke();
		position.x = x;
		position.y = y;
	}

	// 结束绘制
	const handleEnd = (e) => {
		isDrawing.value = false
	}

	const clearSign = () => {
		ctx.value.clearRect(0, 0, ctx.value.canvas.width, ctx.value.canvas.height)
		draw_signBg() // 设置成白色背景
	}

	const confirmSign = () => {
		// 获取 canvas 对象
		uni.createSelectorQuery()
			.select('#myCanvas')
			.node()
			.exec((res) => {
				// 获取 Canvas 对象
				const canvas = res[0].node;
				// 生成图片
				uni.canvasToTempFilePath({canvas,success: function (res) {
						// 在H5平台下，tempFilePath 为 base64
						console.log(res.tempFilePath)
						// 预览图片
						uni.previewImage({
							urls: [res.tempFilePath]
						})
					},
					fail: (res) => {
						console.log(res)
					}
				})
			})
	}
</script>

<style lang="less" scoped>
	.my-canvas {
		width: 100%;
		height: 1200rpx;
	}
	.sign-btn-box{
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 50rpx;
		&>view:first-child{
			width: 150rpx;
			height: 80rpx;
			border: 2rpx solid #00aaff;
			border-radius: 20rpx;
			text-align: center;
			line-height: 80rpx;
		}
		&>view:last-child{
			width: 150rpx;
			height: 80rpx;
			border: 2rpx solid #00aaff;
			background: #00aaff;
			border-radius: 20rpx;
			text-align: center;
			line-height: 80rpx;
			color: white;
		}
	}
</style>